Android studio 线性布局

╰+哭是因爲堅強的太久メ 2024-04-01 15:57 72阅读 0赞

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

*  线性布局
 *   *  1、继承关系图
     *  2、常用属性
 *  线性布局属性
 *   *  1、创建安卓应用
     *  2、主布局资源文件
     *  3、字符串资源文件
     *  4、启动应用，查看效果
     *  5、设置布局属性，查看效果
     *   *  （1）设置线性布局方向
     *  （2）设置线性布局内边距
     *  （3）设置线性布局对齐方式
     *  （4）设置线性布局背景
 *  线性布局嵌套
 *   *  1、创建安卓应用
     *  2、准备图片素材
     *  3、主布局资源文件
     *  4、字符串资源文件
     *  5、启动应用，查看效果
     *  6、修改布局，查看效果

## 线性布局 ##

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

### 1、继承关系图 ###

LinearLayout是ViewGroup的子类，注意：后面我们要学习的单选按钮组（RadioGroup）是线性布局的子类  
![在这里插入图片描述][a2e97fc825a84c2a9f2340e580e67399.png]

### 2、常用属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>layout_height</td> 
   <td>高度，单位：dp (wrap_content, match_parent)</td> 
  </tr> 
  <tr> 
   <td>layout_weight</td> 
   <td>宽度，单位：dp (wrap_content, match_parent)</td> 
  </tr> 
  <tr> 
   <td>orietation</td> 
   <td>方向（vertical，horizontal）</td> 
  </tr> 
  <tr> 
   <td>gravity</td> 
   <td>对齐方式（left, right, center, top, bottom…)</td> 
  </tr> 
  <tr> 
   <td>background</td> 
   <td>背景（颜色[color]、图片[drawable]、选择器[selector]）</td> 
  </tr> 
  <tr> 
   <td>weight</td> 
   <td>比重（用于瓜分手机屏幕）</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>内边距 (paddingLeft, paddingRight, paddingTop, paddingBottom)</td> 
  </tr> 
  <tr> 
   <td>margin</td> 
   <td>外边距 (marginLeft, marginRight, marginTop, marginBottom)</td> 
  </tr> 
 </tbody> 
</table>

## 线性布局属性 ##

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

*  基于Empty Activity模板创建安卓应用 - LinearLayoutDemo  
    ![在这里插入图片描述][960137457bca46f181cc5109d06b0f0c.png]
 *  单击【Finish】按钮  
    ![在这里插入图片描述][71506c4f35d346ac997acf96fe57cc92.png]

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

*  主布局资源文件 activity\_main.xml  
    ![在这里插入图片描述][f144a81688614c7ab849a3ca6da4633e.png]
 *  将约束布局改为线性布局，删掉默认的标签
 *  ![在这里插入图片描述][18191c63d98143b7af101b4091d0d023.png]
 *  添加两个按钮
 *  ![在这里插入图片描述][c6860100745043978ec633b05ba183cd.png]

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

*  字符串资源文件 - strings.xml
 *  ![在这里插入图片描述][44e5286c97e6464fa4ef48b17af01428.png]

### 4、启动应用，查看效果 ###

*  发现两个按钮水平摆放，在窗口左上角  
    ![在这里插入图片描述][7cc57ea0ba814f9ba7be24844b6e9f90.png]

### 5、设置布局属性，查看效果 ###

#### （1）设置线性布局方向 ####

*  orientation属性  
    \-![在这里插入图片描述][e1d724b6e2a4454599f26945447a00e8.png]

### （2）设置线性布局内边距 ###

*  padding (paddingTop, paddingBottom, paddingLeft, paddingRight)

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

### （3）设置线性布局对齐方式 ###

*  gravity (left、center、right、top、bottom可以搭配形成很多种对齐方式)
 *  设置右上对齐 - right|top

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

*  删掉【按钮1】的右外边距  
    ![在这里插入图片描述][2d5bf4f46aed423fba7b003e5862ec1b.png]
 *  设置居中对齐 - center  
    ![在这里插入图片描述][260964b484cf4a719d37b85398925b44.png]
 *  设置左下对齐 - left|bottom  
    ![在这里插入图片描述][1546e7f787f24b27a6d0ae073d4fda99.png]
 *  设置右下对齐 - right|bottom  
    ![在这里插入图片描述][385a12ba835743c3863bb19eee55b338.png]
 *  设置上中对齐 - center  
    ![在这里插入图片描述][e874b733f797447793a3316b47f6da14.png]
 *  其余几种情况：左中对齐、右中对齐和下中对齐，大家自己玩一玩

### （4）设置线性布局背景 ###

*  设置背景颜色（采用颜色变量）  
    ![在这里插入图片描述][b1ec05bae94d4a19b785afc827351ff4.png]
 *  设置背景颜色（采用颜色常量）  
    ![在这里插入图片描述][1d69759206b24bc7a2a1aadb9a3df6dc.png]
 *  设置背景图片

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

*  设置背景选择器
 *  添加一个线性布局，设置自定义边框

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

*  实现边框渐变色效果  
    ![在这里插入图片描述][dfe042e8272f45a39e094cbb6fcdda02.png]

## 线性布局嵌套 ##

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

*  基于Empty Activity创建安卓应用 - NestedLinearLayout  
    ![在这里插入图片描述][53f62d75cab640c88459d3aa959cd232.png]
 *  单击【Finish】按钮  
    ![在这里插入图片描述][e0f78d9a586c487390608cc0763074c9.png]

### 2、准备图片素材 ###

*  将三张小图片拷贝到res/drawable目录

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

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

*  主布局资源文件 - activity\_main.xml  
    ![在这里插入图片描述][17cb4cd24241452c9acd910e6e9cde38.png]
 *  将约束布局改为线性布局

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

*  添加三个线性布局，按照1:2:3比例垂直瓜分手机屏幕  
    ![在这里插入图片描述][9c0b1e40c2084540b83bd92dcba924c6.png]

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

*  字符串资源文件 - strings.xml

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

### 5、启动应用，查看效果 ###

*  三个布局按照1:2:3比例垂直瓜分手机屏幕  
    ![在这里插入图片描述][30e82e562d294fb981c9ed4dcdf09cf6.png]

### 6、修改布局，查看效果 ###

*  在第一个布局添加三个水平摆放的图像视图  
    ![在这里插入图片描述][7863456911e0468185b0e4ed05cb34a9.png]
 *  在第二个布局里添加一个横向线性布局，里面添加四个按钮

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

*  在第二个布局里添加一个编辑框

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

*  第三个布局里添加三个布局，按照1:2:3比例水平瓜分手机屏幕

![\*\*在这里插入图片描述\*\*][e382d137f14b48e7acd3706e6d840bc8.png]

[a2e97fc825a84c2a9f2340e580e67399.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/327c91dcbc834ceb91c94a7175b08a15.png
[960137457bca46f181cc5109d06b0f0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0c3142907dbc4245a467d84b5e604870.png
[71506c4f35d346ac997acf96fe57cc92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/37d2c77208074f5888978e8619c04190.png
[f144a81688614c7ab849a3ca6da4633e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/feb6ed898a864cf0b9a0f2ced46a0269.png
[18191c63d98143b7af101b4091d0d023.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cf0d17b8e8da404a86c35f65677c80d6.png
[c6860100745043978ec633b05ba183cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/305bc34dd89c41ea90c0e29f9f9eb513.png
[44e5286c97e6464fa4ef48b17af01428.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2d568abcfab044b0a3bc1290f303d5c2.png
[7cc57ea0ba814f9ba7be24844b6e9f90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/34e0a2682e5e4ee3b5759e03d219c293.png
[e1d724b6e2a4454599f26945447a00e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ccb1d63dfe8149438eec098f6d8ae573.png
[562163119c5a44eba1869908dd172a1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c98222de64604a2fa096347ade5fe125.png
[0172c4a1144e415d8b64e77e3f684c7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9ccb7785da6f4b4e9928d35dd16755ee.png
[2d5bf4f46aed423fba7b003e5862ec1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/65fd74e2c3814d2ea8e586988dde1502.png
[260964b484cf4a719d37b85398925b44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0e2c8312db504e419199172473e149c7.png
[1546e7f787f24b27a6d0ae073d4fda99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b3a7cdbf8c6548d6ba3734ea3de4f048.png
[385a12ba835743c3863bb19eee55b338.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/16f83d06f1544a6ca73d0a9ba7f2a34a.png
[e874b733f797447793a3316b47f6da14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a47bb0960aa54bf4abd66b6d45e0270c.png
[b1ec05bae94d4a19b785afc827351ff4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e3e38d3cf938482284ecc78d2e9eaf89.png
[1d69759206b24bc7a2a1aadb9a3df6dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6499d4043d7b4040a12d16558b5bfa0c.png
[e1cca4e5a06e4333a4822dc138a55e2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c8d22c3fa9884d74825b26c6804b5152.png
[a90b6ee3391d4c3da9a2fc0b14a63e41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a7a65ac8bb0b4eca80d6f0c1711cf77e.png
[dfe042e8272f45a39e094cbb6fcdda02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e5fce5e2a04042fab7242e167d1fe67a.png
[53f62d75cab640c88459d3aa959cd232.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/18beab321bcb4992babec06d994e1a6a.png
[e0f78d9a586c487390608cc0763074c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/331ef334ea7a444aab78f1e221338897.png
[b1582b33257f4236baadad4735c603d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/11db5005ef94417aa7ef39ded011438e.png
[17cb4cd24241452c9acd910e6e9cde38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c2f72984aa9b42ee8c6e7d863678fbfd.png
[a71dee227898422aa07e90f3b3d94556.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ad901f7aee1e40c2962958f58c0f62c1.png
[9c0b1e40c2084540b83bd92dcba924c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6ca9e5a4e92c49d0a0ad9345cabf5009.png
[2c8737e968e54732a40f20bbd02223ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/42088d2d85084d909b1d817f52a0f12f.png
[30e82e562d294fb981c9ed4dcdf09cf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ec3ccb6301774f1b9497ed6a5eb30c95.png
[7863456911e0468185b0e4ed05cb34a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e08d10970cc94483a31387e2fca6dc70.png
[12343caf26564ae6ac9934d2f49b1f4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd38c85924be4739a63d1b823472dc8f.png
[03670897c310439ea0655101a5175279.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a7db8d3bd98b40b0a384dcca5dd6655f.png
[e382d137f14b48e7acd3706e6d840bc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/85ec6ea13609481183e5395c90276b10.png