《第一行Android代码》课件：第三章 UI点点滴滴

1、第三章 软件也要讲脸面- UI点点滴滴 UI Design 广东药科大学 数字媒体技术系 GDPUDM 如何编写界面 常用控件 4种基本布局 自定义控件 ListView-最常用难用的控件 Recycler View 更强大的滚动控件 编写界面的最佳实践 目录 广东药科大学 数字媒体技术系 GDPUDM 可视化方法 XML文档方法 3.1 3.1 该如何编写程序界面该如何编写程序界面 广东药科大学 数字媒体技术系 GDPUDM TextView Button EditText ImageView ProgressBar AlertDialog ProgressDialog 3.2 3.2 常见

2、控件的使用方法常见控件的使用方法 广东药科大学 数字媒体技术系 GDPUDM 主要用于在界面上显示一段文本信息 3.2.1 3.2.1 TextViewTextView 广东药科大学 数字媒体技术系 GDPUDM 宽度和高度的3种属性 使用android:layout_width指定了控件的宽度，使用 android:layout_height指定了控件的高度。 Android中所有的控件都具有这两个属性，可选值有三种 match_parent、fill_parent和wrap_content， 广东药科大学 数字媒体技术系 GDPUDM 使用android:gravity来指定文字的对齐方式

3、，可选值有top、 bottom、left、right、center等，可以用“|”来同时指定多个 值，这里我们指定的center，效果等同于 center_vertical|center_horizontal，表示文字在垂直和水平方 向都居中对齐。 android:gravity 广东药科大学 数字媒体技术系 GDPUDM 通过android:textSize属性可以指定文字的大小，通过 android:textColor属性可以指定文字的颜色。 文字大小，颜色 广东药科大学 数字媒体技术系 GDPUDM 3.2.2 Button3.2.2 Button 广东药科大学 数字媒体技术系 GDP

4、UDM 在MainActivity中为Button的点击事件注册 一个监听器 广东药科大学 数字媒体技术系 GDPUDM 也可以使用实现接口的方式来进行注册 广东药科大学 数字媒体技术系 GDPUDM 3.2.3 3.2.3 EditTextEditText 广东药科大学 数字媒体技术系 GDPUDM 提示性的文字 hint 广东药科大学 数字媒体技术系 GDPUDM 最大行数 广东药科大学 数字媒体技术系 GDPUDM 通过点击按钮来获取EditText中输入的内容 广东药科大学 数字媒体技术系 GDPUDM ImageView是用于在界面上展示图片的一个控件 drawable文件夹下已有一

5、张ic_launcher.png图片 android:src属性给ImageView指定了一张图片 3.2.4 3.2.4 ImageViewImageView 广东药科大学 数字媒体技术系 GDPUDM 另外一张图片，jelly_bean.png，将它复制 到res/drawable-hdpi目录下 广东药科大学 数字媒体技术系 GDPUDM 广东药科大学 数字媒体技术系 GDPUDM ProgressBar用于在界面上显示一个进度条 3.2.5 3.2.5 ProgressBarProgressBar 广东药科大学 数字媒体技术系 GDPUDM Android控件的可见属性。所有的Andr

6、oid控件都具有这个属性， 可以通过android:visibility进行指定， 可选值有三种，visible、invisible和gone 广东药科大学 数字媒体技术系 GDPUDM 默认是圆形进度条，通过style属性可以将它指定成水平进度条 广东药科大学 数字媒体技术系 GDPUDM 指定成水平进度条后，我们还可以通过android:max属性给进度 条设置一个最大值，然后在代码中动态地更改进度条的进度 广东药科大学 数字媒体技术系 GDPUDM AlertDialog可以在当前的界面弹出一个对话框，这个对话框是 置顶于所有界面元素之上的，能够屏蔽掉其他控件的交互能力， 因此一般Ale

7、rtDialog都是用于提示一些非常重要的内容或者警 告信息。 比如为了防止用户误删重要内容，在删除前弹出一个确认对话框。 3.2.6 3.2.6 AlertDialogAlertDialog 广东药科大学 数字媒体技术系 GDPUDM 广东药科大学 数字媒体技术系 GDPUDM 广东药科大学 数字媒体技术系 GDPUDM ProgressDialog和AlertDialog有点类似，都可以在界面上弹出 一个对话框，都能够屏蔽掉其他控件的交互能力。不同的是， ProgressDialog会在对话框中显示一个进度条，一般是用于表示 当前操作比较耗时，让用户耐心地等待。 3.2.7 3.2.7 P

8、rogressDialogProgressDialog 广东药科大学 数字媒体技术系 GDPUDM 广东药科大学 数字媒体技术系 GDPUDM 3.3 3.3 详解四种基本布局详解四种基本布局 广东药科大学 数字媒体技术系 GDPUDM LinearLayout又称作线性布局，是一种非常常用的布局。正如它 名字所描述的一样，这个布局会将它所包含的控件在线性方向上 依次排列。 通过android:orientation属性指定了排列方向是vertical就是垂 直了，如果指定的是horizontal，就是水平了 3.3.1 3.3.1 LinearLayoutLinearLayout 广东药科大

9、学 数字媒体技术系 GDPUDM 广东药科大学 数字媒体技术系 GDPUDM android:layout_gravity是用于指定控件在布局中的对齐方式 广东药科大学 数字媒体技术系 GDPUDM android:layout_weight。这个属性允许我们 使用比例的方式来指定控件的大小 广东药科大学 数字媒体技术系 GDPUDM 系统会先把LinearLayout下所有控件指定的layout_weight值相 加，得到一个总值，然后每个控件所占大小的比例就是用该控件 的layout_weight值除以刚才算出的总值。因此如果想让EditText 占据屏幕宽度的3/5，Button占据屏幕

10、宽度的2/5，只需要将 EditText的layout_weight改成3，Button的layout_weight改成 2就可以了。 广东药科大学 数字媒体技术系 GDPUDM 指定了EditText的android:layout_weight属性，并将Button的 宽度改回wrap_content。这表示Button的宽度仍然按照 wrap_content来计算，而EditText则会占满屏幕所有的剩余空间。 广东药科大学 数字媒体技术系 GDPUDM RelativeLayout又称作相对布局，也是一种非常常用的布局。 3.3.2 3.3.2 RelativeLayoutRelativ

11、eLayout 广东药科大学 数字媒体技术系 GDPUDM 让Button 1和父布局的左上角对齐，Button 2和父布局的右上角 对齐，Button 3居中显示，Button 4和父布局的左下角对齐， Button 5和父布局的右下角对齐。 广东药科大学 数字媒体技术系 GDPUDM android:layout_above属性可以让一个控 件位于另一个控件的上方，需要为这个属性 指定相对控件id的引用，这里我们填入了 id/button3，表示让该控件位于Button 3的上方。其他的属性也都是相似的， android:layout_below表示让一个控件位 于另一个控件的下方， an

12、droid:layout_toLeftOf表示让一个控件 位于另一个控件的左侧， android:layout_toRightOf表示让一个控件 位于另一个控件的右侧。 广东药科大学 数字媒体技术系 GDPUDM 这种布局没有任何的定位方式，所有的控件都会摆放在布局的左 上角 3.3.3 FrameLayout 广东药科大学 数字媒体技术系 GDPUDM TableLayout允许我们使用表格的方式来排列控件，这种布局也 不是很常用 3.3.4 3.3.4 TableLayoutTableLayout 广东药科大学 数字媒体技术系 GDPUDM 拉伸某列stretchColumns 广东药科大

13、学 数字媒体技术系 GDPUDM 按照父布局的宽高进行百分比分隔，以此来确定视图的大小。 3.3.4百分比布局 广东药科大学 数字媒体技术系 GDPUDM 1. 添加依赖。支持的库。app/build.gradle 用法用法 广东药科大学 数字媒体技术系 GDPUDM 2. 将布局替换成百分比布局 用法 广东药科大学 数字媒体技术系 GDPUDM 3. 布局内子View的宽高写法，如黄色的TextView 广东药科大学 数字媒体技术系 GDPUDM 控件 和布局结构 View的继承关系 ViewGroup 我们所用的控件都是 直接或间接继承自 View 的，所用的所有 布局都是直接或间接 继承

14、自 ViewGroup 的 3.4 自定义控件 广东药科大学 数字媒体技术系 GDPUDM 如果在每个 Activity 的布局中都编写一遍同样的标题栏代码，明 显就会导致代码的大量重复。这个时候我们就可以使用引入布局 的方式来解决这个问题。 3.4.1 引入布局 示例：创建一个标题栏控件 广东药科大学 数字媒体技术系 GDPUDM 新建一个布局 title.xml 广东药科大学 数字媒体技术系 GDPUDM 编写完成标题栏的布局后，只需要通过一行 include 语句将标题 栏布局引入进来就可以,实质是父布局包含子布局。 引入布局 activity_main.xml 广东药科大学 数字媒体技

15、术系 GDPUDM 隐藏系统自带标题栏 广东药科大学 数字媒体技术系 GDPUDM 引入布局的技巧确实解决了重复编写布局代码的问题，但是如果 布局中有一些控件要求能够响应事件，我们还是需要在每个 Activity 中为这些控件单独编写一次事件注册的代码 ， 比如标题栏中的返回按钮，其实不管在哪一个 Activity 中，这个 按钮的功能都是相同的，即销毁掉当前 Activity 3.4.2 创建自定义控件创建自定义控件 广东药科大学 数字媒体技术系 GDPUDM 新建 TitleLayout 继承自 LinearLayout，让它成为我们自定义的 标题栏控件。 重写了 LinearLayout

16、 中的带有两个参数的构造函数，在布局中 引入 TitleLayout 控件就会调用这个构造函数。 自定义的标题栏控件 广东药科大学 数字媒体技术系 GDPUDM 然后在构造函数中需要对标题栏布局进行动态加载，这就要借助 LayoutInflater 来实现了。 通过 LayoutInflater 的 from() 方法可以构建出一个 LayoutInflater 对象， 然后调用 inflate() 方法就可以动态加载一个布局文件，inflate() 方法接收两个参数， 第一个参数是要加载的布局文件的 id，这里我们传入 R.layout.title， 第二个参数是给加载好的布局再添加一个父布

17、局，这里我们想要指定为 TitleLayout，于是直接传入 this。 广东药科大学 数字媒体技术系 GDPUDM 项目名称是com.example.uicustomviews 布局文件activity_main.xml中添加这个自定义控 件com.example.uicustomviews.TitleLayoutcom.example.uicustomviews.TitleLayout 广东药科大学 数字媒体技术系 GDPUDM 标题栏中的按钮注册点击事件 修改 TitleLayout 中的代码 广东药科大学 数字媒体技术系 GDPUDM ListView是Android中最常用的控件之一

18、 由于手机屏幕空间都有限，能够一次性在屏幕上显示的内容并不 多，当我们的程序中有大量的数据需要展示的时候，就可以借助 ListView来实现。ListView允许用户通过手指上下滑动的方式将 屏幕外的数据滚动到屏幕外，同时屏幕上原有的数据则会滚动出 屏幕。相信你其实每天都在使用这个控件，比如查看QQ聊天记 录，翻阅微博最新消息，等等。 3.5 最常用和最难用的控件-ListView 广东药科大学 数字媒体技术系 GDPUDM 新建ListViewTest项目， 修改activity_main.xml，定义一个ListView 广东药科大学 数字媒体技术系 GDPUDM 建立数据 帮定数据，使用

19、适配器 Adapter 填充什么数据呢？ 修改MainActivity中的代码 广东药科大学 数字媒体技术系 GDPUDM 其中MainActivity中的代码其实非常简单，一 句话说就是 为ListView设置适配器Adapter 适配器需要三个参数 1、上下文 2、ListView布局 3、数据 例子用上下文就是MainActivity.this, 布局文 件是系统自带的 android.R.layout.simple_lsit_item_1, 数据 就是String数组 解释 广东药科大学 数字媒体技术系 GDPUDM 水果图片+水果名称的ListView 1.建立水果类，增加图片内容f

20、ruit 2.增加水果图片+名称的项目布局 fruit_item.xml 3.改变适配器Adapter，支持自定义水果类 数据FruitAdapter 4. 装载，使用自定义布局填充ListView 3.5.2 定制ListView界面 广东药科大学 数字媒体技术系 GDPUDM Fruit类 定义ListView的布局方式，新建 fruit_item.xml 广东药科大学 数字媒体技术系 GDPUDM 重写了getView方 法，这个方法在每 个子项被滚动到屏 幕内的时候会被调 用。在getView中， 首相通过getItem （）方法得到当前 得到Fruit实例。然 后使用 LayoutI

21、nflater来 为这个子项加载我 们传入的布局。 新建FruitAdapter类 广东药科大学 数字媒体技术系 GDPUDM MainActivity中的代码 广东药科大学 数字媒体技术系 GDPUDM initFruits方法，初始化水果名和图片 广东药科大学 数字媒体技术系 GDPUDM 单击Item出一个Toast提示 添加事件处理方法 广东药科大学 数字媒体技术系 GDPUDM 目前我们的ListView的运行效率很低，因为在FruitAdapter的 getView()方法中每次都将布局重新加载了一遍，当ListView快 速滚动的时候就会成为性能的瓶颈。 getView()方法还

22、有一个convertView参数，这个参数用于将之 前加载好的布局进行缓存，以便之后可以进行重用。 3.5.4 提升ListView执行效率 广东药科大学 数字媒体技术系 GDPUDM ConvertView 缓存View 广东药科大学 数字媒体技术系 GDPUDM 虽然我们现在已经不会再重复去加载布局，但是每次在getView() 方法中还是会调用View的findViewById()方法去获取一次控件的 实例。我们借助一个ViewHolder来对这部分性能进行优化， 继续优化 广东药科大学 数字媒体技术系 GDPUDM 广东药科大学 数字媒体技术系 GDPUDM App的这3种排列分别怎么

23、做到的？ 3.6 更强大的滚动控件-RecyclerView 广东药科大学 数字媒体技术系 GDPUDM RecyclerView与ListView原理是类似的：都是仅仅维护少量的 View并且可以展示大量的数据集。RecyclerView用以下两种方 式简化了数据的展示和处理: 使用LayoutManager来确定每一个item的排列方式。 为增加和删除项目提供默认的动画效果。 介绍介绍 广东药科大学 数字媒体技术系 GDPUDM Adapter：使用RecyclerView之前，你需要一个继承自 RecyclerView.Adapter的适配器，作用是将数据与每一个item的 界面进行绑定

24、。 LayoutManager：用来确定每一个item如何进行排列摆放，何 时展示和隐藏。回收或重用一个View的时候，LayoutManager 会向适配器请求新的数据来替换旧的数据，这种机制避免了创建 过多的View和频繁的调用findViewById方法（与ListView原理 类似）。 广东药科大学 数字媒体技术系 GDPUDM LinearLayoutManager GridLayoutManager StaggeredGridLayoutManage 三种自带的LayoutManager: 广东药科大学 数字媒体技术系 GDPUDM 1. 添加依赖包 2. 布局中添加Recycle

25、rView控件 3. 适配器和数据 4. 事件监听处理 使用步骤 广东药科大学 数字媒体技术系 GDPUDM RecyclerView属于新增的控件，为了让RecyclerView能够在所 有的Android版本上使用，Android官方团队将RecyclerView定 义在了support库当中，所以我们要想使用这个控件，就必须先 在项目的build.gradle中添加响应的依赖库才可以。 1）依赖支持 广东药科大学 数字媒体技术系 GDPUDM 2）布局中添加RecyclerView控件 广东药科大学 数字媒体技术系 GDPUDM 接下来我们需要为 RecyclerView 准备一个适配器

26、，新建 FruitAdapter 类，让这个适配器继承自 RecyclerView.Adapter， 并将泛型指定为 FruitAdpter.ViewHolder，其中，ViewHolder 是我们在 FruitAdapter 中定义的一个内部类， 3）. 适配器和数据 广东药科大学 数字媒体技术系 GDPUDM 使用 RecyclerView 广东药科大学 数字媒体技术系 GDPUDM initFruits() 方法初始化了水果的数据，接着 在 initRecyclerView() 中获取到 RecyclerView 的实例，然后创建一个LinearLayoutManager 对象，并将它设置到 RecelerView 当中， LayoutManager 用于指定 RecyclerView 的布 局方式，这里使用的LinearLayoutManager 是 线性布局的意思， 接下来我们创建了 FruitAdapter 的实例，并 将水果数据传入到了 FruitAadpter 的构造函 数中，最后调用了 RecyclerView 的 setAdater() 方法来完成适配器的设置，这样 RecyclerView 和数据之间的关联就完成