Percent Library百分比布局详解

PercentLibrary是Google在15年推出的一个支持百分比布局的类库，支持的相对布局和帧布局，不过网上有的人已经扩展出支持线性布局。这个类库的使用是非常的简单的，我们需要了解的只有两个类：android.support.percent.PercentRelativeLayout和android.support.percent.PercentFrameLayout分别对于上面的两个布局。

两个布局都是继承自对应的基本布局，都拥有下面的属性：

layout_widthPercent
layout_heightPercen
layout_marginPercent
layout_marginLeftPercent
layout_marginTopPercent
layout_marginRightPercent
layout_marginBottomPercent
layout_marginStartPercent
layout_marginEndPercent
layout_aspectRatio

其实很简单，大致就3类：宽高、margin、宽高比。

使用步骤：

1、在gradle中引入类库：compile 'com.android.support:percent:25.3.1'

2、将对应的相对布局和帧布局替换成对应的百分比布局

3、将百分比布局下的子布局的宽高设为0，使用上面的属性设置其宽高。

因为非常的简单，这里我直接贴出一个效果图然后贴出布局代码，java中不需要编写任何的代码。

效果图：

对应的代码：

<?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:background="#229961">

    <ScrollView
        android:id="@+id/left_line"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_widthPercent="49%">

        <android.support.percent.PercentRelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imgv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@drawable/first"
                app:layout_heightPercent="30%"
                app:layout_marginBottomPercent="1%" />

            <ImageView
                android:id="@+id/imgv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/imgv1"
                android:scaleType="fitXY"
                android:src="@drawable/secend"
                app:layout_heightPercent="30%" />

            <ImageView
                android:id="@+id/imgv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/imgv2"
                android:scaleType="fitXY"
                app:layout_marginTopPercent="1%"
                android:src="@drawable/third"
                app:layout_heightPercent="30%" />

            <ImageView
                android:id="@+id/imgv4"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_below="@+id/imgv3"
                android:scaleType="fitXY"
                android:src="@drawable/four"    app:layout_marginTopPercent="1%"
                app:layout_heightPercent="30%" />

            <ImageView
                android:id="@+id/imgv5"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_below="@+id/imgv4"
                android:scaleType="fitXY"
                android:src="@drawable/five"
                android:background="#ccc"
                app:layout_marginTopPercent="1%"
                app:layout_heightPercent="30%" />
        </android.support.percent.PercentRelativeLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@+id/right_line"
        android:layout_toRightOf="@id/left_line"
        android:background="@drawable/background_gradient">

    </LinearLayout>

    <ScrollView
        android:id="@+id/right_line"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        app:layout_widthPercent="49%">

        <android.support.percent.PercentRelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imgv6"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:scaleType="fitXY"
                android:src="@drawable/six"
                app:layout_aspectRatio="70%"
                app:layout_widthPercent="100%" />

            <ImageView
                android:id="@+id/imgv7"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_below="@+id/imgv6"
                android:scaleType="fitXY"
                android:src="@drawable/seven"
                app:layout_aspectRatio="70%"
                app:layout_widthPercent="100%" />

            <ImageView
                android:id="@+id/imgv8"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_below="@+id/imgv7"
                android:layout_centerHorizontal="true"
                android:scaleType="fitXY"
                android:src="@drawable/eight"
                app:layout_aspectRatio="70%"
                app:layout_widthPercent="70%" />

            <ImageView
                android:id="@+id/imgv9"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_below="@+id/imgv8"
                android:scaleType="fitXY"
                android:src="@drawable/nine"
                app:layout_heightPercent="50%"
                app:layout_widthPercent="100%" />

            <ImageView
                android:id="@+id/imgv10"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_below="@+id/imgv9"
                android:scaleType="fitXY"
                android:src="@drawable/ten" />

        </android.support.percent.PercentRelativeLayout>
    </ScrollView>
</android.support.percent.PercentRelativeLayout>

最近去官网查看发现，现在google推荐使用ConstraintLayout来代替该类库。尽管如此，我们还是有必要知道有这个类库的，而以后我会给ConstraintLayout的使用详细的介绍给大家。最后贴上demo吧：点击打开链接

欢迎关注我的微信公众号“android教科书”，最新最好的文章第一时间送到手！可以扫描下面的二维码来关注：