《线性布局

偏执的太偏执、 2024-04-01 18:16 98阅读 0赞

#### 文章目录 ####

*  一、学习要点
 *   *   *  概述
 *  二、案例演示--线性布局属性
 *   *  1、创建安卓应用
     *  2、字符串资源文件
     *  3、主布局资源文件
     *  4、设置布局属性
     *   *  （1）方向
         *  （2）内边距
         *  （3）对齐方式
         *  （4）背景设置
     *  5、线性布局嵌套
     *   *  （1）创建安卓应用
         *  （2）字符串资源文件
         *  （3）将约束布局改为线性布局
         *  （4）修改布局

--------------------

## 一、学习要点 ##

1.  界面与布局
2.  线性布局属性
3.  案例解析

#### 概述 ####

*  线性布局(LinearLayout)是一种比较常用且简单的布局方式。在这种布局中，所有的子元素都是按照垂直或水平的顺序排列在界面上。如果是垂直排列，每个子元素占一行，如果是水平排列，则每个子元素占一列。线性布局可以支持布局样式嵌套实现复杂的布局样式

## 二、案例演示–线性布局属性 ##

### 1、创建安卓应用 ###

*  基于`Empty Activity`模板创建–`LinearLayoutDemo`  
    ![在这里插入图片描述][35751e764260464bb6de076b8db4bb9b.png]
 *  点击【Finis】  
    ![在这里插入图片描述][70fe63c9f7774527a5ec1c2421b389cc.png]

### 2、字符串资源文件 ###

*  `strings.xml`  
    ![在这里插入图片描述][146a1d64d3cd48b79897e738d1ed7ab5.png]

### 3、主布局资源文件 ###

*  `activity_main.xml`
 *  删除多余标签，把约束布局改为线性布局  
    ![在这里插入图片描述][5737ebe45e034373a403ef8b0ce3561f.png]
 *  增加两个按钮  
    ![在这里插入图片描述][5d9a298f48e34638955db93a96cf49e7.png]  
    ![在这里插入图片描述][8fc1dbb65de440509db8f5b99c6562dc.png]
 *  此时会发现两个按钮水平摆放，在窗口左上角

### 4、设置布局属性 ###

#### （1）方向 ####

*  `orientation`属性
 *  打开 **Spli** 视图可以随时查看其效果  
    ![在这里插入图片描述][8c86ba0d5f80451286e3cc71ed550fe5.png]

#### （2）内边距 ####

*  `padding` 属性  
    ![在这里插入图片描述][2a77cb96bb0d41498fcdabcf5c4b5ad9.png]

#### （3）对齐方式 ####

*  `gravity` (left、center、right、top、bottom)
 *  组合应用如：设置右上对齐 - `right|top`  
    ![在这里插入图片描述][4a16565f93a54136ab97a82ab1846d12.png]
 *  删掉 **按钮1** 的右外边距  
    ![在这里插入图片描述][929c2b91202e4094b22ffeefdeecc888.png]
 *  居中对齐`center`  
    ![在这里插入图片描述][42b55410070349c9b6723c278b48d38e.png]
 *  左下角对齐-`left|bottom`  
    ![在这里插入图片描述][a7e8bf0414ac4f3d9e6781fee4fed939.png]
 *  右下角对齐—`right|bottom`  
    ![在这里插入图片描述][5fe261dcff064805bad689e023e34bdb.png]
 *  顶部居中对齐-`center|top` 或者 `top|center`  
    ![在这里插入图片描述][9b2cc7e1e67a4509a2ffc25320cc5a34.png]
 *  等等……

#### （4）背景设置 ####

*  采用颜色常量  
    ![在这里插入图片描述][e423bce4db4a45039d980659e4030bd0.png]  
    ![在这里插入图片描述][faae566880cf49f79119b0a05a5aa950.png]
 *  地址：http://cha.buyiju.com/tool/color.html
 *  采用颜色变量  
    ![在这里插入图片描述][bc53f3e616db4f1a933a420b900aa40f.png]  
    ![在这里插入图片描述][672382e7457647f9ba0dcdf08da90ece.png]
 *  图片填充
 *  准备一张图片拷贝到`drawable`目录中  
    ![在这里插入图片描述][67a6b2e9d9954342ac87f3376e52423b.png]
 *  背景选择器  
    ![在这里插入图片描述][cbfa221047a24c24b9c76478ee65fab4.png]  
    ![在这里插入图片描述][9fc8c7fe27bd44f594b2e24a1b850bf2.png]  
    ![在这里插入图片描述][f1a61771c0984314be610f37d526551f.png]

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners
            android:radius="20dp"/>
        <stroke
            android:width="1dp"
            android:color="#ee3366"/>
        <gradient
            android:startColor="#ffff00"
            android:centerColor="#ff0055"
            android:endColor="#aa00ff"/>
    </shape>

*  添加一个线性布局，设置自定义边框  
    ![在这里插入图片描述][49cea0e12bd74f3eb67f027af645d96b.png]

![在这里插入图片描述][775621c11f26469eb546abb2be1d3931.png]

### 5、线性布局嵌套 ###

#### （1）创建安卓应用 ####

*  基于`Empty Activity`创建 - `NestedLinearLayout`  
    ![在这里插入图片描述][4a089bb7587244d2b81fda25a77f460a.png]  
    ![在这里插入图片描述][d0040641603246878941b967d2d5c5f6.png]  
    ![在这里插入图片描述][8a969bd4b89e41afb46518722894e748.png]

#### （2）字符串资源文件 ####

*  `strings.xml`  
    ![在这里插入图片描述][6adedd6150f2474c9402824c8e22e05d.png]

#### （3）将约束布局改为线性布局 ####

*  `activity_main.xml`
 *  删除多余标签  
    ![在这里插入图片描述][10ab0df793594b168300c833e548fab3.png]
 *  添加三个线性布局并按1:2:3的比例垂直瓜分界面  
    ![在这里插入图片描述][04ba9af23b354d24af76810b8bbbf011.png]

#### （4）修改布局 ####

*  在第一个布局中水平插入三张图片  
    ![在这里插入图片描述][1edd8d9b604f4147bc7135355ae2d15e.png]
 *  在第二个布局中添加一个横向线性布局，在其中添加四个按钮  
    ![在这里插入图片描述][fcbef156065e4a49bb9d01c8501535da.png]
 *  再次在第二个布局中添加一个编辑框，并把第二个布局改为竖向线性布局-`orientation="vertical"`

![在这里插入图片描述][c528e6c812224496ae8ccf2f1d026d6a.png]

*  第三个布局里添加三个布局，按照1:2:3比例水平瓜分第三个布局  
    ![在这里插入图片描述][cc054c014c8846bb9433df08ee93e0ef.png]
 *  启动应用，查看效果
 *  ![在这里插入图片描述][17ae5ad928a3431389b7dfe5cd2a0b6e.png]

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#eeffcc">
    
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/img01"/>
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/img02"/>
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/img03"/>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:gravity="center"
            android:orientation="vertical"
            android:background="#55eeee">
    
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal">
                <Button
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:text="按钮1" />
                <Button
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:text="按钮1" />
                <Button
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:text="按钮1" />
                <Button
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:text="按钮1" />
    
            </LinearLayout>
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:background="#aabbcc"
                android:lines="3"
                android:text="再次在第二个布局中添加一个编辑框，并把第二个布局改为竖向线性布局"/>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:background="#eeffff"
            android:gravity="center">
    
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#ff0000"
                android:gravity="center">
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:background="#00ff00"
                android:gravity="center">
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:background="#0000ff"
                android:gravity="center">
            </LinearLayout>
    
        </LinearLayout>
    
    </LinearLayout>

[35751e764260464bb6de076b8db4bb9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/03d9d0cf9efc498ab6bcbfb000c9d90c.png
[70fe63c9f7774527a5ec1c2421b389cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1d6cc9e7d0954f349dabd58217fb8969.png
[146a1d64d3cd48b79897e738d1ed7ab5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/db9ce6b25a274f31bf085f67d8370592.png
[5737ebe45e034373a403ef8b0ce3561f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/98b22070057b43328402afd9c86cd6ae.png
[5d9a298f48e34638955db93a96cf49e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f3d7e12933254304bc65df91fec91f51.png
[8fc1dbb65de440509db8f5b99c6562dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/68709edc17d3450ca878cf81d9b1a4c2.png
[8c86ba0d5f80451286e3cc71ed550fe5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0e28fed85a6048a68f168adbb51c450d.png
[2a77cb96bb0d41498fcdabcf5c4b5ad9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/87fa1af9cbce4f3faf38339d653f0eba.png
[4a16565f93a54136ab97a82ab1846d12.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e2a126d0c42f47c0980005dcb9c43e04.png
[929c2b91202e4094b22ffeefdeecc888.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b219f01c0a5141a39937203bd3ffd2a7.png
[42b55410070349c9b6723c278b48d38e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/178798daf3b6441a9c499af16cfb61f6.png
[a7e8bf0414ac4f3d9e6781fee4fed939.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2b73840568cb48a5bdff5ddc47386330.png
[5fe261dcff064805bad689e023e34bdb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/25d5c37897eb4d129ec8cf6bd17b7068.png
[9b2cc7e1e67a4509a2ffc25320cc5a34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cf4cd279dd094f53a107bf28836d7920.png
[e423bce4db4a45039d980659e4030bd0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a86579ecdc0446dda05a7e66503c51f6.png
[faae566880cf49f79119b0a05a5aa950.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cb4311051b50421889de979614085be0.png
[bc53f3e616db4f1a933a420b900aa40f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/05a218f3d37e4cbea936a28be4511c5a.png
[672382e7457647f9ba0dcdf08da90ece.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6c9cbec454794a6ca96ed300e593e085.png
[67a6b2e9d9954342ac87f3376e52423b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/faa00fea38b54c5b874a3dacbe68adc7.png
[cbfa221047a24c24b9c76478ee65fab4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cb8007be0ef94187bf5e641b2137bb04.png
[9fc8c7fe27bd44f594b2e24a1b850bf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ddf421f4302f403c99670faa297221fc.png
[f1a61771c0984314be610f37d526551f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0b428d169b6f4e6f89dd4d8cb9085ae0.png
[49cea0e12bd74f3eb67f027af645d96b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/559ba2d0aba94f54a2de4a31d62bfd4a.png
[775621c11f26469eb546abb2be1d3931.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/120448b6d9fb4602acc2aa22832e0539.png
[4a089bb7587244d2b81fda25a77f460a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2d2e4ba568b7444c8b20e38726217cca.png
[d0040641603246878941b967d2d5c5f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2bc2e78093b644a78961a976ae505752.png
[8a969bd4b89e41afb46518722894e748.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3002114c3c574640ba93b240a839774b.png
[6adedd6150f2474c9402824c8e22e05d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f3626b4ee0f64fbbb78ad4f4e1985f2d.png
[10ab0df793594b168300c833e548fab3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5de25929c23e4707ae278f327ccdecc1.png
[04ba9af23b354d24af76810b8bbbf011.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b9a8e05c0a764a4ca807cc096884842e.png
[1edd8d9b604f4147bc7135355ae2d15e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/65787cf30abe4d36b587a6684c937214.png
[fcbef156065e4a49bb9d01c8501535da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/876f88edc4ed4036a9a29dea4b436905.png
[c528e6c812224496ae8ccf2f1d026d6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8dce0e90020b45d1b52854b69f88884d.png
[cc054c014c8846bb9433df08ee93e0ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/29a19db3e0564d96a6dd1b729b7759b4.png
[17ae5ad928a3431389b7dfe5cd2a0b6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/677b9a206eda458391eff44c74403cb8.png