学习目标

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

Android常用布局FrameLayout

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

android简单界面实现实验(二Android界面开发)(1)

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

android简单界面实现实验(二Android界面开发)(2)

LinearLayout

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

android简单界面实现实验(二Android界面开发)(3)

android简单界面实现实验(二Android界面开发)(4)

RelativeLayout

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

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

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

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

android简单界面实现实验(二Android界面开发)(5)

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

ConstraintLayout

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

示例:

android简单界面实现实验(二Android界面开发)(6)

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

Android常用控件

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

android简单界面实现实验(二Android界面开发)(7)

TextView

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

android简单界面实现实验(二Android界面开发)(8)

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

android简单界面实现实验(二Android界面开发)(9)

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

EditText

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

android简单界面实现实验(二Android界面开发)(10)

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

android简单界面实现实验(二Android界面开发)(11)

Button

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

android简单界面实现实验(二Android界面开发)(12)

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

android简单界面实现实验(二Android界面开发)(13)

点击效果:

android简单界面实现实验(二Android界面开发)(14)

ImageView

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

android简单界面实现实验(二Android界面开发)(15)

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

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

android简单界面实现实验(二Android界面开发)(16)

RecyclerView

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

1、在布局中放置RecyclerView

android简单界面实现实验(二Android界面开发)(17)

2、创建ViewHolder

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

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

android简单界面实现实验(二Android界面开发)(18)

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

android简单界面实现实验(二Android界面开发)(19)

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

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

android简单界面实现实验(二Android界面开发)(20)

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

android简单界面实现实验(二Android界面开发)(21)

,