前言

• 在 Android開發中，繪制UI時常需各種布局
• 今天，我將全面介紹Android開發中最常用的五大布局

含 Android Studio 2.2中新增的布局：約束布局（ConstraintLayout）介紹

目錄

示意圖

1. 布局類型

在Android中，共有2類、6種布局方式，分別是：

image.png

2. 布局介紹

• 具體介紹

示意圖

本文主要介紹傳統的5大布局，關于約束布局（ConstraintLayout）具體點擊查看文章

3. 布局屬性

• Android的布局屬性通過 XML配置
• 下面，主要講解布局公有屬性 & 特有屬性

3.1 公有屬性

即 5種布局都具備下述屬性

• layout_width 、layout_height
• layout_margin+方位
• padding +方位
• gravity
• layout_gravity

layout_gravity 一般作用于 LeanerLayout 和 FrameLayout，但此處為了與 gravity對比

示意圖

layout_gravity：多用于自身控件相對于父控件的位置
gravity：多用于設置父控件里的子控件的位置

3.2 特有屬性

• 具體介紹如下

示意圖

3.3 特別注意

• 5個布局元素可相互嵌套使用，從而實現各種不同的效果
• 關于 線性布局（LinearLayout）的權重屬性layout_weight請看文章

4. 選擇器（Selector）

4.1 作用

通過設置選擇器（selector）可使控件 在不同操作下（默認、點擊等） 顯示不同樣式

通過 xml編寫 = selector.xml

4.2 屬性

注：上述所有屬性的取值 = boolean屬性 = true、false

4.3 實例說明

在drawable添加 selector.xml 資源文件

button_selector.xml:

<?xml version="1.0" encoding="UTF-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">

 < !-- 指定按鈕按下時的圖片 -->
 <item android:state_pressed="true"  
       android:drawable="@drawable/start_down"
 />

 < !-- 指定按鈕松開時的圖片 --> 
 <item android:state_pressed="false"
       android:drawable="@drawable/start"
 />

< /selector>

在布局文件main.xml中控件的屬性設置:

<Button
  android:id="@+id/startButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/button_selector" 
/>

5. 布局形狀（Shape）

• 作用：設置布局的顏色、邊框線
• 使用：通過 xml編寫 = shape.xml
• 具體使用

<shape xmlns:android="http://schemas.android.com/apk/res/android">

// 默認顏色
<solid android:color="#876543"/>
// 4個方向的邊框線
  <padding
        android:bottom="0dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />
     // 邊框線顏色、大小
    <stroke
        android:width="1dp"
        android:color="#000000" />
// 圓角
<corners android:radius="2dp" />

</shape>

在布局文件main.xml中控件的屬性設置:

<Button
  android:id="@+id/startButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/layout_shape" 
/>

注：同時設置點擊樣式 & 形狀

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <solid android:color="@color/black" />
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>
</selector>

附：顏色透明度（即顏色透明程度是多少）

00% ：FF（不透明）   
5% ： F2    
10% ：E5    
15% ：D8    
20% ：CC    
25% ：BF    
30% ：B2    
35% ：A5    
40% ：99    
45% ：8c    
50% ：7F    
55% ：72    
60% ：66    
65% ：59    
70% ：4c    
75% ：3F    
80% ：33    
85% ：21    
90% ：19    
95% ：0c    
100% ：00（全透明）

// 使用方式
// 在十六進制顏色前加入

// 使用示例：黑色，透明度 = 10%（即顏色的透明程度是10% = 設計同學說的“10%透明度”）
// 黑色的十六進制：#000000
// 透明度 10%：E5 
// 最終表示：#E5000000

6. 總結

• 本文全面介紹了 Android常用布局
• 下面我將繼續對 Android中的知識進行深入講解 ，感興趣的同學可以繼續關注Carson_Ho的簡書

相關系列文章閱讀
Carson帶你學Android：學習方法
Carson帶你學Android：四大組件
Carson帶你學Android：自定義View

Carson帶你學Android：異步-多線程
Carson帶你學Android：性能優化
Carson帶你學Android：動畫

歡迎關注Carson_Ho的簡書

不定期分享關于安卓開發的干貨，追求短、平、快，但卻不缺深度。

請點贊！因為你的鼓勵是我寫作的最大動力！