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

    相信你們都已經對Android API所提供的佈局方式很是熟悉了。也許在接觸Android的時候都有過這樣的想法,若是能夠按照百分比的方式進行界面佈局,這樣適配各類屏幕就簡單多了吧!谷歌正式提供百分比佈局支持庫(android-support-percent-lib)。固然了android-percent-support這個庫,基本能夠解決上述問題,下面咱們將對這個支持庫進行介紹java

這個庫提供了:android

  • 兩種佈局供你們使用: 
    PercentRelativeLayout、PercentFrameLayout,經過名字就能夠看出,這是繼承自FrameLayout和RelativeLayout兩個容器類;
    git

  • 支持的屬性有:github

        layout_widthPercent、layout_heightPercent、 app

        layout_marginPercent、layout_marginLeftPercent、 佈局

        layout_marginTopPercent、layout_marginRightPercent、 gradle

        layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。ui

        能夠看到支持寬高,以及margin。spa

也就是說,你們只要在開發過程當中使用PercentRelativeLayout、PercentFrameLayout替換FrameLayout、RelativeLayout便可。code

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


使用:

關於使用,其實及其簡單,而且github上也有例子,android-percent-support-lib-sample

使用Android studiobuild.gradle添加如下信息就能夠獲取支持庫,固然了,若是你沒有下載到該支持庫會提示你下載。

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

(一)PercentFrameLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.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">

    <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>


3個TextView,很簡單,直接看效果圖:


(二) PercentRelativeLayout

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

<android.support.percent.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"
    android:clickable="true">

    <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>


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

使用沒什麼好說的,就是直觀的看一下。

相關文章
相關標籤/搜索