Android常用布局使用技巧示例講解
更新時間：2023年04月26日 10:46:24 作者：頑石九變
本文詳細介紹了Android常用布局，包括LinearLayout、RelativeLayout、FrameLayout、ConstraintLayout等，分析了它們的適用場景、優(yōu)缺點和使用技巧，幫助開發(fā)者更好地選擇和使用合適的布局，提升UI設計和開發(fā)效率
一、FrameLayout 幀布局
這種布局類似疊加的圖片，沒有任何的定位方式，當我們往里面添加組件的時候，會默認把他們放到容器的左上角。
上面的組件顯示在底層，下面的組件顯示在上層。
如下代碼，視圖1顯示在最底層，視圖3顯示在最上層
<?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="match_parent">
<TextView
android:layout_width="400dp"
android:layout_height="400dp"
android:gravity="bottom|end"
android:text="視圖1"
android:background="@color/purple_200"
android:textColor="@color/white"
android:textSize="60sp"
/>
<TextView
android:layout_width="300dp"
android:layout_height="300dp"
android:gravity="bottom|end"
android:text="視圖2"
android:background="@color/teal_200"
android:textColor="@color/white"
android:textSize="60sp"
/>
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:gravity="bottom|end"
android:text="視圖3"
android:background="@color/teal_700"
android:textColor="@color/white"
android:textSize="60sp"
/>
</FrameLayout>
二、ConstraintLayout 約束布局
從 Android Studio 2.3 起，官方的模板默認使用 ConstraintLayout，它的出現主要是為了解決布局嵌套過多的問題，以靈活的方式定位和調整小部件。
ConstraintLayout和RelativeLayout有點像，比RelativeLayout更靈活，性能更出色?？梢园凑毡壤s束控件位置和尺寸，能夠更好地適配屏幕大小不同的機型。
1、相對定位
常用屬性：
- layout_constraintLeft_toLeftOf：左邊和目標組件的左邊對齊
- layout_constraintLeft_toRightOf：左邊和目標組件的右邊對齊
- layout_constraintRight_toLeftOf：右邊和目標組件的左邊對齊
- layout_constraintRight_toRightOf：右邊和目標組件的右邊對齊
- layout_constraintTop_toTopOf：上邊和目標組件的上邊對齊
- layout_constraintTop_toBottomOf：上邊和目標組件的下邊對齊
- layout_constraintBottom_toTopOf：下邊和目標組件的上邊對齊
- layout_constraintBottom_toBottomOf：下邊和目標組件的下邊對齊
- layout_constraintBaseline_toBaselineOf：文本基線對齊，如兩個TextView的高度不一致，但是又希望他們文本對齊
- layout_constraintStart_toStartOf：同layout_constraintLeft_toLeftOf
- layout_constraintStart_toEndOf：同layout_constraintLeft_toRightOf
- layout_constraintEnd_toStartOf：同layout_constraintRight_toLeftOf
- layout_constraintEnd_toEndOf：同layout_constraintRight_toRightOf
- layout_constraintHorizontal_bias：左右約束時的水平偏移量，可設置0-1的數值，默認0.5居中
- layout_constraintVertical_bias：上下約束時的垂直偏移量，可設置0-1的數值，默認0.5居中
- layout_constraintHorizontal_weight：水平權重值，可以是任意數值，在0dp時生效
- layout_constraintVertical_weight：垂直權重，可以是任意數值，在0dp時生效
- layout_constraintDimensionRatio：寬高比，當寬或高至少有一個尺寸被設置為0dp時可設置比例，如（1:2）
示例代碼，計算器布局：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/c_view1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_gravity="fill"
android:gravity="end"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:background="#FFCCCC"
android:text="0"
android:textSize="50sp" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="@id/c_view1"
app:layout_constraintStart_toStartOf="@id/c_view1"
app:layout_constraintEnd_toStartOf="@id/btn_qk"
android:layout_marginEnd="5dp"
android:textSize="40sp"
android:id="@+id/btn_ht"
android:text="回退" />
<Button
android:id="@+id/btn_qk"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="@id/c_view1"
app:layout_constraintStart_toEndOf="@id/btn_ht"
app:layout_constraintTop_toBottomOf="@id/c_view1"
app:layout_constraintBottom_toBottomOf="@id/btn_ht"
android:textSize="40sp"
android:text="清空" />
<Button android:text="+"
android:id="@+id/btn_jia"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_ht"
app:layout_constraintStart_toStartOf="@id/btn_ht"
app:layout_constraintEnd_toStartOf="@id/btn_01"
/>
<Button android:text="1"
android:id="@+id/btn_01"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_ht"
app:layout_constraintStart_toEndOf="@id/btn_jia"
app:layout_constraintEnd_toStartOf="@id/btn_02"
/>
<Button android:text="2"
android:id="@+id/btn_02"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_ht"
app:layout_constraintStart_toEndOf="@id/btn_01"
app:layout_constraintEnd_toStartOf="@id/btn_03"
/>
<Button android:text="3"
android:id="@+id/btn_03"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_ht"
app:layout_constraintStart_toEndOf="@id/btn_02"
app:layout_constraintEnd_toEndOf="@id/btn_qk"
/>
<Button android:text="-"
android:id="@+id/btn_jian"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jia"
app:layout_constraintStart_toStartOf="@id/btn_ht"
app:layout_constraintEnd_toStartOf="@id/btn_04"
/>
<Button android:text="4"
android:id="@+id/btn_04"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jia"
app:layout_constraintEnd_toStartOf="@id/btn_05"
app:layout_constraintStart_toEndOf="@id/btn_jian"
/>
<Button android:text="5"
android:id="@+id/btn_05"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jia"
app:layout_constraintEnd_toStartOf="@id/btn_06"
app:layout_constraintStart_toEndOf="@id/btn_04"
/>
<Button android:text="6"
android:id="@+id/btn_06"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jia"
app:layout_constraintStart_toEndOf="@id/btn_05"
app:layout_constraintEnd_toEndOf="@id/btn_qk"
/>
<Button android:text="*"
android:id="@+id/btn_xin"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jian"
app:layout_constraintStart_toStartOf="@id/btn_ht"
app:layout_constraintEnd_toStartOf="@id/btn_07"
/>
<Button android:text="7"
android:id="@+id/btn_07"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jian"
app:layout_constraintEnd_toStartOf="@id/btn_08"
app:layout_constraintStart_toEndOf="@id/btn_xin"
/>
<Button android:text="8"
android:id="@+id/btn_08"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jian"
app:layout_constraintEnd_toStartOf="@id/btn_09"
app:layout_constraintStart_toEndOf="@id/btn_07"
/>
<Button android:text="9"
android:id="@+id/btn_09"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_jian"
app:layout_constraintStart_toEndOf="@id/btn_08"
app:layout_constraintEnd_toEndOf="@id/btn_qk"
/>
<Button android:text="/"
android:id="@+id/btn_chu"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_xin"
app:layout_constraintStart_toStartOf="@id/btn_ht"
app:layout_constraintEnd_toStartOf="@id/btn_dian"
/>
<Button android:text="."
android:id="@+id/btn_dian"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_xin"
app:layout_constraintEnd_toStartOf="@id/btn_00"
app:layout_constraintStart_toEndOf="@id/btn_chu"
/>
<Button android:text="0"
android:id="@+id/btn_00"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_marginEnd="5dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_xin"
app:layout_constraintEnd_toStartOf="@id/btn_deng"
app:layout_constraintStart_toEndOf="@id/btn_dian"
/>
<Button android:text="="
android:id="@+id/btn_deng"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/btn_xin"
app:layout_constraintStart_toEndOf="@id/btn_00"
app:layout_constraintEnd_toEndOf="@id/btn_qk"
/>
</androidx.constraintlayout.widget.ConstraintLayout>2、角度定位
常用屬性：
- layout_constraintCircle：角度定位參照目標組件
- layout_constraintCircleAngle：偏移角度，參照組件垂直方向往右邊轉動角度
- layout_constraintCircleRadius：距離
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 按鈕1 屏幕居中 -->
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="94dp"
android:text="按鈕1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<!-- 按鈕2 相對按鈕1旋轉120度，且距離按鈕1中心點120dp -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="按鈕2"
app:layout_constraintCircle="@id/button"
app:layout_constraintCircleAngle="120"
app:layout_constraintCircleRadius="120dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
3、權重和0dp
- 如果layout_width設置為0dp，那么控件就會水平鋪開撐滿所有空間
- 如果layout_height設置為0dp，那么控件就會垂直鋪開撐滿所有空間
- layout_constraintHorizontal_weight：設置權重值，可以是任意數值
4、控件排成一排平均分布(默認)
一條鏈的第一個控件是這條鏈的鏈頭，我們可以在鏈頭中設置layout_constraintHorizontal_chainStyle來改變整條鏈的樣式。chains提供了3種樣式，分別是：
- CHAIN_SPREAD：展開元素平均分布 (默認)
- CHAIN_SPREAD_INSIDE：展開元素，但鏈的兩端貼近parent
- CHAIN_PACKED：鏈的元素將被打包在一起
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按鈕1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/button2" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按鈕2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button"
app:layout_constraintRight_toLeftOf="@id/button3" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按鈕3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/button2"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>5、Group分組
Group可以把多個控件歸為一組，方便隱藏或顯示一組控件
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="btn_deng,btn_00,btn_dian"/>
6、Barrier屏障
Barrier只是用來輔助布局，不會顯示在頁面上，其他組件可以和Barrier做約束。
- constraint_referenced_ids：參考的組件id列表，多個用逗號(,)隔開
- barrierDirection：屏障位于參考組件的位置，可選值（left、right、top、bottom、start、end）
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="btn_01,btn_02"
/>
到此這篇關于Android常用布局使用技巧示例講解的文章就介紹到這了,更多相關Android常用布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Android數據存儲方式操作模式解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本篇文章是對Android消息通知欄的實現方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了Android實現仿網易新聞的頂部導航指示器的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
android隱式意圖激活自定義界面和系統(tǒng)應用界面的實例
下面小編就為大家?guī)硪黄猘ndroid隱式意圖激活自定義界面和系統(tǒng)應用界面的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了Android生成隨機數的方法實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了Android讀取XML文件中的數據，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Android SdkVersion的區(qū)別及獲取版本信息方法
下面小編就為大家?guī)硪黄狝ndroid SdkVersion的區(qū)別及獲取版本信息方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Android利用FlexboxLayout輕松實現流動布局
flexbox是屬于CSS的一種布局方案，可以簡單、完整、響應式的實現各種頁面布局。谷歌將其引入以提高復雜布局的能力。下面這篇文章主要給大家介紹了在Android中利用FlexboxLayout輕松實現流動布局的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
Android自定義view實現圓環(huán)效果實例代碼
本文通過實例代碼給大家介紹了Android自定義view實現圓環(huán)效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Runtime解決屏幕旋轉問題的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09