目录
4、Android UI基础知识
目标
-
了解Android UI
-
布局
-
常用UI控件
-
写一个简单UI项目
01、Android UI
1.1 UI
-
用户界面（User Interface，简称 UI，亦称使用者界面）是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。
-
软件设计可分为两个部分：编码设计（程序员）和UI设计（美工）。
1.2 Android UI
-
Android应用界面包含用户可查看并与之交互的所有内容。Android 提供丰富多样的预置 UI 组件，例如结构化布局对象和 UI控件，您可以利用这些组件为您的应用构建图形界面（GUI）。Android 还提供其他界面模块，用于构建特殊界面，例如对话框、通知和菜单。
-
Android UI 都是由布局和控件组成的
02、布局
布局（layout）可定义应用中的界面结构（例如 Activity 的界面结构）。布局中的所有元素均使用 View 和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可以查看并进行交互的内容。然而，ViewGroup 是不可见容器，用于定义 View 和其他 ViewGroup 对象的布局结构。
2.1 布局的结构
-
定义界面布局的视图层次结构图示：
-
View 对象通常称为“微件”，可以是众多子类之一，例如 Button 或 TextView。
-
ViewGroup 对象通常称为“布局”，可以是提供其他布局结构的众多类型之一，例如 LinearLayout 或 ConstraintLayout。
2.2 声明布局
-
在 XML 中声明界面元素，Android 提供对应的 View 类及其子类的简明 XML 词汇，如用于微软和布局的词汇。您也可以使用 Android Studio 的 Layout Editor，并采用释放界面来构建 XML布局。
<?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 android:layout_width="match_parent" android:layout_height="match_parent" android:text="安卓手机" android:textColor="#FF000000" android:textSize="100px" /> </LinearLayout>
-
在运行时实例化布局元素。您的应用可通过变成创建 View 对象和 ViewGroup 对象（并操纵其属性）。
ConstraintLayout constraintLayout = new ConstraintLayout(this); TextView view = new TextView(this); view.setText("这是通过Java代码创建的布局元素！"); constraintLayout.addView(view);-
提示：使用 Layout Inspector 调试布局，可以查看通过代码创建的布局
-
在连接的设备或者模拟器上运行程序（运行你的应用）。
-
依次点击 Tools > Layout Inspector。
-
在显示的界面中选择要查看的进程即可。
-
-
2.3 编写 XML
-
利用 Android 的 XML 词汇，按照 HTML 中创建包含一系列嵌套元素的网页的相同方式快速设计 UI 布局及其包含的屏幕元素
-
每个布局文件都必须只包含一个根元素，并且该元素必须是视图对象或者 ViewGroup 对象
-
定义根元素后，可以子元素的形式添加其他布局对象或控件，从而逐步构建定义布局的视图层次结构
-
在 XML 中声明布局后，以 .xml 扩展名将文件保存在 Android 项目的 res/layout/ 目录中
<?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 android:layout_width="match_parent" android:layout_height="match_parent" android:text="安卓手机" android:textColor="#FF000000" android:textSize="100px" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
2.4 加载 XML 资源
-
当编译应用时，系统会将每个 XML 布局文件编译成 View 资源。在 Activity.outCreate() 回调内，通过调用 setContentView() ，并以 R.layout.layout_file_name 形式向应用代码传递布局资源的应用，加载应用代码中的布局资源。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ConstraintLayout constraintLayout = new ConstraintLayout(this); TextView view = new TextView(this); view.setText("这是通过Java代码创建的布局元素！"); constraintLayout.addView(view); }
2.5 属性
每个 View 对象和 ViewGroup 对象均支持自己的各种 xml 属性。某些属性是 View 对象的特有属性（例如，TextView 支持 textSize 属性），但可扩展此类的任一 View 对象也会继承这些属性。某些属性是 View 对象的共有属性，因为它们继承自 View 根类（例如 id 属性）。此外，其他属性被视为”布局参数“，即描述 View 对象特定布局方向的属性，如由该对象的父 ViewGroup 对象定义的属性。
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="安卓手机"
android:textColor="#FF000000"
android:textSize="100px" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent" />2.6 ID
任何 View 对象均可拥有有与之关联的整型 ID，用于在结构树中对 View 对象进行唯一标识。编译应用后，系统会以整型形式引入此 ID，但在布局 XML 文件中，系统通常会以字符串的形式在 id 属性中指定该 ID。这是所有 View 对象共有的 XML 属性（由 View 类定义），并且您会经常使用该属性。
-
XML 标记的内部 ID 语法是：
android:id="@+id/tv"
-
字符串开头处的 @ 符号指示 XML 解析器应解析并展开 ID 字符串的其余部分，并将其标识为 ID 资源。加号（+）表示这是一个新的资源名称，必须创建该名称并将其添加到我们的资源（ R.java 文件中）内。 Android 框架还提供许多其他 ID 资源。引用 Android 资源 ID 时，不需要加号，但必须添加 android 软件包命名空间
android:id="@android:id/empty"
添加 android 软件包命名空间后，我们现在将从 android.R 资源类而非本地资源类引用 ID
-
R.java 文件
tips：@+id和@id的区别
其实@+id就是在R.java文件里新增一个id名称，如果之前已经存在相同的id名称，那么会覆盖之前的名称。而@id则是直接引用R.java文件的存在的id资源，如果不存在，则会编译报错
-
-
注意：ID 字符串名称，在同一布局中必须是唯一的，不能重名，不同布局可以同名；
-
通过ID值创建我们视图对象的实例
<TextView android:id="@+id/tv" android:layout_width="match_parent" android:layout_height="match_parent" android:text="安卓手机" android:textColor="#FF000000" android:textSize="100px" /> TextView textView = (TextView) findViewBy(R.id.tv)
2.7 布局参数
LayoutParams
-
layout_*** 的布局属性
<TextView android:layout_width="100dp" android:layout_height="200dp" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:text="Hello World!"/> -
布局参数作用是给我们的视图设定在布局中的位置和大小（样式和风格）
-
ViewGroup 类会实现一个扩展 ViewGroup.LayoutParams 的嵌套类，里面包含一些设置视图 view 的尺寸和位置的属性。
-
视图层次结构图，包含每个视图关联的布局参数：
-
-
一般而言，建议不要使用绝对单位（如像素）来指定布局宽度和高度。更好的方法是使用相对测量单位（如与密度无关的像素单位（dp）、wrap_content 或 match_parent），因为其有助于确保您的应用在各类尺寸的设备屏幕上正确显示。
-
wrap_content 指示您的视图将其大小调整为内容所需的尺寸。
-
match_parent 知识您的视图尽可能采用其父类视图所允许的最大尺寸。
-
2.8 布局位置
-
视图可以通过调用 getLeft（）方法和 getTop（）方法来获取视图的坐标位置，也可以通过 getWidth（）和getHeight（）获取视图的尺寸，这些方法的返回值是相对于其父视图的位置。
-
位置和尺寸的单位是像素（px）
-
px 与 dp 区别
-
px 即像素，1px代表屏幕上一个物理的像素点
-
给视图设置 px 单位，不同分辨率下，尺寸不一样
-
-
dp（dip）Density indenpendent pixels，设备无关像素。它与“像素密度”密切相关；
dpi像素密度：每英寸包含的像素数
假如有一部手机，屏幕上的物理尺寸为1.5英寸 x 2英寸，屏幕分辨率为240 × 320，则我们可以计算出在这部手机的屏幕上，每英寸包含的像素数量为 240/1.5 = 160dpi（横向），320/2 = 160dpi（纵向），160dpi就是这部手机的像素密度，像素密度的单位是dpi是Dots Per Inch的缩写，即每英寸像素数量。
密度类型 代表的分辨率（px） 屏幕密度（dpi） 换算（px/dp） 比例 低密度（Idpi） 240 × 320 120 1dp=0.75px 3 中密度（mdpi） 320 × 480 160 1dp=1px 4 高密度（hdpi） 480 × 800 240 1dp=1.5px 6 超高密度（xhdpi） 720 × 1280 320 1dp=2px 8 超超高密度（xxhdpi） 1080 × 1920 450 1dp=3px 12
-
2.9 内边距和外边距
03、常用布局
3.1 线性布局
-
LinearLayout 是一个视图容器，用于使所有子视图在单个方向（垂直或水平）保持对齐。您可以使用 android：orientation 属性指定布局方向。
-
android：orientation=”horizontal“
-
android：orientation=”vertical“
-
android：layout_weight
通过给子视图设置权重值，来分配子视图所占空间的权重（比例），如图三个子视图权重分别设置为1，均分整个页面空间
3.2 相对布局（22）
-
相对布局：子视图可以通过相应的布局属性，设定相对于另一个兄弟视图或父视图容器的相对位置
-
属性说明：
-
相对于兄弟元素
属性名称 属性含义 android：layout_below=“@id/aaa” 在指定View的下方 android：layout_above=“@id/aaa” 在指定View的上方 android：layout_toLeftOf=“@id/aaa” 在指定View的左边 android：layout_toRightOf=“@id/aaa” 在指定View的右边 android：layout_alignTop=“@id/aaa” 与指定的View的上边界一致 android：layout_alignBottom=“@id/aaa” 与指定的View的下边界一致 android：layout_alignLeft=“@id/aaa” 与指定的View的左边界一致 android：layout_alignRight=“@id/aaa” 与指定的View的右边界一致 -
相对于父元素
属性名称 属性含义 android：layout_alignParentLeft="true" 在父元素内左边 android：layout_alignParentRight="true" 在父元素内右边 android：layout_alignParentTop="true" 在父元素内顶部 android：layout_alignParentBottom="true" 在父元素内底部 -
对齐方式
属性名称 属性含义 android：layout_centerInParent=“true” 居中布局 android：layout_centerVertical=“true” 垂直居中布局 android：layout_centerHorizontal=“true” 水平居中布局 -
间隔
属性名称 属性含义 android：layout_marginBottom="" 离某元素底边缘的距离 android：layout_marginLeft="" 离某元素左边缘的距离 android：layout_marginRight="" 离某元素右边缘的距离 android：layout_marginTop="" 离某元素上边缘的距离 android：layout_paddingBottom="" 往内部元素底边缘填充距离 android：layout_paddingLeft="" 往内部元素左边缘填充距离 android：layout_paddingRight="" 往内部元素右边缘填充距离 android：layout_paddingTop="" 往内部元素底上缘填充距离
-
-
父容器定位属性示意图
-
根据兄弟组件定位
3.3 帧布局
-
最简单的一种布局，没有任何定位方式，当我们往里面添加控件的时候，会默认把他们放到这块区域的左上角，帧布局的大小由控件中最大的子控件决定，如果控件的大小一样大的话，那么同一时刻就只能看到最上面的哪个组件，后续添加的控件会覆盖前一个
3.4 网格布局
-
属性说明：
| 名称 | 含义 |
|---|---|
| android：columnCount | 列数 |
| android：rowCount | 行数 |
| android：layout_columnSpan | 横跨的列数 |
| android：layout_rowSpan | 横跨的行数 |
04、常用控件
4.1 TextView
4.2 EditText（输入框）
4.3 Button（按钮）
4.4 ImageView（图像视图）
4.5 RadioButton & Checkbox
4.6 ToggleButton & Switch
4.7 ProgressBar
4.8 SeekBar
4.9 ScrollView
4.10 Date & Time
补充知识：Adapter
4.11 ListView
4.12 GridView
4.13 Spinner列表选项框
4.14 ExpandableListView可折叠列表
4.15 Toast
4.16 AlertDialog对话框
补充知识：Android事件分发机制1
4.17 PopupWindow悬浮框
补充知识：Android事件分发机制2
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
