2.4 百分比布局
2.4.1 PercentFrameLayout
前面介紹的3種布局都是從Android 1.0版本中就開始支持了,一直沿用到現在,可以說是滿足了絕大多數場景的界面設計需求。不過細心的你會發現,只有LinearLayout
支持使用layout_weight
屬性來實現按比例指定控件大小的功能,其他兩種布局都不支持。比如說,如果想用RelativeLayout
來實現讓兩個按鈕平分布局寬度的效果,則是比較困難的。
為此,Android引入了一種全新的布局方式來解決此問題——百分比布局。在這種布局中,我們可以不再使用wrap_content 、 match_parent等方式來指定控件的大小,而是允許直接指定控件在布局中所占的百分比,這樣的話就可以輕松實現平分布局甚至是任意比例分割布局的效果了。
使用步驟參考:傳送門
Android團隊將百分比布局定義在了support庫當中,我們只需要在項目的build.gradle中添加百分比布局庫的依賴,就能保證百分比布局在Android所有系統版本上的兼容性了。
1.打開app/build.gradle文件,在dependencies閉包中添加如下內容:
implementation "androidx.percentlayout:percentlayout:1.0.0"
gradle文件自上次同步之后又發生了變化,需要再次同步才能使項目正常工作。這里只需要點擊Sync Now就可以了,然后gradle會開始進行同步,把我們新添加的百分比布局庫引入到項目當中。
- app/main/res/layout-->右鍵, new ->Layout Resource File:
Root element 選擇 :PercentFrameLayout
- 新增
xmlns:app
xmlns:app="http://schemas.android.com/apk/res-auto
由於百分比布局並不是內置在系統SDK當中的,所以需要把完整的包路徑寫出來。然后還必須定義一個app的命名空間,這樣才能使用百分比布局的自定義屬性。
注意這些屬性沒有代碼提示功能,要自己輸入
- 完整代碼:
<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:text="Button 1"
android:layout_gravity="left|top"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
/>
<Button
android:id="@+id/button2"
android:text="Button 2"
android:layout_gravity="right|top"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
/>
<Button
android:id="@+id/button3"
android:text="Button 3"
android:layout_gravity="left|bottom"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
/>
<Button
android:id="@+id/button4"
android:text="Button 4"
android:layout_gravity="right|bottom"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
/>
</androidx.percentlayout.widget.PercentFrameLayout>
2.4.2 PercentRelativeLayout
主要屬性如下,注意這些屬性沒有代碼提示功能,要自己輸入:
並且自己添加 xmlns:app="http://schemas.android.com/apk/res-auto“
layout_widthPercent
layout_heightPercent
layout_marginPercent
layout_marginLeftPercent
layout_marginTopPercent
layout_marginRightPercent
layout_marginBottomPercent
layout_marginStartPercent
layout_marginEndPercent
layout_aspectRatio
示例:
<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF4081"
app:layout_heightPercent="100%"
app:layout_marginPercent="4%"
app:layout_widthPercent="10%"/>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/textView"
android:background="#80FF4081"
app:layout_heightPercent="80%"
app:layout_marginPercent="4%"
app:layout_widthPercent="10%"/>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/textView1"
android:background="#60FF4081"
app:layout_heightPercent="60%"
app:layout_marginPercent="4%"
app:layout_widthPercent="10%"/>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/textView2"
android:background="#40FF4081"
app:layout_heightPercent="40%"
app:layout_marginPercent="4%"
app:layout_widthPercent="10%"/>
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/textView3"
android:background="#20FF4081"
app:layout_heightPercent="20%"
app:layout_marginPercent="4%"
app:layout_widthPercent="10%"/>
</androidx.percentlayout.widget.PercentRelativeLayout>