学习目标

• 了解Android常用布局
• 了解Android常用控件

我们可以把Android界面的开发当作搭积木，一个控件（View）可以当作一个木块，一个布局（Layout）相当于一个盒子，里面可以根据不同规则放置不同的木块。不同的布局和控件又可以进行不同的组合，最终搭成我们想要的界面效果。

Android常用布局

FrameLayout

FrameLayout即帧布局，顾名思义，这个布局内部的控件将会按照顺序一帧一帧的规则叠加起来。如下图布局，页面根视图为FrameLayout，layout_width和layout_height表示其宽和高，match_parent表示与其外层视图（这里可以认为是整个界面）同样大小。在FrameLayout内部放了三个控件TextView，默认都布局到了FrameLayout的左上角，显示的字符串都为“Hello World!”，可以在右边预览中看到，找个控件重叠在一起。

另外，我们可以通过控件的layout_gravity属性，来控制控件相对于FrameLayout的位置。如下图所示，给三个TextView设置不同的layout_gravity, 将他们布局到不同的位置。center表示布局到FrameLayout的中间，top表示布局到FrameLayout的顶部，bottom表示布局到FrameLayout的底部，center_horizontal表示布局到FrameLayout水平方向的中间。

LinearLayout

LinearLayout即线性布局，顾名思义，这个布局内部的控件将会按照线性排列。这个线性排列可以是垂直方向，也可以是水平方向，通过LinearLayout的属性orientation来控制，orientation为horizontal表示水平排列，orientation为vertical为垂直排列。默认orientation为水平排列。

RelativeLayout

RelativeLayout即相对布局，顾名思义，这个布局内部的控件可以相对于在同一个布局内的其他控件或者父布局（RelativeLayout）进行摆放。在RelativeLayout里面的控件会有一些特殊的相对属性。

1、相对于RelativeLayout摆放的属性：

• layout_centerHrizontal 相对于RelativeLayout水平居中
• layout_centerVertical 相对于RelativeLayout垂直居中
• layout_centerInparent 相对于RelativeLayout完全居中
• layout_alignParentBottom 贴紧RelativeLayout的下边缘
• layout_alignParentLeft 贴紧RelativeLayout的左边缘
• layout_alignParentRight 贴紧RelativeLayout的右边缘
• layout_alignParentTop 贴紧RelativeLayout的上边缘
• layout_alignWithParentIfMissing 如果对应的兄弟控件找不到的话，就以RelativeLayout作为参照物

2、相对于其他兄弟控件摆放的属性：

• layout_below 在某控件下方
• layout_above 在某控件上方
• layout_toLeftOf 在某控件的左边
• layout_toRightOf 在某控件的右边
• layout_alignTop 本控件的上边缘和某控件的上边缘对齐
• layout_alignLeft 本控件的左边缘和某控件的左边缘对齐
• layout_alignStart 本控件的起始位置和某控件的起始位置对齐
• layout_alignBottom 本控件的下边缘和某控件的下控件对齐
• layout_alignRight 本控件的右边缘和某控件的有边缘对齐
• layout_alignEnd 本控件的结束位置和某控件的结束位置对齐

示例如下，当相对于其他兄弟控件摆放时，需要指定兄弟控件的id。

如图所示，tv1摆放在布局中间，tv2摆放在顶部，tv3摆放在底部。

ConstraintLayout

ConstraintLayout即约束布局，它是一个高阶控件，功能强大，其内部的控件可以根据一些约束规则进行布局。ConstraintLayout与RelativeLayout有一些类似，但是它更加灵活强大，初学ConstraintLayout只需要掌握它的基本用法即可，后续可以学习它的高级用法（如尺寸百分比，角度定位，辅助工具等）。ConstraintLayout常用的相对属性如下（下面的parent指ConstraintLayout）：

• layout_constraintLeft_toLeftOf 控件左边缘相对于parent或者其他控件的左边缘对齐
• layout_constraintLeft_toRightOf 控件左边缘相对于parent或者其他控件的右边缘对齐
• layout_constraintRight_toLeftOf 控件右边缘相对于parent或者其他控件的左边缘对齐
• layout_constraintRight_toRightOf 控件右边缘相对于parent或者其他控件的右边缘对齐
• layout_constraintTop_toTopOf 控件顶部相对于parent或者其他控件的顶部对齐
• layout_constraintTop_toBottomOf 控件顶部相对于parent或者其他控件的底部对齐
• layout_constraintBottom_toTopOf 控件底部相对于parent或者其他控件的顶部对齐
• layout_constraintBottom_toBottomOf 控件底部相对于parent或者其他控件的底部对齐
• layout_constraintBaseline_toBaselineOf 控件基线相对于parent或者其他控件的基线对齐
• layout_constraintStart_toEndOf 控件起始位置相对于parent或者其他控件的结束位置对齐
• layout_constraintStart_toStartOf 控件起始位置相对于parent或者其他控件的起始位置对齐
• layout_constraintEnd_toStartOf 控件结束位置相对于parent或者其他控件的起始位置对齐
• layout_constraintEnd_toEndOf 控件结束位置相对于parent或者其他控件的结束位置对齐

示例：

如图所示，tv1摆放在布局中间，tv2摆放在顶部，tv3摆放在底部。

Android常用控件

Android提供了大量的控件来完成UI界面的展示，包括Material Design风格的一些高级控件。初学者掌握一些基本控件的使用即可，其他控件在有需要时再去学习使用，依样画葫芦，和基本控件的使用方式没有根本性的差异。

TextView

官方文档：https://developer.android.com/reference/android/widget/TextView 。 TextView用来展示一个文本，通过不同的配置来让文本展示出不同的效果，如跑马灯、富文本、超链接、带图片的文本等。初学只需掌握基本的用法即可，其他效果按需配置。我们可以在布局中配置属性来控制TextView的显示效果：

• textSize表示字体大小，单位是sp，全称是scale-independent pixel（也会缩写为sip），即“独立比例像素”。sp主要用作字体的单位，在不同像素密度的屏幕上能进行同比例的扩大缩小。
• textColor表示字体颜色
• textAllCaps表示全部大写
• fontFamily表示字体类型
• textStyle表示字体样式，有normal, bold, italic, bold|italic
• gravity表示文本在TextView内相对于TextView的对齐方式
• background表示TextView的背景色

布局中的属性配置可以认为是默认的配置，我们也可以通过代码来改变TextView的样式。

在MainActivity.java中，通过findViewById找到布局中的TextView，然后重新设置不同的属性值。

EditText

官方文档：https://developer.android.com/reference/android/widget/EditText 。EditText继承TextView，所以天生就具有TextView的所有属性，可以在布局或者代码中像上述TextView一样配置，当然，EditText有自己的特性，即可编辑的文本。

• inputType指定键盘输入类型，常用的有text(文本)、number(数字)、phone(电话号码)、textPassword(文本密码)、numberPassword(数字秘密)等。
• hint表示默认的提示文本。

当然上述属性也可通过代码设置。

Button

官方文档：https://developer.android.com/reference/android/widget/Button 。Button继承TextView，所以天生就具有TextView的所有属性，可以在布局或者代码中像上述TextView一样配置，但Button会有默认的背景色和点击效果。

在代码中，我们找到Button，给它设置一个点击的监听器，即当用户点击这个按钮时，会触发onClick方法的调用，弹出一个Toast，这个Toast的文本就是Button clicked！当然并不是只有Button可以设置点击监听器，所有控件和布局都可以设置点击监听器。

点击效果：

ImageView

官方文档：https://developer.android.com/reference/android/widget/ImageView 。ImageView可以用来展示一张图片。例如，我们使用src属性指定图片的路径，来展示app模块里面res/mipmap路径下的图片。

当图片的尺寸和ImageView大小不一致时，就涉及到缩放的问题，ImageView提供属性scaleType属性来控制缩放方式。常用的属性值有：

• center，图片不进行缩放，放置ImageView中间
• centerCrop，图片按比例缩放，直到图片的宽高都大于或者等于ImageView的宽高
• centerInside，图片按比例缩放，直到图片的宽高都小于或者等于ImageView的宽高
• fitCenter, 图片按比例缩放, 直到宽等于ImageView的宽或者高等于ImageView的高，默认方式
• fitXY，拉伸宽和高，直到图片填充满整个ImageView

当然我们也可以通过代码来设置图片资源以及缩放类型。

RecyclerView

官方文档：https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView 。RecyclerView是一个高阶控件，也是Android Jetpack中的一部分。RecyclerView可以用来展示横向列表、纵向列表、网格布局、瀑布流等效果，初学者只需掌握常用的纵向列表即可。

1、在布局中放置RecyclerView

2、创建ViewHolder

ViewHolder表示列表中一个条目的视图持有者，它可以持有一个控件或者布局。

在MainActivity.java中编写MyViewHolder代码，继承自RecylerView.ViewHolder。

3、创建适配器Adapter 适配器用来适配列表中的条目视图和条目数据，将条目数据与条目视图绑定。在MainActivity.java中编写MyAdapter，继自RecylerView.Adapter代码。

• onCreateViewHolder表示创建一个条目的视图持有者，这里创建一个自定义的MyViewHolder，让他持有一个TextView
• onBindViewHolder表示绑定一个条目的视图持有者，在这个方法里面可以通过视图持有者获取到视图，即itemView, 然后对itemView进行绑定，给它设置数据或样式。这里就是给TextView设置它的样式以及它显示的文本。另外，position表示这个条目在列表中的位置。
• getItemCount表示返回条目的个数，这里我们返回10，表示创建10个条目。

4、RecylcerView设置适配器和布局管理器

在MainActivity的onCreate方法中设置RecyclerView的适配器以及布局管理器。

5、运行 代码完成后，运行到模拟器，效果如下：