9.Android開發筆記:布局控件(四) 百分比布局


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會開始進行同步,把我們新添加的百分比布局庫引入到項目當中。

  1. app/main/res/layout-->右鍵, new ->Layout Resource File:

​ Root element 選擇 :PercentFrameLayout

  1. 新增 xmlns:app
  xmlns:app="http://schemas.android.com/apk/res-auto

​ 由於百分比布局並不是內置在系統SDK當中的,所以需要把完整的包路徑寫出來。然后還必須定義一個app的命名空間,這樣才能使用百分比布局的自定義屬性。

注意這些屬性沒有代碼提示功能,要自己輸入

  1. 完整代碼:
<?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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM