Android第三章 Android用户界面程序设计

一、用户界面基础

用户界面（UserInterface）是系统和用户间进行信息交换的媒介。

    Android实行界面设计者和程序开发者**独立并行**工作的方式，实现了界面设计和程序逻辑完全分离，不仅有利于后期界面修改中可以避免修改程序的逻辑代码，也有利于针对不同型号手机的屏幕分辨率调整界面尺寸时不影响程序的运行。

    为了使界面设计和程序逻辑分离，Android程序将**用户界面和资源**从逻辑代码中分离出来，使用**XML文件描述用户界面**，资源文件独立保存在资源文件夹中。

    Android用户界面**框架**（Android UI Framework）采用MVC（Model-View-Controller）模型，为用户界面提供处理用户输入的控制器（controller）、显示图像的视图（view）和模型（model）。**模型**是应用程序的**核心**，保存有**数据和代码**。

    Android系统的界面元素以一种**树型结构**组织在一起，称为**视图树**。

    绘制依据视图树**从上至下**绘制每个界面元素，且每个元素负责完成自身的绘制如果元素包含**子元素**，则该元素通知其下所有子元素进行绘制

    **视图树**由**View和ViewGroup**构成。**View**是一个重要的基类，所有界面上的可见元素都是View的子类，ViewGroup是能够**承载多个View的显示单元**，用于承载界面布局和具有原子特性的重构模块。

    MVC中的控制器能够**接受并响应用户的动作**，如按键和触摸屏幕等，并将这些动作作为**一系列独立事件加入到队列**中，按照“**先进先出**”的规则将每个事件分配给**对应的事件处理函数**进行处理。

    Android用户界面是**单线程**用户界面，事件的获取和界面的屏幕绘制使用同一个线程。

好处：用户不需要在控制器和视图间进行同步，事件的处理完全按照队列顺序进行；

坏处：如果事件函数过于复杂，可能导致用户界面失去响应，因此界面的事件响应函数尽可能使用简短代码，或者将复杂工作交给后台线程处理。

二、界面布局

    布局是Android应用程序的**界面定义**，布局中所有界面元素都是以视图（View）或视图组（ViewGroup）对象。一个布局首先是一个视图组对象，可在视图组对象中添加子视图组对象或视图对象。

    Button、CheckBox、ImageView、TextView及其他UI组件都是View类的子类或子类的派生类。

    在设计Android应用程序U时，可通过XML定义和代码定义两种方法来定义布局。

    Android系统定义了6种基本摆放控件的规则，它们都间接或者直接继承ViewGroup类。

2、布局（Layout）

2.1、框架布局（FrameLayout）

    框架布局也叫**顿布局**，是最简单的布局方式，所有添加到这个布局中的视图都是以**层叠方式**显示，第一个添加的视图显示在最底层，最后一个放在最顶层，上一层的视图会覆盖下一层视图，因此框架布局类似堆栈布局。**先下后上**

【案例1：演示框架布局编程方法】

（1）新建OrderFood工程，选择Project→app→main→res-layout目录，选择New→XML→layout XML File，在Layout File Name中输入layout_framelayout，在Root Tag中输入FrameLayout，创建一个框架布局文件。

（2）在框架布局中放置两个Button和一个ImageView控件

<Button
    android:id="@+id/btn1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="button1"/>
<Button
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="确定"/>
<TextView
    android:id="@+id/ImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"/>

说明：

android:layout_width，设置控件的宽

android:layout height，设置控件的高

match_content，表示和父组件一样尺寸

wrap_content，表示和自身内容一样尺寸

android:text，指定的控件当中显示的文字

android:src，图片资源

（3）在MainActivity.java文件中修改与主Activity绑定的布局文件主要修改语句：setContentView(R.layout.layout framelayout)；

运行结果：

2.2、线性布局(LinearLayout）

    线性布局是将控件按照**水平（horizontal）**或**垂直（vertical）**两种方式排列，在布局文件中由**android:orientation**属性来控制排列方向。

水平方向设置为android:orientation="horizontal”，垂直方向设置为android：orientation"vertical"

    **常用属性**

layout _width:布局宽度（match_parent ，wrap_conent）

layout height:布局高度（match_parent,wrap_conent）

orietation : 方向(vertical , horizontal）

gravity：对齐方式（left,right,center,top,bottom...）

background:背景（颜色、图片、选择器）

weight：比重（用于瓜分手机屏幕）

padding: 内边距 (paddingLeft, paddingRight, - paddingTop,paddingBottom)

margin: 外边距 (marginLeft, marginRight, marginTop, marginBottom)

【案例2：演示线性布局编程方法】

（1）选择OrderFood工程，选择Project-layout→New→XML-layout XML File，在Layout File Name中输入layout linearlayout，在Root Tag中输入LinearLayout，创建一个线性布局文件。

（2）在线性布局中放置两个TextView控件

（3）在MainActivity.java文件中修改与主Activity绑定的布局文件

android:orientation="vertical">//布局方向为垂直方向

//线性布局

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第一行"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第二行"/>

运行结果：

2.3、相对布局（RelativeLayout）

    相对布局是采用**相对于其他组件位置**的布局方式，该布局内的组件都和其他组件存在相对关系，通常通过指定id关联其他组件，以**右对齐、上对其、下对齐或居中对齐**等方式来排列组件。

    相对布局是现在用的比较多的一种布局方式，属性较多。

【案例3：演示相对布局编程方法】

（1）选择OrderFood工程，选择Projectlayout→New→XML→layout XML File，在Layout File Name中输入layout relativelayout，在Root Tag中输入RelativeLayout，创建一个相对布局文件。

（2）在相对布局中放置三个TextView控件

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textview1"
    android:layout_centerHorizontal="true"
    android:text="TextView1(水平方向位于中间)"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textview2"
    android:layout_below="@+id/textview1"
    android:text="TextView2(在TextView2下方)"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textview3"
    android:layout_below="@+id/textview2"
    android:layout_alignParentRight="true"
    android:text="TextView3(在textview2下方且右对齐)"/>

运行结果：

2.4、绝对布局（AbsoluteLayout）

    绝对布局是以屏幕左上角为坐标（0,0），直接以**具体坐标**指定控件位置，该布局可以随意指定控件位置，但开发很少用，因为不同手机屏幕分辨率不同，存在兼容性问题。其中组件位置通过**android:layout_x**和**android:layout_y**这两个属性进行设置。

【案例4：演示绝对布局编程方法】

    主要步骤：

（1）新建绝对布局XML文件；

（2）在布局文件中创建控件，并设置其坐标；

（3）修改MainActivity相关代码；

（4）运行。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textview1"
    android:layout_x="0dp"
    android:layout_y="0dp"
    android:text="坐标：（0，0）"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textview2"
    android:layout_x="30dp"
    android:layout_y="30dp"
    android:text="坐标（30，30）"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textview3"
    android:layout_x="80dp"
    android:layout_y="80dp"
    android:text="坐标（80，80）"/>

运行结果：

2.5、表格布局(TableLayout)

    表格布局是将页面划分为**行、列构成的单元格**。

    每个**<TableRow></TableRow>**标记表示单元格的**一行**，单元格的列数等于**最多子控件**TableRow的列数。直接在**TableLayout**加的控件会直接占据一行。

    TableLayout可设置的属性包括**全局属性**及**单元格属性**。

（1）全局属性

也即列属性，有以下3个参数：

1.android:stretchColumns设置可伸展的列。该列可以向行方向伸展，最多可占据一整行。

2.android:shrinkColumns设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示。

3.android:collapseColumns 设置要隐藏的列。

android:stretchColumns ="0" //第0列可伸展

android:shrinkColumns ="1,2" //第1,2列可收缩

android:collapseColumns="*" //隐藏所有列

（2）单元格属性

有以下2个参数：

android:layout_column指定该单元格在第几列显示

android:layout_span 指定该单元格占据的列数（未指定时为1）

android:layout_column="1" //该控件显示在第1列
android:layout_span="2" //该控件占据2列
说明︰一个控件可同时具备这两个特性

【案例5：演示表格布局编程方法】

主要步骤：

（1）新建表格布局XML文件；

（2）在布局文件中创建控件；

（3）修改MainActivity相关代码；

（4）运行。

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一行，，，"/>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二行第一列！！！"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二行第二列？？？"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第三行第一列。。。"/>
    </TableRow>

运行结果：

2.6、 网格布局（GridLayout）

    网格布局是android4.0以上版本出现的，网格布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。

    它与LinearLayout布局一样，也分为水平和垂直两种方式，默认是水平布局，

一个控件挨看一个控件从左到石依次排列，但是通过指定

    android:columnCoun设置列数的属性后，控件会自动换行进行排列

    对于GridLayout布局中的子控件，默认按照wrap_content的方式设置其显示，这只需要在GridLayout布局中显式声明即可。

    若要指定某控件显示在固定的行或列，只需设置该子控件的android:layout row 和android:layout column属性即可。

android:layout_row=”0”
l表示从第一行开始
android:layout_column=”0”
l表示从第一列开始

    如果需要设置某控件跨越多行或多列，只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值,表明该控件跨越的行数或列数，再设置其layout_gravity属性为fill，表明该控件填满所跨越的整行或整列。

【】

运行结果：

三、界面常用控件

1、TextView和 EditView

    TextView是用于**显示字符**的控件，类似于C#和Java语言中的Label控件，但它支持**显示多行**文本及**自动换行**。

    EditView则是用来**输入和编辑字符**的控件，具有编辑功能。这两个控件经常一起使用。

【案例：演示TextView和EditView控件编程方法】

主要步骤：

（1）新建线性布局XML文件；在布局文件中创建控件；

（2）修改MainActivity.java相关代码；

（3）引入android.widget开发包；引用控件；

（4）运行。

【】

【layout_linearlayout.xml】

    android:orientation="vertical">//布局方向为垂直方向
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:text="ceshi"/>
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50dp"
        android:id="@+id/editTextDemo"/>

【MainActivity.java】

public class MainActivity extends AppCompatActivity {
    final static String TAG="MainActivity";
    EditText editText = null;//TestView控件 EditText控件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_linearlayout);
        TextView textView=(TextView)findViewById(R.id.textView1);
        editText=(EditText)findViewById(R.id.editTextDemo);
        textView.setText("用户名");
        editText.setText("请输入");

运行结果：

2、Button和lmageButton

    Button是常用的普通**按钮**控件，用户能够在该控件上点击，引发相应的响应事件。有默认的按钮背景，内部**文本居中对齐**。

    如果需要在**按钮上显示图像**，则可以使用ImageButton控件。

【案例：演示Button和ImageButton控件编程方法】

主要步骤：

（1）在布局文件中添加Button控件和ImageButton控件；

（2）复制相关图片到res→drawable；

（3）修改MainActivity相关代码；引用控件；

（4）运行。

【布局文件】

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:text="Buttton"/>
    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/imagebutton"/>

【MainActivity】

import android.widget.Button;
import android.widget.ImageButton;

public class ButtonActivity extends AppCompatActivity {

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

        //Button ImageButton
        Button button = (Button)findViewById(R.id.button);
        ImageButton imageButton = (ImageButton)findViewById(R.id.imageButton);
        imageButton.setImageResource(R.drawable.a1);
    }
}

运行结果：

3、CheckBox和 RadioButton

    CheckBox是同时可以**选择多个选项**的控件，RadioButton是仅可以**选择一个选项**的控件。

    Radio**Group**是RadioButton的承载体，程序运行时不可见。在一个RadioGroup中，用户仅能**选择其中一个RadioButton**。

【案例：演示CheckBox和RadioButton控件编程方法】

主要步骤：

（1）在布局文件中添加CheckBox和RadioButton控件；

（2）设置控件相关属性；

（3）修改MainActivity相关代码；引用控件；

（4）运行。

4、Spinner和 ListView

    Spinner（下拉列表）是从**多个选项中选择一个选项**的控件，类似于桌面程序的组合框(ComboBox)，但**没有组合框的下拉菜单**，而是使用**浮动菜单**为用户提供选择。

    ListView（列表视图）是用于**垂直显示**的列表控件，如果显示内容过多，则会出现**垂直滚动条**。这两个控件在界面设计中经常使用，其原因是它们能够通过适配器将数据和显示控件绑定，且支持点击事件，用少量代码实现复杂的选项功能。

    Spinner和ListView的直接父类是ViewGroup。

Adapter

    Spinner和ListView和所要展示的内容（即数据源）之间需要**Adapter（适配器）**来实现。Adapter是一个桥梁。

    Adapter是一个接口，常用的有SimpleAdapter、ArrayAdapter等。ArrayAdapter较为简单，支持一行文本。SimpleAdapter可自定义各种效果。

    Spinner和ListView**显示**前要使用**setAdapter（）**方法，ListView本身继承自**ViewGroup**，只设定它里面的View的排列规则，不设定其是什么样的，而View是什么样的需要靠ListAdapter里面的getView方法来确定，只要设置不同的ListAdapter实例对象，就会生成不一样的ListView。

4.1、Spinner

（1）Spinner的两种展示样式

    一种是在当前**下拉框的正下方**展示列表，此时把spinnerMode属性设置为dropdown

    另一种是在页面中部以**对话框形式**展示列表，此时把SpinnerMode属性设置为dialog。

（2）Spinner相关方法

SetPrompt：设置标题文字。

setAdapter：设置下拉列表的适配器。

setSelection：设置当前选中哪项。注意该方法要在setAdapter方法之后调用。

etOnltemSelectedListener：设置下拉列表的选择监听器，该监听器要实现接口OnltemSelectedListener。

Spinner语法

【案例：使用ArrayAdapter演示Spinner控件编程方法】

主要步骤：

（1）在布局文件中添加Spinner控件；

（2）设置控件相关属性；

（3) import android.widget.Spinner;

（4）修改MainActivity相关代码；引用控件；

（5）运行。

4.2、ListView

【案例：使用ArrayAdapter演示ListView控件编程方法】

主要步骤：

（1）在布局文件中添加ListView控件；

（2）设置控件相关属性；

（3) import android.widget.ListView;

（4）修改MainActivity相关代码；引用控件；

（5）运行。

5、自定义列表

    对于不同的适配器类型，ArrayAdapter是最简单的一种，只能显示一行文字，

而SimpleAdapter的扩展性最好，可以定义各种各样的布局，可以放上ImageView，还可以放上Button和CheckBox等，因此我们可以用它来生成自定义列表。

四、用户界面设计