Android5.0+(Percent 百分比布局)

jopen 9年前發布 | 182K 次閱讀 Android開發移動開發 Android5.0

相信大家都已經對Android API所提供的布局方式非常熟悉了。也許在接觸Android的時候都有過這樣的想法，如果可以按照百分比的方式進行界面布局，這樣適配各種屏幕就簡單多了吧！谷歌正式提供百分比布局支持庫（android-support-percent-lib）。當然了android-percent-support這個庫，基本可以解決上述問題，下面我們將對這個支持庫進行介紹

這個庫提供了：

兩種布局供大家使用：
PercentRelativeLayout、PercentFrameLayout，通過名字就可以看出，這是繼承自FrameLayout和RelativeLayout兩個容器類；
</li>

支持的屬性有：

</li> </ul>

layout_widthPercent、layout_heightPercent、

layout_marginPercent、layout_marginLeftPercent、

layout_marginTopPercent、layout_marginRightPercent、

layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。

可以看到支持寬高，以及margin。

也就是說，大家只要在開發過程中使用PercentRelativeLayout、PercentFrameLayout替換FrameLayout、RelativeLayout即可。

官方文檔地址：https://juliengenoud.github.io/android-percent-support-lib-sample/

使用：

關于使用，其實及其簡單，并且github上也有例子，android-percent-support-lib-sample。

使用Android studio在build.gradle添加以下信息就可以獲取支持庫，當然了，如果你沒有下載到該支持庫會提示你下載。

dependencies {
 
    compile 'com.android.support:percent:22.2.0'
 
}

（一）PercentFrameLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout    
xmlns:android="
    <TextView        
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="left|top"
        android:background="#44ff0000"
        android:text="width:30%,height:20%"
        app:layout_heightPercent="20%"
        android:gravity="center"
        app:layout_widthPercent="30%"/>
    <TextView        
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="right|top"
        android:gravity="center"
        android:background="#4400ff00"
        android:text="width:70%,height:20%"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="70%"/>
    <TextView        
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="bottom"
        android:background="#770000ff"
        android:text="width:100%,height:10%"
        android:gravity="center"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="100%"/>
</android.support.percent.PercentFrameLayout></pre> 

3個TextView，很簡單，直接看效果圖： 

 


 (二) PercentRelativeLayout 

<?xml version="1.0" encoding="utf-8"?> 

<android.support.percent.PercentRelativeLayout    xmlns:android="
    <TextView        
        android:id="@+id/row_one_item_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="#7700ff00"
        android:text="w:70%,h:20%"
        android:gravity="center"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="70%"/>
    <TextView        
        android:id="@+id/row_one_item_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@+id/row_one_item_one"
        android:background="#396190"
        android:text="w:30%,h:20%"
        app:layout_heightPercent="20%"
        android:gravity="center"
        app:layout_widthPercent="30%"/>
    <ImageView        
        android:id="@+id/row_two_item_one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:src="@drawable/tangyan"
        android:scaleType="centerCrop"
        android:layout_below="@+id/row_one_item_one"
        android:background="#d89695"
        app:layout_heightPercent="70%"/>
    <TextView        
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/row_two_item_one"
        android:background="#770000ff"
        android:gravity="center"
        android:text="width:100%,height:10%"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="100%"/>
</android.support.percent.PercentRelativeLayout></pre> 

ok，依然是直接看效果圖: 

 

使用沒什么好說的，就是直觀的看一下。