Android_UI
Android UI
Android UI
UI
- 用户界面(User Interface,简称 UI,亦称使用者界面)是系统和用户之间进行交互和信息交换 的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。
- 软件设计可分为两个部分:编码设计与UI设计。
Android UI
- Android应用界面包含用户可查看并与之交互的所有内容。Android 提供丰富多样的预置 UI 组 件,例如结构化布局对象和 UI 控件,您可以利用这些组件为您的应用构建图形界面。Android 还 提供其他界面模块,用于构建特殊界面,例如对话框、通知和菜单。
- Android UI 都是由布局和控件组成的
布局
布局(layout)可定义应用中的界面结构(例如 Activity 的界面结构)。布局中的所有元素均使用 View 和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而, ViewGroup 是不可见容器,用于定义 View 和其他 ViewGroup 对象的布局结构。
布局的结构
- 定义界面布局的视图层次结构图示:
- View 对象通常称为“微件”,可以是众多子类之一,例如 Button 或 TextView 。
- ViewGroup 对象通常称为“布局”,可以是提供其他布局结构的众多类型之一,例如
- LinearLayout 或 ConstraintLayout
声明布局
在 XML 中声明界面元素,Android 提供对应 View 类及其子类的简明 XML 词汇,如用于微件和布 局的词汇。 您也可使用 Android Studio 的 Layout Editor,并采用拖放界面来构建 XML 布局。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>在运行时实例化布局元素。您的应用可通过编程创建 View 对象和 ViewGroup 对象(并操纵其属 性)。
1
2
3
4ConstraintLayout constraintLayout = new ConstraintLayout(this);
TextView view = new TextView(this);
view.setText("Hello World!");
constraintLayout.addView(view);- 提示 : 使用 Layout Inspector 调试布局,可以查看通过代码创建的布局
- 在连接的设备或模拟器上[运行您的应用]。
- 依次点击 Tools > Layout Inspector。
- 在显示的 Choose Process 对话框中,选择要检查的应用进程,然后点击 OK。
- 提示 : 使用 Layout Inspector 调试布局,可以查看通过代码创建的布局
编写XML
- 利用 Android 的 XML 词汇,按照在 HTML 中创建包含一系列嵌套元素的网页的相同方式快速设计 UI 布局及其包含的屏幕元素
- 每个布局文件都必须只包含一个根元素,并且该元素必须是视图对象或 ViewGroup 对象
- 定义根元素后,可以子元素的形式添加其他布局对象或控件,从而逐步构建定义布局的视图层次结 构
- 在 XML 中声明布局后,以
.xml
扩展名将文件保存在Android 项目的res/layout/
目录中
1 |
|
加载 XML 资源
当编译应用时,系统会将每个 XML 布局文件编译成 View 资源。在
Activity.onCreate()
回调 内,通过调用setContentView()
,并以R.layout.layout_file_name
形式向应用代码传 递布局资源的引用 ,加载应用代码中的布局资源。1
2
3
4
5
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
属性
每个 View 对象和 ViewGroup 对象均支持自己的各种 XML 属性 。某些属性是 View 对象的特有 属性(例如,TextView 支持 textSize 属性),但可扩展此类的任一 View 对象也会继承这些属 性。某些属性是所有 View 对象的共有属性,因为它们继承自 View 根类(例如 id 属性)。此 外,其他属性被视为“布局参数”,即描述 View 对象特定布局方向的属性,如由该对象的父 ViewGroup 对象定义的属性。
1
2
3
4
5
6
7
8
9
10
11
12<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="24sp"/>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮"/>
ID
任何 View 对象均可拥有与之关联的整型 ID,用于在结构树中对 View 对象进行唯一标识。编译应 用后,系统会以整型形式引用此 ID,但在布局 XML 文件中,系统通常会以字符串的形式在 id 属性中指定该 ID。这是所有 View 对象共有的 XML 属性(由 View 类定义),并且您会经常使 用该属性。
XML 标记内部的 ID 语法是:
1
android:id="@+id/tv"
字符串开头处的 @ 符号指示 XML 解析器应解析并展开 ID 字符串的其余部分,并将其标识为 ID 资 源。加号 (+) 表示这是一个新的资源名称,必须创建该名称并将其添加到我们的资源(在 R.java 文件中)内。Android 框架还提供许多其他 ID 资源。引用 Android 资源 ID 时,不需要加号,但 必须添加
android
软件包命名空间1
android:id="@android:id/empty"
添加
android
软件包命名空间后,我们现在将从android.R
资源类而非本地资源类引用 IDR.java
文件tips: @+id 和 @id区别: 其实@+id就是在R.java文件里新增一个id名称,如果之前已经存在相同的id名称,那么会覆盖之 前的名称。而@id则是直接引用R.java文件的存在的id资源,如果不存在,会编译报错。
注意: ID 字符串名称,在同一布局中必须是唯一的,不能重名,不同布局中可以同名;
通过ID值创建我们视图对象的实例
1
2
3
4
5
6<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="24sp"/>1
TextView textView = (TextView) findViewById(R.id.tv);
布局参数 LayoutParams
layout_***
的布局属性1
2
3
4
5
6<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 的尺寸和位置的属性。
视图层次结构图,包含每个视图关联的布局参数:
1
2
3
4
5
6
7
8
9
10TextView tv = new TextView(this);
LinearLayout linearLayout = new LinearLayout(this);
LinearLayout.LayoutParams layoutParams =
(LinearLayout.LayoutParams)tv.getLayoutParams();
layoutParams.leftMargin = 30; //左边距
layoutParams.topMargin = 30;//上边距
layoutParams.width = 100;//宽
layoutParams.height = 200;//高
tv.setLayoutParams(layoutParams);
linearLayout.addView(tv);
一般而言,建议不要使用绝对单位(如像素)来指定布局宽度和高度。更好的方法是使用相对测量 单位(如与密度无关的像素单位 (dp) 、 wrap_content 或 match_parent ),因为其有助于确 保您的应用在各类尺寸的设备屏幕上正确显示。
wrap_content
指示您的视图将其大小调整为内容所需的尺寸。match_parent
指示您的视图尽可能采用其父视图组所允许的最大尺寸。
布局位置
视图可以通过调用
getLeft()
方法和getTop()
方法来获取视图的坐标位置 ,也可以通过getWidth()
和getHeight()
获取视图的尺寸,这些方法返回的值是相对于其父视图的位置。位置和尺寸的单位是像素( px )
- px 即像素,1px代表屏幕上一个物理的像素点;
- 给视图设置px单位,不同分辨率下,尺寸不一样
- dp (dip) Density independent pixels ,设备无关像素。它与“像素密度”密切相关
- dpi像素密度: 每英寸包含的像素数 假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们 可以计算出在这部手机的屏幕上,每英寸包含的像素点的数量为240/1.5=160dpi(横 向)或320/2=160dpi(纵向),160dpi就是这部手机的像素密度,像素密度的单位 dpi是Dots Per Inch的缩写,即每英寸像素数量.
密度类型 代表的分辨率 (px) 屏幕密度 (dpi) 换算 (px/dp) 比 例 低密度(ldpi) 240x320 120 1dp=0.75px 3 中密度(mdpi) 320x480 160 1dp=1px 4 高密度(hdpi) 480x800 240 1dp=1.5px 6 超高密度(xhdpi) 720x1280 320 1dp=2px 8 超超高密度 (xxhdpi) 1080x1920 480 1dp=3px 12 - px 即像素,1px代表屏幕上一个物理的像素点;
内边距和外边距
常用布局
线性布局 - LinearLayout
LinearLayout 是一个视图容器,用于使所有子视图在单个方向(垂直或水平)保持对齐。您可 使用
android:orientation
属性指定布局方向。android:orientation="horizontal"
android:orientation="vertical"
布局权重
android:layout_weight
通过给子视图设置权重值,来分配子视图所占空间的权重(比例),如图三个子视图权重分别设置 为1,均分页面空间
相对布局 - RelativeLayout
相对布局 :子视图可通过相应的布局属性,设定相对于另一个兄弟视图或父视图容器的相对位置 。
属性说明:
相对于兄弟元素
属性名称 属性含义 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=”” 往内部元素右边缘填充距离 父容器定位属性示意图
根据兄弟组件定位
帧布局 - FrameLayout
最简单的一种布局,没有任何定位方式,当我们往里面添加控件的时候,会默认把他们放到这块区 域的左上角,帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时 刻就只能看到最上面的那个组件,后续添加的控件会覆盖前一个
网格布局 GridLayout
属性说明:
名称 含义 android:columnCount 列数 android:rowCount 行数 android:layout_columnSpan 横跨的列数 android:layout_rowSpan 横跨的行数 :columnCount | 列数 |
| android:rowCount | 行数 |
| android:layout_columnSpan | 横跨的列数 |
| android:layout_rowSpan | 横跨的行数 ||