06 Android布局 相对布局 线性布局 网格布局

1 Android 用户界面

1.1 Android UI元素

1. 视图：所有可视界面元素（通常称为控件或小组件）的基类
2. 视图容器：视图类的扩展，其中包含多个子视图
3. 布局管理：管理控件的布局格式，组织界面中控件
   的呈现方式
4. Activity：用于为用户呈现窗口或屏幕
5. Fragment：针对不同屏幕尺寸时，优化UI布局以
   及创建可重用的UI元素

1.2 视图容器

• ViewGroup类通常作为其控件的容器使用
  

1.3 组件的宽高单位

1. px
   像素，即在屏幕中可以显示的最小元素单元。分辨率越高的手机，屏幕的像素点就越多。因此，如果使用px来设置控件的大小，在分辨率不同的手机上控件的显示出来的大小也不一样

2. dp
   密度无关像素，又称dip，使用dp的好处是在无论屏幕的分辨率如何总能显示相同的大小，一般使用dp作为控件与布局的宽高单位

3. pt
   磅数，一般pt都会作为字体的单位来显示。pt和px的情况相似，在不同分辨率的手机上，用pt作为字体单位显示的大小也不一样

4. sp
   可伸缩像素，采用与dp相同的设计理念，设置字体大小时使用

1.4 布局的分类

• 界面由布局（layout） 和 控件（view) 组成
• 一个优秀的布局设计对UI界面起到重要的作用
• Android中常用布局主要有7种

1. LinearLayout - 线性布局
2. RelativeLayout - 相对布局
3. TableLayout - 表格布局
4. GridLayout - 网格布局
5. AbsolutekLayout - 绝对布局
6. FrameLayout - 帧布局
7. ConstraintLayout - 约束布局

2 相对布局

2.1 RelativeLayout的属性

• 相对于父级Layout或其他控件布局 在XML中使用 <RelativeLayout>元素定义
• 相对布局分为相对于父级Layout和其它控件两种
• 为了更好的确定布局中控件的位置，相对布局提供了很多属性
• 必须定义高和宽：
  android:layout_height=XXX
  android:layout_width=XXX

1. android:layout_alignParentLeft 是否跟父级布局左对齐
2. android:layout_alignParentRight 是否跟父级布局右对齐
3. android:layout_alignParentTop 是否跟父级布局顶部对齐
4. android:layout_alignParentBottom 是否跟父级布局底部对齐
5. android:layout_toRightOf 在指定控件右边
6. android:layout_toLeftOf 在指定控件左边
7. android:layout_above 在指定控件上边
8. android:layout_below 在指定控件下边
9. android:layout_alignBaseline 与指定控件水平对齐
10. android:layout_alignLeft 与指定控件左对齐
11. android:layout_alignRight 与指定控件右对齐
12. android:layout_alignTop 与指定控件顶部对齐
13. 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 空间位置以及内容位置

1. 使用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" />

2. 使 用 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" />