用户界面设计课件.pptx

1、第 2 章 用户界面设计012.1 视图组件与容器组件0203042.2 控制 UI 界面2.3 基本 UI 组件2.4 高级 UI 组件052.5 Handler 消息传递机制062.6 项目实战：“移动商城”(一)07082.7 相关阅读：ButterKnife 的使用 2.8 本章小结本章导读本章主要对本章主要对 Android 前台手机界面布局方法以前台手机界面布局方法以及常用组件进行阐述。主要知识点有：及常用组件进行阐述。主要知识点有：（1）视图组件和容器组件；）视图组件和容器组件；（2）控制）控制UI界面的三种方式；界面的三种方式；本章导读（3）基本）基本 UI 组件（包括组件（包

2、括 TextView、EditText、Button、ImageView、ProgressBar、ScrollView、Toast、布局管理器、布局管理器等）；等）；（4）高级）高级 UI 组件（包括列表类组件、对话框、菜单、标签组件（包括列表类组件、对话框、菜单、标签栏等）；栏等）；（5）Handler 消息传递机制。消息传递机制。012.1 视图组件与容器组件Android 的的 UI 界面都是由界面都是由 View 和和 ViewGroup 及其派生类及其派生类组合而成的。其中，组合而成的。其中，View 是所有是所有UI组件的基类，而组件的基类，而 ViewGroup 是容纳是容纳 V

3、iew 及其派生类的容器，及其派生类的容器，ViewGroup 也也是从是从 View 派生出来的。派生出来的。一般来说，开发一般来说，开发 UI 界面都不会直接使用界面都不会直接使用 View 和和ViewGroup 自定义控件的时候使用），而是使用其派生类自定义控件的时候使用），而是使用其派生类。012.1 视图组件与容器组件Android 中的视图可分为中的视图可分为 3 种：布局类（种：布局类（Layout）、视图容）、视图容器类（器类（View Container）和视图类（例如，）和视图类（例如，TextView 就是一就是一个直接继承个直接继承 View 类的视图类）。类的视图类

4、）。android.view.ViewGroup 是一个容器类，该类也是是一个容器类，该类也是 View 的的子类，所有的布局类和视图容器类都是子类，所有的布局类和视图容器类都是 ViewGroup 的子类，的子类，而视图类直接继承自而视图类直接继承自 View 类。类。012.1 视图组件与容器组件Android 中的中的视图组件与容视图组件与容器组件器组件012.1 视图组件与容器组件UI布局的层布局的层次结构次结构022.2 控制 UI 界面I.使用使用 XML 布局文件控制布局文件控制 UI 界面界面II.在在 Java 代码中控制代码中控制 UI 界面界面III.使用使用 XML 布

5、局文件和代码混合控制布局文件和代码混合控制 UI 界面界面032.3 基本 UI 组件2.3.1 TextView 和 EditTextTextView 及及其子类其子类032.3 基本 UI 组件2.3.2 Button、ImageButton、ImageView、RadioButton 和 CheckBoxpublic class Button extends TextViewpublic class ImageButton extends ImageViewpublic class ImageView extends Viewpublic class RadioButton extend

6、s CompoundButtonpublic class RadioGroup extends LinearLayoutpublic class CheckBox extends CompoundButton032.3 基本 UI 组件2.3.3 ProgressBar、ScrollView、Toast（消息提示）ProgressBar 是是 UI 控件中用于显示某个时刻操作完成的进控件中用于显示某个时刻操作完成的进度控件。该控件应随时间、操作完成度而实时的变化，从度控件。该控件应随时间、操作完成度而实时的变化，从而达到提醒用户任务进度的目的。而达到提醒用户任务进度的目的。ProgressBa

7、r 类声明如下：类声明如下：public class ProgressBar extends View032.3 基本 UI 组件2.3.3 ProgressBar、ScrollView、Toast（消息提示）ScrollView 是为普通控件添加滚动条的控件。该控件每次是为普通控件添加滚动条的控件。该控件每次只能作用于一个普通控件以控制其滚动。只能作用于一个普通控件以控制其滚动。ScrollView 类声明如下：类声明如下：public class ScrollView extends FrameLayout032.3 基本 UI 组件2.3.3 ProgressBar、ScrollView

8、、Toast（消息提示）Toast 类声明如下：类声明如下：public class Toast extends ObjectToast可以通过可以通过 makeText()方法创建方法创建Toast对象并设置相关对象并设置相关属性，并调用属性，并调用 show()方法显示提示。例如以下：方法显示提示。例如以下：Toast.makeText(MainActivity.this,提示的内容提示的内容,Toast.LENGTH_LONG).show();032.3 基本 UI 组件2.3.4 日期时间类组件1AnalogClock（模拟时钟）（模拟时钟）AnalogClock 类声明如下：类声明如

9、下：public class AnalogClock extends View032.3 基本 UI 组件2.3.4 日期时间类组件2DatePicker（日期选择器）（日期选择器）DatePicker 类声明如下：类声明如下：public class DatePicker extends FrameLayout032.3 基本 UI 组件2.3.4 日期时间类组件3TimePicker（时间选择器）（时间选择器）TimePicker 类声明如下：类声明如下：public class TimePicker extends FrameLayout032.3 基本 UI 组件2.3.5 布局管理器

10、Android 布局管理器本身就是一个布局管理器本身就是一个 UI 控件，所有的布局控件，所有的布局管理器都是管理器都是 ViewGroup 的子类。的子类。布局管理器可以包含布局管理器可以包含 UI 组件，也可以包含其他布局管组件，也可以包含其他布局管理器，因此，可以将其看成是一个理器，因此，可以将其看成是一个 ViewGroup 对象。对象。通过多层布局的嵌套，我们能够完成一些比较复杂的界通过多层布局的嵌套，我们能够完成一些比较复杂的界面实现。面实现。032.3 基本 UI 组件2.3.5 布局管理器LayoutParams 表示布局参数，子表示布局参数，子 View 通过通过Layout

11、Params 告诉父容器（告诉父容器（ViewGroup）应该如何放置）应该如何放置自己。自己。LayoutParams 与与 ViewGroup 是息息相关的。是息息相关的。LayoutParams 携带了子控件针对父控件的信息，告诉父携带了子控件针对父控件的信息，告诉父控件如何放置自己。控件如何放置自己。032.3 基本 UI 组件2.3.5 布局管理器LayoutParams 类也只是简单描述了宽高，宽和高都可以类也只是简单描述了宽高，宽和高都可以设置成三种值：设置成三种值：（1）一个确定的值；）一个确定的值；（2）MATCH_PARENT，即填满（和父容器一样大小）；，即填满（和父容器

12、一样大小）；（3）WRAP_CONTENT，即包裹住组件就好。，即包裹住组件就好。032.3 基本 UI 组件2.3.5 布局管理器1线性布局线性布局LinearLayout 类声明如下：类声明如下：public class LinearLayout extends ViewGroup线性布局线性布局 LinearLayout 是是 Android 系统中最基础的一种系统中最基础的一种布局。采用自上而下或者从左往右的方式一个元素接着布局。采用自上而下或者从左往右的方式一个元素接着一个元素排列，当排列的元素超出屏幕范围，超出的部一个元素排列，当排列的元素超出屏幕范围，超出的部分将做隐藏处理。分将

13、做隐藏处理。03线性布局线性布局03032.3 基本 UI 组件2.3.5 布局管理器2相对布局相对布局RelativeLayout 类声明如下：类声明如下：public class RelativeLayout extends ViewGroup相对布局相对布局 RelativeLayout 是位置相对于兄弟组件或者布是位置相对于兄弟组件或者布局容器来布局的一种布局管理器。局容器来布局的一种布局管理器。03相对布局相对布局03相对布局相对布局032.3 基本 UI 组件2.3.5 布局管理器3帧布局帧布局FrameLayout 类声明如下：类声明如下：public class FrameLa

14、yout extends ViewGroup帧布局帧布局 FrameLayout 是最简单的布局方式，帧布局向屏是最简单的布局方式，帧布局向屏幕绘制了一个空白的矩形区域，所有添加到这个布局中幕绘制了一个空白的矩形区域，所有添加到这个布局中的视图都是以层叠的方式显示。第一个添加到框架布局的视图都是以层叠的方式显示。第一个添加到框架布局中的视图显示在最底层，最后一个被放在最顶层。中的视图显示在最底层，最后一个被放在最顶层。032.3 基本 UI 组件2.3.5 布局管理器4表格布局表格布局TableLayout 类声明如下：类声明如下：public class TableLayout extend

15、s LinearLayout表格布局表格布局 TableLayout，它继承了，它继承了 LinearLayout，通过，通过 TableRow 来表示表格中行的概念，一个来表示表格中行的概念，一个 TableRow 即表即表示一行。示一行。032.3 基本 UI 组件2.3.5 布局管理器5网格布局网格布局GridLayout 类声明如下：类声明如下：public class GridLayout extends ViewGroup网格布局网格布局 GridLayout 是是 Android 4.0 以后新增的一种布以后新增的一种布局管理器，该布局将屏幕中某个矩形区域划分成排列整局管理器，该

16、布局将屏幕中某个矩形区域划分成排列整齐的若干个单元格。对于一个网格布局来说，需要明确齐的若干个单元格。对于一个网格布局来说，需要明确划分成几行几列。划分成几行几列。032.3 基本 UI 组件2.3.5 布局管理器6约束布局约束布局ConstraintLayout 类声明如下：类声明如下：public class ConstraintLayout extends ViewGroup约束布局约束布局 ConstraintLayout 是一个是一个 ViewGroup，可以在，可以在 API 9 以上的以上的Android系统使用它，它的出现主要是为了系统使用它，它的出现主要是为了解决布局嵌套过多

17、的问题。解决布局嵌套过多的问题。042.4 高级 UI 组件2.4.1 列表类组件1AdapterAndroid 里的里的 Adapter 是是 View 视图与视图与 data 数据之间的数据之间的桥梁，桥梁，Adapter 提供对数据的访问，也负责为每一项数提供对数据的访问，也负责为每一项数据产生一个对应的视图。据产生一个对应的视图。Adapter 接口声明如下：接口声明如下：public interface Adapter04Adapter 接口接口及其实现类的及其实现类的继承关系继承关系042.4 高级 UI 组件2.4.1 列表类组件2AdapterViewAdapterView 类

18、声明如下：类声明如下：public abstract class AdapterView extends ViewGroupAdapterView 的本质是容器，其内容由的本质是容器，其内容由 Adapter 来提供，来提供，通过通过 setAdapter(Adapter)的方法来设置。的方法来设置。04AdapterView 及其子类的继承关系及其子类的继承关系042.4 高级 UI 组件2.4.1 列表类组件3Spinner（下拉框）（下拉框）Spinner 类声明如下：类声明如下：public class Spinner extends AbsSpinner implements Dia

19、logInterface.OnClickListenerSpinner 是一个下拉列表框，需要给它指定对应的数据源。是一个下拉列表框，需要给它指定对应的数据源。Spinner 数据源的设定支持两种方式：通过指定数据源的设定支持两种方式：通过指定android:entries 属性或者属性或者 Adapter 方式设定数据源。方式设定数据源。042.4 高级 UI 组件2.4.1 列表类组件4ListViewListView 类声明如下：类声明如下：public class ListView extends AbsListViewListView 是手机中使用非常频繁的一类控件，它以垂直是手机中

20、使用非常频繁的一类控件，它以垂直的方式显示列表项，显示信息更加清晰明了。的方式显示列表项，显示信息更加清晰明了。042.4 高级 UI 组件2.4.1 列表类组件5RecyclerView从从Android 5.0开始，谷歌公司推出了一个用于大量数据展开始，谷歌公司推出了一个用于大量数据展示的、更加强大和灵活的新控件示的、更加强大和灵活的新控件 RecylerView，可以用来，可以用来代替传统的代替传统的 ListView。RecylerView 起到增强型列表的作起到增强型列表的作用。用。042.4 高级 UI 组件2.4.1 列表类组件欲使用欲使用 RecylerView 控件，需要在控

21、件，需要在 build.gradle 文件的文件的 dependencies 闭包（节点）中加入以下代码，以导入闭包（节点）中加入以下代码，以导入 recylerView 库。库。dependencies implementation androidx.recyclerview:recyclerview:1.0.0 /implementation com.android.support:recyclerview-v7:28.0.0 04导入导入 recylerView 库库04运行运行RecyclerViewDemo042.4 高级 UI 组件2.4.2 对话框1DialogDialog 就是

22、在屏幕上弹出一个让用户做出选择或就是在屏幕上弹出一个让用户做出选择或者输入额外信息的对话框，一个对话框并不会占者输入额外信息的对话框，一个对话框并不会占满整个屏幕，通常用于模态事件（满整个屏幕，通常用于模态事件（modal events），），需要用户做出一个决定后才会继续执行。需要用户做出一个决定后才会继续执行。042.4 高级 UI 组件2.4.2 对话框2AlertDialogAlertDialog 是是一款功能强大的对话框控件，可以一款功能强大的对话框控件，可以显示标题、图标显示标题、图标、内容和按钮、内容和按钮（至多（至多3个个）。）。042.4 高级 UI 组件2.4.2 对话框A

23、lertDialog布局布局042.4 高级 UI 组件2.4.2 对话框AlertDialog 对话框对话框界面布局界面布局如上图所如上图所示。示。区域区域 1（标题（标题区区+图标图标区）：定义弹出框的头部信息，区）：定义弹出框的头部信息，包括标题和一个图标。包括标题和一个图标。区域区域 2（内容区）：（内容区）：AlertDialog 对话框的对话框的 Content（内（内容）部分，在这里可以设置一些提示信息，或者是定义一容）部分，在这里可以设置一些提示信息，或者是定义一组选择框，或者是自己定制的布局等。组选择框，或者是自己定制的布局等。区域区域 3（按钮区）：定义（按钮区）：定义Ac

24、tion Buttons（操作按钮）（操作按钮）。042.4 高级 UI 组件2.4.2 对话框1.创建创建 AlertDialog.Builder 对象对象，该对象，该对象是是 AlertDialog 的的创建器。创建器。2.调用调用 AlertDialog.Builder 的的方法为对话框设置图标、标方法为对话框设置图标、标题、内容等。题、内容等。3.调用调用 AlertDialog.Builder 的的 create()方法创建方法创建 AlertDialog 对话框对话框。4.调用调用 AlertDialog 的的 show()方法方法显示对话框显示对话框。使用使用 AlertDial

25、og 创建创建对话框的主要对话框的主要步骤步骤042.4 高级 UI 组件2.4.3 菜单Android 中中的菜单（的菜单（Menu）主要有如下几种）主要有如下几种：1.OptionMenu（选项菜单（选项菜单）2.ContextMenu（上下文菜单（上下文菜单）3.SubMenu（子菜单（子菜单）4.PopupMenu（弹出菜单（弹出菜单）042.4 高级 UI 组件2.4.3 菜单在在选项菜单中，应当包括与选项菜单中，应当包括与当前当前 Activity 上下文上下文相关的操相关的操作和其他选项，如作和其他选项，如“搜索搜索”、“设置设置”等。等。选项菜单在屏幕上的显示位置取决于您开发的

26、应用所适用选项菜单在屏幕上的显示位置取决于您开发的应用所适用的的 Android 版本版本。选项选项菜单菜单042.4 高级 UI 组件2.4.3 菜单 在在Android 2.3.x 或者或者更低版本，因为该阶段大部分机型更低版本，因为该阶段大部分机型都是都是带有带有 Menu 键键的，此阶段通过的，此阶段通过点击点击 Menu 键键弹出菜单弹出菜单。在在 Android 3.0 或者或者更高的版本，则是更高的版本，则是通过通过 3.0 引入的引入的 ActionBar 中的中的 setting 菜单。菜单。而而在在5.0 以上以上的版本，则是的版本，则是在在 ToolBar 中中的，点击手

27、机的，点击手机屏幕右上角屏幕右上角（垂直方向三个点）弹出一个溢出式的菜单样（垂直方向三个点）弹出一个溢出式的菜单样式式。选项选项菜单菜单042.4 高级 UI 组件2.4.3 菜单使用使用 OptionMenu（选项菜单）需要重写（选项菜单）需要重写（Override）以）以下两个方法：下两个方法：public boolean onCreateOptionsMenu(Menu menu)：调用调用 OptionMenu，在这里完成菜单初始化。，在这里完成菜单初始化。public boolean onOptionsItemSelected(MenuItem item)：菜单项被选中时触发，这里完

28、成事件处理菜单项被选中时触发，这里完成事件处理。选项选项菜单菜单042.4 高级 UI 组件2.4.3 菜单上下文上下文菜单，通过长按某个视图（菜单，通过长按某个视图（View）组件后出现的菜）组件后出现的菜单，该组件需注册上下文菜单。我们经常单，该组件需注册上下文菜单。我们经常在在 Windows 中中用用鼠标右键单击弹出的菜单就是上下文菜单鼠标右键单击弹出的菜单就是上下文菜单。ContextMenu（上下文菜单）（上下文菜单）042.4 高级 UI 组件2.4.3 菜单使用使用 ContextMenu（上下文菜单）的步骤如下（上下文菜单）的步骤如下：重写重写 onCreateContext

29、Menu()方法。方法。为为 View 组件组件注册上下文菜单，注册上下文菜单，使用使用 registerForContextMenu()方法方法，参数，参数是是 View。重写重写 onContextItemSelected()方法方法为菜单项指定事为菜单项指定事件监听器件监听器。ContextMenu（上下文菜单）（上下文菜单）042.4 高级 UI 组件2.4.3 菜单ContextMenu 与与 OptionMenu 的的主要区别在于主要区别在于：OptionMenu 对应对应的的是是 activity，一，一个个 activity 只能只能拥有一个拥有一个选项菜单选项菜单；Conte

30、xtMenu 对应对应的的是是 view，每个每个 view 都都可以可以设置上下文菜单；设置上下文菜单；一般一般情况下，情况下，ContextMenu 常用于常用于 ListView 或者或者 GridView。ContextMenu（上下文菜单）（上下文菜单）042.4 高级 UI 组件2.4.3 菜单SubMenu 代表代表子菜单，可包含子菜单，可包含1N个个 MenuItem。子子菜单不支持嵌套，所谓子菜单只是菜单不支持嵌套，所谓子菜单只是在在 标签标签中又嵌中又嵌套了一套了一层层 而已而已。SubMenu（子菜单）（子菜单）042.4 高级 UI 组件2.4.3 菜单PopupMen

31、u 是锚定到是锚定到 View 的模态菜单。如果空间足够，的模态菜单。如果空间足够，它将显示在定位视图下方，否则显示在其它将显示在定位视图下方，否则显示在其上方。上方。PopupMenu（弹出菜单）（弹出菜单）042.4 高级 UI 组件2.4.4 标签栏由于由于手机屏幕尺寸的限制，合理手机屏幕尺寸的限制，合理使用使用 Tab 可以可以极极大地利用大地利用屏幕资源，给用户带来良好的体验。屏幕资源，给用户带来良好的体验。学会学会 Tab 的的使用方法使用方法已经成为已经成为学习学习 Android 开发开发必不可少的技能了。我们经常必不可少的技能了。我们经常使用的微信、使用的微信、QQ 就是使用

32、就是使用 Tab 的的方式进行主界面的布局方式进行主界面的布局的。的。Tab 选项选项卡（标签栏）几乎成卡（标签栏）几乎成为了为了 App 必备必备的一个功能的一个功能042.4 高级 UI 组件2.4.4 标签栏1传统传统的的 ViewPager 实现实现2FragmentManager+Fragment 实现实现3使用使用 ViewPager +Fragment 方式实现方式实现 Tab4TabLayout+ViewPager 方式方式5TabActivity+TabHost+Activity 实现实现方式方式6ActivityGroup+Activity 实现方式实现方式052.5 Ha

33、ndler 消息传递机制在在 Android 的的设计机制里，为了避免多个线程设计机制里，为了避免多个线程同时操作同时操作 UI 造成造成线程安全，线程安全，出于安全考虑，只允许主线程（程序出于安全考虑，只允许主线程（程序第一次启动时所启动的线程，也称为第一次启动时所启动的线程，也称为UI线程）线程）对对 UI 进行进行修改等操作修改等操作，这时问题就出现了，如果只允许主线程，这时问题就出现了，如果只允许主线程修改修改 UI，那么如果新线程的操作需要修改原来，那么如果新线程的操作需要修改原来的的 UI 该该如何进如何进行的？这时候引入行的？这时候引入了了 Handler，借助借助 Handle

34、r 消息消息传递机传递机制在新线程和主线程（制在新线程和主线程（UI 线程线程）之间传递消息来实现）之间传递消息来实现。05 Handler消息传递机制分析图消息传递机制分析图052.5 Handler 消息传递机制（1）目标线程）目标线程调用调用 Looper.prepare()创建创建 Looper 对象对象和和消息队列。消息队列。（2）目标线程）目标线程通过通过 new Handler()创建创建 Handler 对象对象，将将Handler、Looper、消息队列三者关联起来。并覆盖、消息队列三者关联起来。并覆盖其其 handleMessage 函数函数。（3）目标线程）目标线程调用调

35、用 Looper.loop()监听监听消息队列。消息队列。（4）消息源线程）消息源线程调用调用 Handler.sendMessage 发送发送消息。消息。052.5 Handler 消息传递机制（5）消息源线程）消息源线程调用调用 MessageQueue.enqueueMessage 将将待发消息插入消息队列。待发消息插入消息队列。（6）目标线程）目标线程的的 loop()检测检测到消息队列有消息插入，将到消息队列有消息插入，将其取出。其取出。（7）目标线程将取出消息）目标线程将取出消息通过通过 Handler.dispatchMessage 派发给派发给 Handler.handleMe

36、ssage 进行进行消息处理。消息处理。052.5 Handler 消息传递机制示例示例062.6 项目实战：“移动商城”(一)“移动商城移动商城”是是一款一款针对针对 XX 网络网络运行商运行商开发的电子商务平台手机应用程序，通开发的电子商务平台手机应用程序，通过过该该 APP，用户可以购买手机、流量以，用户可以购买手机、流量以及定制宽带。及定制宽带。项目介绍项目介绍062.6 项目实战：“移动商城”(一)本本例主要完成例主要完成“移动商城移动商城”（一）（一）用户界面的搭建用户界面的搭建，主要包，主要包括括主界面和宽带列表界面主界面和宽带列表界面等等。主主界面包含界面包含3个部分个部分：标

37、题栏区、图片展示区以及主体内容区。：标题栏区、图片展示区以及主体内容区。标题栏区标题栏区有三部分：返回原先调用（上层模块）界面的有三部分：返回原先调用（上层模块）界面的“Home”按钮按钮（这里是退出）、查看历史信息（这里是退出）、查看历史信息的的“历史历史”按钮按钮以及具有向上翻屏效果的文字信息栏。以及具有向上翻屏效果的文字信息栏。图片展示区图片展示区采用画廊方式水平自动切换多张广告。采用画廊方式水平自动切换多张广告。内容显示区域内容显示区域主要为文本按钮，点击每个按钮，可进入相应主要为文本按钮，点击每个按钮，可进入相应的服务界面。的服务界面。任务任务说明说明062.6 项目实战：“移动商城

38、”(一)MobileMall 目录目录结构结构宽带列表界面宽带列表界面主界面主界面本章小结本章本章首先简要地概述了视图组件与容器组件、首先简要地概述了视图组件与容器组件、Android如何如何控制控制 UI 界面界面，并通过示例简单介绍，并通过示例简单介绍了了 UI 界面界面的三种搭建方式。详细介绍的三种搭建方式。详细介绍了了 Android 常用常用的的基本基本 UI 组件组件（包括包括 TextView、EditText、Button、ImageView、ProgressBar、ScrollView、Toast 以及以及实现实现控件合理排放的布局管理器等）和控件合理排放的布局管理器等）和高级高级 UI 组件组件（包括列表类组件、（包括列表类组件、对话框、菜单、标签栏等）。对话框、菜单、标签栏等）。针对针对 Android 只只允许主线程操作用户允许主线程操作用户界面的特点，阐述了界面的特点，阐述了Handler消息传递机制消息传递机制。