02_UI开发

Android UI开发

UI（User Interface）

UI（User interface）界面人与手机之间数据传递，信息交互的重要媒介和对话窗口，是android系统中重要的组成部分，界面美观程度影响用户的第一印象。

布局的创建

Android程序界面是通过布局文件设定的，在每个项目文件中 android studio 会默认创建一个主界面布局，该布局位于res/layout目录中，若要开发多个界面可在该目录下创建多个布局文件，XML文件。右击layout -> XML -> layout XML File。后选择文件名称和布局类型，默认为线性布局。

布局的类型

为适应不同的界面风格，android 提供了 5 种不同的常用布局类型。

• LinearLayout：线性布局
• RelativeLayout:相对布局
• FrameLayout：帧布局
• TableLayout：表格布局
• AbsoluteLayout：绝对布局
• GridLayout：网格布局

线性布局（LinearLayout）

主要以水平和垂直方式来显示界面中的控件，当控件水平排列时显示顺序依次从左到右；当控件垂直时顺序从上到下。

属性：

• orientation:用于控制空间的排列方向，有两个值：
  • vertical:线性布局 垂直显示
  • horizontal（默认）:线性布局 水平显示

控件的属性layout_width 于 layout_weight
	当控件水平排列时
		控件属性 layout_width 只能设置为wrap_content（包裹内容让当前控件根据控件自动伸缩），不能设置为macth_parent(填充父窗体由父容器大小决定控件的大小），否则其余控件将在右侧不显示，同里如果控件垂直排列也会出现类似情况。
		利用layout_weight属性可以达到适配屏幕的目的，该属性又被称之为权重。通过比例调整所有控件的大小。

相对布局（RelativeLayout）

Android 程序创建时默认就是 相对布局（RelativeLayout）相对布局通过相对定位的方式指定控件的位置，即以父容器为参照物，摆放控件得位置，在设计相对布局时要遵循控件之间的依赖关系，后放入的控件依赖于先放入的控件。

属性： 相对布局属性较多。 P35

• 摆放位置的属性
• 相对于某控件间距的属性
• 在布局中设置内边距的属性

控件的单位：在指定控件和布局宽高时最好使用“wrap_content”和“macth_parent”，尽量避免将控件的宽高设置为固定值，因为在很多情况下控件会自动挤压，在特殊情况下需要指定宽高时，可以选择使用 px、pt、dp、sp四种单位。

px：代表像素，因为手机屏幕分辨率同，在不同分辨率的手机上空间的显示也会不同。

pt：代表磅数，一般pt会用做字体的单位来显示，pt和px的情况类是

dp：一种基于屏幕分辨密度的抽象单位，不同的设备有不同的效果，它是根据分辨路的不同来确定控件得大小。

sp：代表可伸缩像素，采用dp相同的设计理念，推荐设置字体大小时使用。

帧布局（FrameLayout）

是Android最为简单的一种布局，该布局为加入的控件创建一个空白区域（称为一帧，每一个控件占据一帧）。采用帧布局，所有控件都会默认显示在屏幕左上角，并按照先后放入的顺序重叠摆放。帧布局适用于图层设计，帧布局的大小内部由最大的控件决定。他有两个属性

属性：

• android：foreground ：设置帧布局容器的前景图像（始终在所有子控件之上）
• android：foregroundGravity:设置前景图像显示位置

表格布局（TableLayout）

以表格的形式排列控件通过行和列将界面划分为多个单元格，每一个单元格都可以添加控件。表格布局需要和TaleRow配合使用。每一行都由一个TableRow对象组成，因此TableRow的数量决定表格的行数，而表格的列数是由包含最多控件的TableRow决定的。

TableLayout 继承自LinearLayout 类，除继承父类的属性和方法还包含一些表格特有的属性和方法。

布局属性：

• android：stretchCloumns 设置该列被拉伸
• android：shrinkCloumns 设置该列被收缩
• android：collapseCloumns 设置该列被隐藏

控件属性：

• android：layout_column 设置该单元显示位置
• android：layout_span 设置该单元占据几行，默认一行

绝对布局（AbsoluteLayout）

是指定 x , y 坐标来控制每一个控件得位置；随着手机等移动设备的增多，种类繁杂，这种布局方式需要精确计算没一种类，因此不推荐使用这种布局。

属性：

• android：layout_x 设置x坐标
• android：layout_y 设置y坐标

网格布局（GridLayout）

作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异;不过新增了一些东西：（结合大佬们的博客总结的，如有侵权，麻烦联系我删除此文章）

• 跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式
• 容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较)

属性

自身属性

属性	说明
android:alignmentMode	说明：当设置alignMargins，使视图的外边界之间进行校准。可以取以下值：alignBounds – 对齐子视图边界/alignMargins – 对齐子视距内容
android:columnCount	GridLayout的最大列数
android:rowCount	GridLayout的最大行数
android:columnOrderPreserved	当设置为true，使列边界显示的顺序和列索引的顺序相同。默认是true
android:orientation	GridLayout中子元素的布局方向。有以下取值：horizontal:水平布局/vertical – 竖直布局
android:rowOrderPreserved	当设置为true，使行边界显示的顺序和行索引的顺序相同。默认是true
android:useDefaultMargins	当设置ture，当没有指定视图的布局参数时，告诉GridLayout使用默认的边距。默认值是false

子元素属性

属性	说明
android:layout_column	显示该子控件的列，例如android:layout_column=”0”,表示当前子控件显示在第1列，android:layout_column=”1”,表示当前子控件显示在第2列
android:layout_columnSpan	该控件所占的列数，例如android:layout_columnSpan=”2”,表示当前子控件占两列
android:layout_row	显示该子控件的行，例如android:layout_row=”0”,表示当前子控件显示在第1行，android:layout_row=”1”,表示当前子控件显示在第2行
android:layout_rowSpan	该控件所占的列数，例如android:layout_rowSpan=”2”,表示当前子控件占两行
android:layout_columnWeight	该控件的列权重，与android:layout_weight类似，例如有GridLayout上两列，都设置android:layout_columnWeight = “1”,则两列各占GridLayout宽度的 一半
android:layout_rowWeight	该控件的行权重，原理同android:layout_columnWeight

常用控件

控件时界面组成的重要元素。

控件的类型

• TextView：文本框
• EditText：编辑框
• Button：按钮
• ImageView：视图控件 继承自 View

文本框（TextView）

显示文本信息（字符串），可以设置字体大小、颜色等

属性：

• android:text :设置显示文本
• android:textColor: 设置文本颜色
• android:textSize: 设置文字大小
• 。。。。。

layout_width、layout_height 和 width、height的区别
在Android系统中 layout_width 和 layout_height 属性和 width 与 height属性的功能是相同的，都用于设置组建的宽和高。只不过带Layout浅醉的属性通常是相较于负控件而言的，而 width 和 height 属性是相较于本控件而言的。
（1） layout_width 和 layout_height 可以单独使用，width 和 height不能，如果单独使用则该控件会不显示。
（2） layout_width 和 layout_height 可以设置为 wrap_content 或者 match_parent,而 width 和 height 只能设置为固定值。否则会产生编译错误。
（3） 如果要使用 width 和 height 就必须同时设置 layout_width 和 layout_height 属性，把 width 和 height 属性作为组件微调使用。

文本编辑控件（EditText）

用户需要输入数据，可以通过文本编辑框控件来接收用户的信息，该控件类似于一个运输工具，将用户的信息传递给Android程序，ExitText继承自TextView，与TextView最大的不同是用户可以在设备上对ExitText控件进行操作，同时ExitViwe控件设置为监听器，用来测试用户输入的内容是否合法。ExitText除了TextView的一些属性外，还有一些自己的属性。

属性：

• android:hint：设置ExitText在还没有输入内容的时显示的文字。
• android:lines：设置固定的行数来决定text的高度。
• android:maxlines：设置最大行数
• android:minlineas：设置最小行数
• android:password：设置文本以密码形式“ · ” 显示
• android:editable：设置是否可编辑
• 。。。。。

设置最大高度。可以防止EditText被拉伸，试界面效果不被影响。

按钮（Button）

按钮控件，用于响应用户的一系列点击事件，Button控件的点击方式有3种，分别是在布局中指定onClick属性、使用匿名内部类、在当前 Activity 中实现 OnClickListener 接口。

在Android中，按钮的单击事件一共有4种，直接绑定OnClick、匿名内部类作为监听器、实现OnClickListener接口并重写OnClick方法。然后通过switch判断那个按钮被单击（常用）、创建内部类。

• RadioButton单选按钮，他需要与RadioGroup配合使用，提供两个或多个互斥的的选项集。RadioGroup是单选组合框，可容纳多个RadioButton，并把他们组合在一起，实现单选状态。在RadioGroup中可以利用 android:orientation 控制RadioButton的排列方向。
  • 属性与其他控件相同。但是有一个特有属性，checked，
    • 值为 true 该控件默认被选中，false 该控件未选中（没有意义），按钮处于未选中状态

视图控件（ImangeView）

继承自 View ，其功能是在屏幕中显示一张图像。ImageView 类可以从各种来源加载图像（如资源库或网络），并提供缩放、裁剪、着色（渲染）等功能。

常见对话框

对话框的类型：

• 普通对话框
• 单选对话框
• 多选对话框
• 进度条对话框
• 消息对话框
• 自定义对话框

普通对话框（Dialog）

一般只会用来提示信息，并通常具有“确定”和“取消”按钮。

常用方法：

setTitle()：设置对话框标题
setlcon()：设置对话框图标
setPositiveButton():设置对话框添加 yes 按钮
setNegativeButton():设置对话框添加 no 按钮
setMessage()：设置对话框提示信息

实例

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 声明对象
        AlertDialog.Builder dialog;
        // 绑定当前界面窗口。设置标题
        dialog = new AlertDialog.Builder(this).setTitle("Dialog 对话框");
        dialog.setMessage("是否确定退出")                        // 设置提示信息
                .setIcon(R.mipmap.ic_launcher)
                .setPositiveButton("确定",null)     // 添加确定按钮
                .setNegativeButton("取消",null)     // 添加取消按钮
                .create(); // 创建对话框
        dialog.show();
    }
}

注意：在 AlertDialog.Builder() 中参数是 context （上下文）类型类型，而this的意思是当前对象，改案例所以直接用 this 是因为Dialog在 Activity 中 onCreate() 方法里生成的，this指当前类对象，若Dialog生成在匿名内部类中，直接写this会出现编译错误，因为这个this指向内部类，不是当前的Activity，所以想指定在指定界面生成对话框，参数就要必须指向这个Activity的 this ，所以参数用Activity的 类名.this 才能实现，例如：AlertDialog.Builder(MainAtivity.this).

单选对话框

单选对话框和RadioButton的作用类似，只能选择一个选项，它是通过AlertDialog 对象调用 setSingleChoiceltems() 方法创建的.

实例：

        // 生成对话框
        new AlertDialog.Builder(this)
                .setTitle("请选择性别")
                .setIcon(R.mipmap.ic_launcher)
                .setPositiveButton("确定",null)     // 添加确定按钮
                .setSingleChoiceItems(new String[]{"男", "女"}, 0,
                        new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                
                            }
                        })
                .show();
    }

setSingleChoiceItems() 需要设置三个参数，第一个参数是建立数组，用于显示选项内容，第二个设置是否默认选中，“0”标识默认选中第一个选项，-1表示默认未选中。第三个参数是设立监听，允许对话框被点击。

多选对话框

与单选对话框类似，调用 setMultiChoiceItems() 方法就可以实现

实例：

        // 生成对话框
        new AlertDialog.Builder(this)
                .setTitle("请添加兴趣爱好")
                .setIcon(R.mipmap.ic_launcher)
                .setMultiChoiceItems(new String[]{"旅游", "美食", "汽车", "宠物"}, null, null)
                .setPositiveButton("确定", null)     // 添加确定按钮
                .show();

setMultiChoiceItems() 也同样拥有三个参数，第一个参数建立数组用于显示选项内容，第二个参数是 boolean数组（数组的长度要对应于第一个参数数组的个数），用于判断那个选项需要勾选，如果没有选中则用 null 即可，第三个参数是建立监听，允许对话框被点击。

进度条对话框（ProgressDialog）

在实现耗时操作时，为提高用户更好的交互，我们需要进度条对话框。android提供了圆形进度条和水平进度条两种。通过setProgressStyle() 方法便可设置进度条样式。

        // 声明对话框
        ProgressDialog prodialog;
        // 构建对话框
        prodialog = new ProgressDialog(this) ;
        prodialog.setTitle("进入条对话框");
        prodialog.setIcon(R.mipmap.ic_launcher);
        prodialog.setMessage("正在下载请稍后···");

        // 设置圆形进度条
        prodialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
//        // 设置水平进度条
//        prodialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
        prodialog.show();

setProgressStyle() 设置进度条的样式。

消息对话框（Toast）

用于向用户提供即时消息，显示在应用程序界面的最上层，显示一段时间后自动消失。不会打断用户当前的操作，也不获得焦点，Toast只起提示作用，多用于触发事件的监听中。

        // 创建Toast
        Toast.makeText(this,"hello Word!",Toast.LENGTH_SHORT).show();

通过 makeText() 来实例化一个Toast对象，一共接收三个参数，第一个参数实际当前类的Context（上下文对象），第二个参数为文本显示内容，第三个参数为Toast现实的时间LENGTH_SHORT显示时间较短，LENGTH_LONG显示时间较长。

自定义对话框

根据项目需求自定义对话框的样式。自定义对话框的步骤：

创建布局：

• 自定义对话框的布局文件（layout，***.XML）

创建自定义对话框：

• 创建一个类（***.java）继承自Dialog类，主要用于初始化自定义对话框中的控件以及响应按钮的点击事件。

package top.codebooks.test01;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.TextView;

public class MyDialog extends Dialog {
    private String dialogName;
    private TextView tvMsg;
    private Button btnOK;
    private Button btnCancel;
    public MyDialog(Context context,String dialogName) {
        super(context);
        this.dialogName = dialogName;
    }
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);  // 去除标题
        setContentView(R.layout.my_dialog); // 引入自定义对话框布局
        tvMsg = (TextView)findViewById(R.id.tv_msg);
        btnOK = (Button)findViewById(R.id.btn_ok);
        btnCancel = (Button)findViewById(R.id.btn_cancel);
        tvMsg.setText(dialogName);  // 设置自定义对话框内容
        // 为 ‘确定’按钮设置单击事件
        btnOK.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 单击 ‘确定’ 按钮时的操作
            }
        });
        // 为 ‘取消’按钮设置单击事件
        btnCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();// 关闭当前对话框
            }
        });
    }
}

使用自定义对话框：

• 在MainActive中，子要调用自定义类地构造方法就可以把自定义对话框显示出来。

/**
 * 使用自定义对话框
 */
public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        MyDialog myDialog = new MyDialog(this,"我是自定义的Dialog");
        myDialog.show();
    }
}

样式和主题

Android包含了很多样式和主题资源，样式和主题资源可以用于定义界面上的布局风格。样式怎会的是某个View、如TextView或Button等控件的。而主题是针对整个Activity界面或整个应用程序的。

• 样式：

  包含一种或多种控件地属性集合，可以指定控件得高度、宽度、字体大小以及颜色等，类似于网页中的CSS样式，可以让设计与内容分离。

  创建样式需要在res\values\style目录下style.xm文件，打开后可以看到根标签<resources>,和自定义样式<style>标签

  它包含多个<item> 来声明样式名称和属性。

  例子: TextView 控件样式

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
	<!--自定义样式-->
    <style name="testStyle_one">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#999999</item>
        <item name="android:textSize">35sp</item>
    </style>
    <style name="testStyle_two" parent="@style/testStyle_one">
        <item name="android:textSize">25sp</item>
    </style>
</resources>

使用：在布局layout中创建两个TextView控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
        android:orientation="vertical">
    <TextView
        style="@style/testStyle_one"
            android:text="TextView 样式一"/>
    <TextView
        style="@style/testStyle_two"
            android:text="TextView 样式二"/>

</LinearLayout>

• 主题

主题（theme）是应用到整个Activity 和 application 的样式，而不是只应用到某个视图，当设置好主题后，Activity或整个程序中的视图都将使用视图中的属性。当主题和样式中的属性发生冲突时，样式的优先级要高于主题。

主题与样式的在代码结构上是一样的，不同的是在引用方式上，主题要在AndroidManifest.xml文件中引用。

在style.xml添加如下代码

    <style name="grayTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:background">#999999</item>
    </style>