android线性布局之LinearLayout及其常用属性

在Android 的 UI 布局中总共有六大布局方式，分别是: LinearLayout（线性布局）、RelativeLayout（相对布局）、TableLayout（表格布局）、FrameLayout（帧布局）、AbsoluteLayout（绝对布局）、GridLayout（网格布局），今天的学习对象LinearLayout布局。

在学习之前我们先简单了解下什么是线性布局，所谓的线性布局就是将元素水平或垂直排列在一条线上，我们称这种方式为线性布局方式。
如图：

1、常用属性

1、id:元素唯一标识
2、layout_width和layout_height
取值如下：

取值	说明
具体高度	单位：dp、px
wrap_content	布局高度由子 View 的宽高度而定
match_parent	和父级同宽或同高

3、background：背景，可以是颜色或图片
android:background=“@color/teal_200”
android:background=“@drawable/ic_launcher_foreground”
4、orientation,LinearLayout的关键属性： 线性布局的方向

取值	说明
horizontal	水平
vertical	垂直

android:orientation="horizontal "
android:orientation=“vertical”

5、gravity布局内元素的对其方式

取值	说明
top	靠上
bottom	靠下
left	靠左
right	靠右
center	居中

也可以组合使用：center|right 靠右居中，bottom|right 右下角等等依次类推
android:gravity=“center|right”

android:gravity=“center”
android:gravity=“center|top”

6、layout_margin，layout_padding外边距内边距，这个和css的原理是一样的，layout_margin元素和元素之前的间隔，layout_padding元素内部，内容和边框之前的间隔。
7、layout_weight是指元素大小权重，可以按照元素占比布局，是比较重要的一个属性
如：高度固定宽度按权重1：1分配

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="20dp"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_margin="10dp"
                android:layout_height="200dp"
                android:src="@color/teal_200">
            </ImageView>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_margin="10dp"
                android:layout_height="200dp"
                android:src="@color/teal_200">
            </ImageView>
        </LinearLayout>

8、divider元素分割线，可以是颜色也可以是图片
9、showDividers分割线的位置

取值	说明
beginning	元素之前展示
end	在元素之后展示分割线
middle	每个元素之间展示
none	不展示

2、示例完整示例代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@drawable/ic_launcher_foreground"
    android:orientation="vertical"
    tools:context=".layoutActivity">
<!--    水平布局:宽度继承,高度固定-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="center"
        android:background="@color/purple_200"
        android:orientation="horizontal">
        <Button
            android:layout_width="100sp"
            android:layout_height="50sp"
            android:text="左边按钮"></Button>
        <Button
            android:layout_width="100sp"
            android:layout_height="50sp"
            android:text="中间按钮"></Button>
        <Button
            android:layout_width="100sp"
            android:layout_height="50sp"
            android:text="右边按钮"></Button>
    </LinearLayout>
    <!--    垂直布局:宽度继承,高度填充-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center|top">
        <Button
            android:layout_width="100sp"
            android:layout_height="50sp"
            android:text="顶部按钮"></Button>
        <Button
            android:layout_width="100sp"
            android:layout_height="50sp"
            android:text="中间按钮"></Button>
        <Button
            android:layout_width="100sp"
            android:layout_height="50sp"
            android:text="底部按钮"></Button>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:divider="@color/black"
            android:showDividers="middle"
            android:layout_weight="1"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_margin="10dp"
                android:layout_height="200dp"
                android:src="@drawable/icon">
            </ImageView>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_margin="10dp"
                android:layout_height="200dp"
                android:src="@drawable/icon">
            </ImageView>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

3、总结

orientation布局方向，layout_weight大小权重，gravity元素对其方式，这三个属性是LinearLayout布局的核心属性。
说实话有点像css的display: flex弹性布局

多动手多练习