在大多數(shù)的Android應用的開發(fā)中,我們主要使用三種類型的布局:LinearLayout,RelativeLayout和FrameLayout。在創(chuàng)建某些復雜的布局時，我們需要使用weight屬性來分配視圖比例。但在使用weight屬性時，我們要添加一個默認的容器視圖來封裝我們的子視圖。這種方法的問題是它增加了一個額外的視圖層次布局，除去為了使用weight屬性的原因，這層布局則是完全多余的一種存在。

Android在新的support包中引入了一種新的布局叫做PercentRelativeLayout，我們可以認為它把RelativeLayout和weight屬性結(jié)合了起來。PercentRelativeLayout繼承于RelativeLayout，但是它新添加了一個percentage特點。我們可以對它其中包含的視圖組件的一些屬性相對于父布局來設置百分比，例如寬度,高度,以及外邊距等。使用PercentRelativeLayout我們可以更好更方便的對不同分辨率設備進行適配，同時可以減少布局的復雜度。

為了使用PercentRelativeLayout，我們需要在項目的build.gradle文件中添加如下依賴:

compile 'com.android.support:percent:25.3.0'

下面一個小例子演示了如何使用該新控件，以及和使用LinearLayout下的布局層次差異。首先我們使用LinearLayout來布局：

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

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:weightSum="4">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1.5"

        android:gravity="center">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="MAIN HEADER"

            android:textSize="50dp" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:orientation="vertical">

        <TextView

            android:id="@+id/textview_sub_header"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="20dp"

            android:gravity="center"

            android:text="Sub Header"

            android:textSize="25dp" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="0.5"

        android:orientation="horizontal">

        <Button

            android:id="@+id/button"

            android:layout_width="match_parent"

            android:layout_height="80dp"

            android:background="@android:color/holo_blue_light"

            android:text="Button"

            android:textColor="@android:color/white"

            android:textSize="25dp"

            android:textStyle="bold" />

    </LinearLayout>

    <TextView

        android:id="@+id/textview_bottom_text"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1.0"

        android:gravity="center"

        android:text="BOTTOM TEXT"

        android:textSize="20dp" />

</LinearLayout>

我們再使用PercentRelativeLayout來搭建相同的布局：

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

    <TextView

        android:id="@+id/textview_title"

        android:layout_centerHorizontal="true"

        android:gravity="center"

        android:text="MAIN HEADER"

        android:textSize="50dp"

        app:layout_heightPercent="10%"

        app:layout_marginTopPercent="14%"

        app:layout_widthPercent="100%" />

    <TextView

        android:id="@+id/textview_sub_header"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textview_title"

        android:gravity="center"

        android:text="Sub Header"

        android:textSize="25dp"

        app:layout_marginTopPercent="17%"

        app:layout_widthPercent="100%" />

    <Button

        android:id="@+id/button_blogger"

        android:layout_below="@+id/textview_sub_header"

        android:background="@android:color/holo_blue_light"

        android:text="button"

        android:textColor="@android:color/white"

        android:textSize="25dp"

        android:textStyle="bold"

        app:layout_heightPercent="13%"

        app:layout_marginTopPercent="16%"

        app:layout_widthPercent="100%" />

    <TextView

        android:id="@+id/textview_bottom_text"

        android:layout_height="match_parent"

        android:layout_below="@+id/button_blogger"

        android:gravity="center"

        android:text="BOTTOM TEXT"

        android:textSize="20dp"

        app:layout_widthPercent="100%" />

</android.support.percent.PercentRelativeLayout>

編譯運行，左右兩圖分別為通過LinearLayout和PercentRelativeLayout搭建的界面，可以看到界面展示效果一致：

我們再使用Android布局查看工具view hierarchy，如下兩圖分別為通過LinearLayout和PercentRelativeLayout搭建的布局情況，發(fā)現(xiàn)使用PercentRelativeLayout后我們成功減少了一個布局層次：