Android用户界面开发概述

相信通过前面15期的学习，Android的开发环境已经基本掌握了，如果仍有问题，欢迎到Android零基础入门技术讨论微信群交流，从本期开始正式来一步一步踏入Android开发之路。

Android应用开发的一项内容就是用户界面的开发。Android提供了非常丰富的用户界面组件，借助于这些用户界面组件，开发者可以非常方便地进行用户界面开发，而且可以开发出非常优秀的用户界面。

一、界面UI元素介绍

Android应用是运行于手机系统上的程序，这种程序给用户的第一印象就是用户界面。接下来从以下几个方面来认识了解Android的界面UI元素。

1.1视图组件View

在Android中View类是最基本的一个UI类，基本上所有的高级UI组件都是继承View类实现的。Android应用的绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中，可以看到Android应用的所有UI组件都继承了 View类。View类是Android系统平台上用户界面表示的基本单元，View的一些子类被统称为Widgets （工具），提供了诸如文本输入框和按钮之类的UI对象的完整实现。

一个视图（View）在屏幕上占据了一块矩形区域，它负责渲染这块矩形区域（如将这块矩形区域变成其他颜色），也可以处理这块矩形区域发生的事件（如用户单击事件），并且可以设置这块区域是否可见、是否可以获取焦点等。

1.2视图容器组件ViewGroup

View类有一个非常重要的子类ViewGroup，其为View的一个扩展，可以容纳多个 View，通过ViewGroup类可以创建有联系的子View组成的复合控件。

下图表示Android图形用户界面的组件层次。

从上图可以看出，多个视图组件（View）可以存放在一个视图容器（ViewGroup）中，该容器可以与其他视图组件共同存放在另一个容器中，但是一个界面文件中必须有且只有一个容器作为根结点。

Android的所有UI组件都是建立在View、ViewGroup基础之上的，Android采用了 “组合器”设计模式来设计View和ViewGroup。对于一个Android应用的图形用户界面来说，ViewGroup作为容器来盛装其他组件，而ViewGroup里除了可以包含普通View组件之外，还可以再次包含ViewGroup组件。

1.3布局组件Layout

Android的界面组件比较多，为了更好的管理用户界面里的各组件，Android提供了布局组件来进行管理。通过使用布局组件，Android应用的图形用户界面具有良好的平台无关性。

目前Android中主要有六种布局，分别如下：

 LinearLayout（线性布局）：

按照水平或垂直的顺序将子元素（可以是控件或布局）依次按照顺序排列，每一个元素都位于前面一个元素之后。

 RelativeLayout（相对布局）：

按照子元素之间的位置关系完成布局的，作为Android系统五大布局中最灵活也是最常用的一种布局方式，非常适合于一些比较复杂的界面设计。

 TableLayout（表格布局）：

以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。

 FrameLayout（帧布局）：

将所有的子元素放在整个界面的左上角，后面的子元素直接覆盖前面的子元素。

 AbsoluteLayout（绝对布局）：

将所有的子元素通过设置android:layout_x 和 android:layout_y属性，将子元素的坐标位置固定下来。

 GridLayout（网格布局）：

是Android 4.0新增的布局管理器，把整个容器划分成为"行*列"个网格，每个网格可以放置一个组件，另外，也可以设置一个组件横跨多个列和多个行。

以上几种布局类图如下图 所示：

关于布局组件的内容，会在后续课程进行详细学习，此处不做过多说明。

1.4布局参数LayoutParams

LayoutParams是用来设置视图布局的基类，基本的LayoutParams类只是用来描述视图的宽度和高度。

Android提供的布局类都是LayoutParams的子类，LayoutParams的子类主要有：

 AbsListView.LayoutParams

 AbsoluteLayout.LayoutParams

 FrameLayout.LayoutParams

 LinearLayout.LayoutParams

 RadioGroup.LayoutParams

 RelativeLayout.LayoutParams

 TableLayout.LayoutParams

 TableRow.LayoutParams

 ViewGroup.MarginLayoutParams

 WindowManager.LayoutParams

其中常用的是RelativeLayout.LayoutParams、LinearLayout.LayoutParams、ViewGroup.MarginLayoutParams。将会在后续内容中陆续学习，此处不在赘述。

二、UI界面通用属性和方法

View类是所有UI组件的基类，其包含的XML属性和方法是所有组件都可使用的，接下来一起先来整体学习，如下表所示。

ViewGroup继承了 View类，当然也可以当成普通View来使用，但ViewGroup主要还是当成容器类使用。但由于ViewGroup是一个抽象类，因此实际使用中通常总是使用ViewGroup 的子类来作为容器，例如各种布局管理器。

ViewGroup容器控制其子组件的分布依赖于ViewGroup.LayoutParams、ViewGroup. MarginLayoutParams两个内部类。这两个内部类中都提供了一些XML属性，ViewGroup容器中的子组件可以指定这些XML属性。

其中ViewGroup.LayoutParams所支持的两个XML属性如下：

 android:layout_width：指定该组件的布局宽度。

 android:layout_height：指定该组件的布局高度。

关于上面这两个属性，其属性值一般为如下3个属性值其一。

 fill_parent：

指定子组件的高度、宽度与父容器组件的高度、宽度相同（实际上还要减去填充的空白距离）。

 match_parent：

该属性值与fill_parent完全相同，而且从Android 2.2开始就推荐使用这个属性值来代替fill_parent。

 wrap_content：

指定子组件的大小恰好能包裹它的内容即可。

除了以上这3个属性值，还可以指定具体的宽高像素值，如80dp。其中dp为一个尺寸单位。

在正式学习Android组件之前，先来一起了解几个基本概念。

 px：

像素（pixels），1px代表屏幕上一个物理的像素点。px单位不被建议使用，因为同样100px的图片，在不同手机上显示的实际大小可能不同。偶尔用到px的情况，是需要画1像素表格线或阴影线的时候，用其他单位如dp会显得模糊。

 dp：

设备独立像素（Density-independent pixel），一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp=1px，但随着屏幕密度的改变，dp与px的换算会发生改变，换算公式为dips=(pixs*160)/densityDpi。

 dip：

设备独立像素，与dp完全相同，只是名字不同而已。在早期的Android版本里多使用dip，后来为了与sp统一就建议使用dp。

 sp：

比例像素（scale-independent pixel），主要处理字体的大小，可以根据用户的字体大小首选项进行缩放。当文字尺寸是“正常”时1sp=1dp=0.00625英寸，而当文字尺寸是“大”或“超大”时1sp>1dp=0.00625英寸。

 in：

英寸，标准长度单位，1英寸=2.54厘米（约）。

 mm：

毫米，标准长度单位。

 pt：

磅（point），标准长度单位，1pt=1/72英寸=0.035厘米。

 ppi：

每英寸像素数（pixel per inch），该值越高，则屏幕越细腻。

 dpi：

每英寸多少点（dot per inch），该值越高，则图片越细腻。

安卓端屏幕大小各不相同，根据其像素密度，主要分为几种规格，如下表所示。

ViewGroup.MarginLayoutParams用于控制子组件周围的页边距（Margin，也就是组件四周的空白），它支持的XML属性如下表所示。

三、创建UI界面

在前面的内容指出过，Android推荐使用XML布局文件来定义用户界面，而不是使用Java代码来开发用户界面，所有组件都提供了两种方式来控制组件的行为。

 在XML布局文件中通过XML属性进行控制。

 在Java程序代码中通过调用方法进行控制。

实际上不管使用哪种方式，它们控制Android用户界面行为的本质是完全一样的。大部分时候，控制UI组件的XML属性还有对应的方法。UI界面的创建主要分为如下三种情况。

3.1使用XML布局文件

实际上在创建HelloWorld应用程序的时候就是使用该方法，这种方法是Android推荐使用的，不仅简单、明了，而且可以将应用的视图控制逻辑从Java代码中分离出来，放入XML文件中控制，从而更好地体现MVC原则。

当我们在Android应用的app/src/main/res/layout目录下定义一个XML布局文件之后（R.java会自动收录该布局资源），Java代码可通过如下方法在Activity中显示该视图：

setContentView (R.layout.<资源文件名字>);

当在布局文件中添加多个UI组件时，都可以为该UI组件指定android:id属性，该属性的属性值代表该组件的唯一标识。接下来如果希望在Java代码中访问指定UI组件，则可通过如下代码来访问它：

findViewByld (R.id.<android.id 属性值>);

一旦在Java程序中获得指定UI组件之后，接下来就可以通过代码来控制各UI组件的外观行为了，包括为UI组件绑定事件监听器等。

3.2使用Java代码

虽然Android推荐使用XML布局文件来控制UI界面，但如果开发者愿意，Android允许开发者完全在Java代码中控制UI界面。 如果希望在代码中控制UI界面，那么所有的UI组件都将通过new关键字创建出来，然后以合适的方式添加到UI界面即可。

为了更好的学习这一块内容内容，在HelloWorld工程中将app/src/main/java/MainActivity.java文件的代码修改一下，具体控制代码如下：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);


        // 创建一个线性布局
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);

        // 创建一个显示Hello World!的TextView
        TextView show = new TextView(this);
        show.setText("Hello World!");

        // 向layout容器添加一个TextView
        layout.addView(show);

        // 设置该Activity显示layout
        setContentView(layout);
    }
}

从上面程序的字代码可以看出，该程序中所用到的UI组件都是通过new关键字创建出来的，然后程序使用LinearLayout容器来容纳这些UI组件，这样就组成了图形用户界面。

从上面的程序代码中可以看出，创建UI组件时需要传入一个this参数，这是由于Context代表访问Android应用环境的全局信息的 API。让UI组件持有一个Context参数，可以让这些UI组件通过该Context参数来获取Android 应用环境的全局信息。Context本身是一个抽象类，Android应用的 Activity、Service 都继承了 Context，因此Activity、Service都可直接作为Context使用。关于这一块的内容现在可能会看不太懂，不过没关系，经过后续的学习就明白了。

通过XML布局和通过Java代码都可以实现同样的功能，但是发现通过Java代码实现程序非常臃肿，而用XML布局代码要简单得多，因此在开发中不推荐使用这种方式。

3.3混合使用XML布局文件和Java代码

前面己经提到，完全使用Java代码来控制UI界面不仅烦琐，而且不利于解耦；而完全利用XML布局文件来控制UI界面虽然方便、便捷，但难免有失灵活。因此有些时候，可能需要混合使用XML布局文件和代码来控制UI界面。

当混合使用XML布局文件和代码来控制UI界面时，习惯上把变化小、行为比较固定的组件放在XML布局文件中管理，而那些变化较多、行为控制比较复杂的组件则交给Java代码来管理。

此处不做过多介绍，在后续课程中会陆续接触到这种混合使用的方式来控制UI界面。