文章目录
1 Android 用户界面
1.1 Android UI元素
- 视图:所有可视界面元素(通常称为控件或小组件)的基类
- 视图容器:视图类的扩展,其中包含多个子视图
- 布局管理:管理控件的布局格式,组织界面中控件
的呈现方式 - Activity:用于为用户呈现窗口或屏幕
- Fragment:针对不同屏幕尺寸时,优化UI布局以
及创建可重用的UI元素
1.2 视图容器
- ViewGroup类通常作为其控件的容器使用
1.3 组件的宽高单位
-
px
像素,即在屏幕中可以显示的最小元素单元。分辨率越高的手机,屏幕的像素点就越多。因此,如果使用px来设置控件的大小,在分辨率不同的手机上控件的显示出来的大小也不一样 -
dp
密度无关像素,又称dip,使用dp的好处是在无论屏幕的分辨率如何总能显示相同的大小,一般使用dp作为控件与布局的宽高单位 -
pt
磅数,一般pt都会作为字体的单位来显示。pt和px的情况相似,在不同分辨率的手机上,用pt作为字体单位显示的大小也不一样 -
sp
可伸缩像素,采用与dp相同的设计理念,设置字体大小时使用
1.4 布局的分类
- 界面由布局(layout) 和 控件(view) 组成
- 一个优秀的布局设计对UI界面起到重要的作用
- Android中常用布局主要有7种
- LinearLayout - 线性布局
- RelativeLayout - 相对布局
- TableLayout - 表格布局
- GridLayout - 网格布局
- AbsolutekLayout - 绝对布局
- FrameLayout - 帧布局
- ConstraintLayout - 约束布局
2 相对布局
2.1 RelativeLayout的属性
- 相对于父级Layout或其他控件布局 在XML中使用
<RelativeLayout>
元素定义 - 相对布局分为相对于父级Layout和其它控件两种
- 为了更好的确定布局中控件的位置,相对布局提供了很多属性
- 必须定义高和宽:
android:layout_height=XXX
android:layout_width=XXX
- android:layout_alignParentLeft 是否跟父级布局左对齐
- android:layout_alignParentRight 是否跟父级布局右对齐
- android:layout_alignParentTop 是否跟父级布局顶部对齐
- android:layout_alignParentBottom 是否跟父级布局底部对齐
- android:layout_toRightOf 在指定控件右边
- android:layout_toLeftOf 在指定控件左边
- android:layout_above 在指定控件上边
- android:layout_below 在指定控件下边
- android:layout_alignBaseline 与指定控件水平对齐
- android:layout_alignLeft 与指定控件左对齐
- android:layout_alignRight 与指定控件右对齐
- android:layout_alignTop 与指定控件顶部对齐
- android:layout_alignBottom 与指定控件底部对齐
2.2 添加Padding
- 设置与边框的距离
- 使用android:padding属性,可用于所有Layout和view*
<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingTop="@dimen/padding"
android:paddingBottom="@dimen/padding"
android:paddingLeft="@dimen/padding"
android:paddingRight="@dimen/padding"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="16dp">
<TextView
android:id="@+id/number"
android:layout_width="60dp"
android:layout_height="40dp"
android:layout_alignStart="@+id/input_number"
android:layout_alignTop="@+id/input_number"
android:layout_alignParentBottom="true"
android:layout_marginStart="-76dp"
android:layout_marginTop="-8dp"
android:layout_marginBottom="640dp"
android:gravity="center"
android:text="@string/number" />
- 新建Values
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="padding">16dp</dimen>
</resources>
2.3 相对于父布局
- android:layout_alignParent*属性=“true”
2.4 相对于其他View布局
- 锚点view必须定义ID:
android:id="@+id/button_click_me
2.5 相对布局的间距
3 线性布局
- 在一行或一列中布局控件:在XML中使用
<LinearLayout>
元素定义 - XML文件中的定义顺序决定了界面中控件出现的先后顺序
- 垂直方向的LinearLayout,每个View默认占用最少的空间
<?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">
3.1 实现发短信页面
3.2 layout_weight 使用比例
- 多个view分配空间:按weight的比例分配
3.3 空间位置以及内容位置
- 使用gravity设置控件内容的位置: android:gravity
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="@string/send" />
- 使 用 layout_gravity 设 置 控 件 在 layout 中 的 位 置 :android:layout_gravity
<EditText
android:id="@+id/message"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:ems="10"
android:gravity="top"
android:hint="@string/login"
android:inputType="textPersonName" />
4 网格布局 - GridLayout
- 在XML中使用
<GridLayout>
元素定义 - 必须定义高和宽,和列
android:columnCount=“number”
android:rowCount="number" - Android可自行推断行数
- 使用Padding属性设置内边距
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:padding="@dimen/padding">
- GridLayout:按定义顺序从第一行逐格放置view
4.1 网格布局定位
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:padding="@dimen/padding">
-
android:gravity和android:layout_gravity
-
水平填充
<EditText
android:id="@+id/address_g"
android:layout_width="147dp"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="1"
android:layout_gravity="fill_horizontal"
android:ems="10"
android:hint="@string/address"
android:inputType="textPersonName" />
- 使用android:layout_row=“n” 和 android:layout_column=“n” 定位
4.2 使用跨行与跨列的属性
- android:layout_columnSpan="2"
- android:layout_rowSpan="1"
<Button
android:id="@+id/seng_g"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_gravity="center_horizontal"
android:text="@string/send" />