Android从入门到精通——学习笔记：Chapter02-用户界面设计基础

Android从入门到精通

Chapter 02 用户界面设计基础

2.1 UI设计相关的概念

我们要开发的Android应用时运行在手机或者平板电脑上的程序，这些程序给用户的第一印象就是用户界面，也就是User Interface，简称UI。在Android中，进行用户界面设计可以称为UI设计，在进行UI设计时，经常会用到View和View Group。对于初识Android的人来说，一般不好理解。下面对这里两个概念进行详细介绍。

2.1.1 View

View在Android中可以理解为视图。它占据屏幕上的一个矩形区域，负责提供组件绘制和事件处理的方法。如果把Android界面比喻成窗户，那么每块玻璃都是一个View。View类是所有UI组件（Android默认创建的界面中的TextView就是UI组件）的基类。

说明：View类位于android.view包中；文本框组件TextView是View类的子类，位于android.widget包中。

在Android中，View类及其子类的相关属性，既可以在XML布局文件中进行设置，也可以通过成员方法在java代码中动态设置。View类常用的属性及对应的方法如下：

2.1.2 ViewGroup

ViewGroup在Android中代表容器。如果还用窗户来比喻的话，ViewGroup相当于窗户框，用户控制玻璃的安放。ViewGroup类继承自View类，它是View类的扩展，是用来容纳其他组件的容器，但是由于ViewGroup是一个抽象类，所以在实际应用中通常是使用ViewGroup的子类来做容器的，例如，布局管理器。

ViewGroup控制器子组件的分布时（例如，设置子组件的内边距、宽度和高度等），还经常依赖于ViewGroup.LayoutParams和ViewGroup.MarginLayoutParams两个内部类，下面分别介绍。

1. ViewGroup.LayoutParams类

ViewGroup.LayoutParams类封装了布局的位置、高和宽等信息。它支持android:layout
_height和android:layout_width两个XML属性，它们的属性值，可以使用精确的数值，也可以使用**fill_parent（表示与父容器相同）、match_parent（表示与父容器相同，需要API 8或以上版本才支持）和wrap_content（表示包裹其自身的内容）**指定。

2. ViewGroup.MarginLayoutParams类

ViewGroup.MarginLayoutParams类用于控制器子组件的外边距，它支持的常用属性如下表：

在Android中，所有的UI界面都是由View类行尾ViewGroup类及其子类组合而成的。在ViewGroup类中，除了可以包含普通的View类外，还可以再次包含ViewGroup类。实际上，这使用了Composite（组合）设计模式。

3. 内边距与外边距

2.2 控制UI界面

2.2.1 使用XML布局文件控制UI界面

Android提供了一种非常简单、方便的方法用于控制UI界面。该方法采用XML文件来进行界面布局，从而将布局界面的代码和逻辑控制的Java代码分离来，使程序的结构更加清晰、明了。

使用XML布局文件控制UI界面可以分为以下两个关键步骤。

1. 在Android应用的res\layout目录下创建XML布局文件，该布局文件的名称可以采用任何符合Java命名规则的文件名。

2. 在Activity中使用以下Java代码显示XML文件中布局的内容。

    setContentView(R.layout.activity_main);
   

   在上面的代码中，activity_main使XML布局文件的文件名

通过上面的步骤就可以轻松实现布局并显示UI界面的功能。

2.2.2 开发自定义的View

一般情况下，开发Android应用程序的UI界面不直接使用View类和ViewGroup类，而是使用这两个类的子类。例如，要显示一个图片，就可以使用View类的子类ImageView。虽然Android提供了很多继承了View类的UI组件，但是在实际开发中，还会出现不足以满足程序需求的情况。这时，我们就可以通过继承View类来开发自己的组件。开发自定义的View组件大致分为以下三个步骤。

1. 创建一个继承android.view.View类的Java类，并且重写构造方法。

   PS：在自定义的View类中，至少需要重写一个构造方法。

2. 根据需要重写其他的方法。被重写的方法可以通过下面的方法找到。

   在代码中右击 ——> 在弹出的快捷菜单中选择Generate命令 ——> 再从弹出的菜单中选择Override Methods…命令，将显示可以被重写的所有方法 ——> 选择需要重写的方法，并单击OK按钮。

   完成上述步骤，Android Studio将自动重写指定的方法。通常情况下，不需要重写全部的方法。

3. 在项目的活动中，创建并实例化自定义View类，然后将其添加到布局管理器中。

下面通过一个小例子来演示如何开发自定义的View：

1. 修改res\layout节点下的布局文件activity_main.xml，将默认创建的布局管理器修改成帧布局管理器FrameLayout，并且设置背景和id属性，然后将TextView组件删除。修改后的代码如下：

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/grass"
        android:id="@+id/mylayout"
        android:paddingBottom="16dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="16dp"
        tools:context=".MainActivity">
    </FrameLayout>
   

2. 在com.example包上右击，在弹出的快捷菜单中选择View->Java Class命令，新建一个名称为RabbitView的Java类，该类继承自android.view.View类，重写带一个参数Context的构造方法和onDraw()方法。其中，在构造方法中设置兔子的默认显示位置，在onDraw()方法中根据图片绘制小兔子。RabbitView类的关键代码如下：

    public class RabbitView extends View {
        public float bitmapX;
        public float bitma