Android入门03 -- 布局

LinearLayout线性布局

• orientation：布局方向；
  • vertical：竖直方向；
  • horizontal：水平方向；
• gravity：控制内部子元素的对齐方式，可多个组合；
• layout_gravity：控制该控件在父容器中的对齐方式；
• background：设置背景，可设置图片或者颜色；
• layout_weight：权重，分配的是剩余空间；
• divider：设置分割线，让UI出图；
• showDividers：设置分割线的显示位置，none(无)，beginning(开始)，end(结束)，middle(每两个组件之间)；
• dividerPadding：设置分割线的padding；

RelativeLayout相对布局

• 根据父容器进行定位：包含对齐与居中
  • layout_alignParentRight：右对齐；
  • layout_alignParentLeft：左对齐；
  • layout_alignParentTop：顶部对齐；
  • layout_alignParentBottom：底部对齐；
  • layout_alignParentRight：右对齐；
  • layout_alignParentRight：右对齐；
  • layout_centerHorizontal：水平居中；
  • layout_centerVertical：垂直居中；
  • layout_centerParent：居中；
• 根据兄弟组件进行定位：包含位置与对齐
  • layout_toRightOf：放置于参考组件的右边；
  • layout_toLeftOf：放置于参考组件的左边；
  • layout_above：放置于参考组件的上方；
  • layout_below：放置于参考组件的下边；
  • layout_alignTop：对齐参考组件的上边界；
  • layout_alignBottom：对齐参考组件的下边界；
  • layout_alignLeft：对齐参考组件的左边界；
  • layout_alignRight：对齐参考组件的右边界；

通用属性

• margin 设置组件与组件之间的边距，主要包含两种情况：
• 第一种：当前组件与父容器之间的间距；
• 第二种：当前组件与其周围的兄弟组件的间距；
  • layout_marginTop：顶部边距；
  • layout_marginLeft：左侧边距；
  • layout_marginRight：右侧边距；
  • layout_marginBottom：底部边距；
• padding 设置组件内部元素的边距
  • paddingTop：
  • paddingLeft：
  • paddingRight：
  • paddingBottom：

FrameLayout帧布局

• 可重叠布局；
• foreground：设置前景，可设置为图片；

TableLayout表格布局

• collapseColumns：设置需要被隐藏的列序号，从0开始；
• stretchColumns：设置需要被拉伸的列序号，从0开始；
• shrinkColumns：设置需要被收缩的列序号，从0开始；
• layout_column：子控件，设置显示在第几列；
• layout_span：子控件，设置横向跨几列；
• 案例代码：

<?xml version="1.0" encoding="utf-8"?>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:collapseColumns="1"
    android:stretchColumns="2"
    android:shrinkColumns="5"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TableRow>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_column="2"
            android:layout_span="2"
            android:text="第一个"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第二个"/>
    </TableRow>

    <TableRow>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第一个"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第二个"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第三个"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第四个"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第五个"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第六个"/>
    </TableRow>

    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="第一个"/>

    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="第二个"/>

</TableLayout>

GridLayout 网格布局

• orientation：布局方向；
• columnCount：设置列数；
• rowCount：设置行数；
• 以下是针对内部子元素的属性：
  • layout_row：显示在第几行；
  • layout_column：显示在第几列；
  • layout_columnWeight：横向剩余空间的分配方式；
  • layout_rowWeight：纵向剩余空间的分配方式；
  • layout_rowSpan：横向跨几行；
  • layout_columnSpace：纵向跨几列；
  • 跨行列显示 可能需要配合layout_gravity属性一起使用；

ConstraintLayout约束布局

• 可通过图形化进行布局显示；

实现刷新控件 -- 上拉刷新(没下一页数据时)

• 效果图如下所示：

image.png

• 方案一：采用线性布局LinearLayout，实现如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:orientation="horizontal">
        <View
            android:layout_width="100dp"
            android:layout_height="1dp"
            android:background="@color/red"
            android:id="@+id/v111"/>

        <Space
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:id="@+id/left_space1111"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="没有更多数据了!!!"
            android:textColor="@color/black"
            android:id="@+id/tv111"/>

        <Space
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:id="@+id/right_space1111"/>

        <View
            android:layout_width="100dp"
            android:layout_height="1dp"
            android:background="@color/red"/>

</LinearLayout>

• 方案二：采用相对布局RelativeLayout，实现如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
        <View
            android:layout_width="100dp"
            android:layout_height="1dp"
            android:background="@color/red"
            android:layout_centerVertical="true"
            android:id="@+id/v11"
            android:layout_toLeftOf="@id/left_space"/>

        <Space
            android:layout_width="10dp"
            android:layout_height="45dp"
            android:id="@+id/left_space"
            android:layout_toLeftOf="@+id/tv"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="没有更多数据了!!!"
            android:textColor="@color/black"
            android:layout_centerInParent="true"
            android:id="@+id/tv"/>

        <Space
            android:layout_width="10dp"
            android:layout_height="45dp"
            android:id="@+id/right_space"
            android:layout_toRightOf="@+id/tv"/>

        <View
            android:layout_width="100dp"
            android:layout_height="1dp"
            android:background="@color/red"
            android:layout_centerVertical="true"
            android:layout_marginRight="30dp"
            android:layout_toRightOf="@id/right_space" />

</RelativeLayout>

• 方案三：采用帧布局FrameLayout，实现如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal">

        <View
            android:layout_width="100dp"
            android:layout_height="1dp"
            android:background="@color/red" />

        <Space
            android:id="@+id/right_space111111"
            android:layout_width="10dp"
            android:layout_height="45dp" />

        <TextView
            android:id="@+id/tv11111"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="没有更多数据了!!!"
            android:textColor="@color/black" />

        <Space
            android:id="@+id/right_space11111"
            android:layout_width="10dp"
            android:layout_height="45dp" />

        <View
            android:layout_width="100dp"
            android:layout_height="1dp"
            android:background="@color/red" />

    </LinearLayout>

    <androidx.core.widget.ContentLoadingProgressBar
        android:id="@+id/footer_progresss"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"/>

</FrameLayout>

• 方案四：采用约束布局ConstraintLayout，实现如下：

<?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"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <View
        android:layout_width="100dp"
        android:layout_height="1dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv1112"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.51" />

    <TextView
        android:id="@+id/tv1112"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="没有更多数据了!!!"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <View
        android:layout_width="100dp"
        android:layout_height="1dp"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:background="@color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv1112"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.489" />

</androidx.constraintlayout.widget.ConstraintLayout>

• 在布局中，我们不能直接设置两个兄弟控件之间的间距，可通过Space来控制兄弟控件之间的间距；

layout_weight属性的深入理解

• 创建xml文件，放置三个TextView，宽度均设置为wrap_content，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="100dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="left"
        android:gravity="center"
        android:textSize="17sp"
        android:background="@color/grey"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="middle"
        android:textSize="17sp"
        android:layout_weight="1"
        android:background="@color/red"
        android:gravity="center"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="right"
        android:textSize="17sp"
        android:background="@color/purple_200"
        android:gravity="center"/>

</LinearLayout>

• 将中间的TextView的 layout_weight设置为1，显示如下：

image.png

• 中间Middle，由于layout_weight=1，left和right没有设置layout_weight，默认为0，那么Middle会占据所有的剩余空间；
• 现将Middle的 layout_weight=2，left和right的layout_weight设置为1，效果如下：

image.png

• 系统会将 三者占完之后的剩余空间 = (满屏宽度 - 三者的内容宽度)，按照2:1:1的比例进行分配，然后将分配的空间合并到对应的TextView中；

• 将三者的layout_width均设置为match_parent，即均满屏宽度，然后三者的 layout_weight依次设置为1，2，2，效果如下：

image.png

• 发现left的layout_weight最小，但占据的空间却最大，什么原因导致的？
• 原理在于 剩余空间 = (满屏宽度 - 3*满屏宽度) = - 2 * 满屏宽度，然后将剩余空间按照1:2:2进行分配；
  • left分配的空间 = -2*满屏宽度 * (1/5) = -2/5 * 满屏宽度，所以left的最后宽度 = 满屏宽度 + (-2/5 * 满屏宽度) = 3/5 *满屏宽度；
  • middle分配的空间 = -2*满屏宽度 * (2/5) = -4/5 * 满屏宽度，所以middle的最后宽度 = 满屏宽度 + (-4/5 * 满屏宽度) = 1/5 *满屏宽度；
  • right分配的空间 = -2*满屏宽度 * (2/5) = -4/5 * 满屏宽度，所以right的最后宽度 = 满屏宽度 + (-4/5 * 满屏宽度) = 1/5 *满屏宽度；
• 最终三者之间的宽度比为：3:1:1；
• 总结layout_weight属性是对剩余空间的分配；