Android 中百分比布局

为什么使用百分比布局

由于Android系统的碎片化发展导致了市面上多种分辨率、多种屏幕密度共存，这对我们的屏幕适配增加了不少的难度，在布局方面我们都知道可以通过LinearLayout的layout_weight属性来进行适配，但是在某些情况下我们要向用这种方法进行适配就必须进行多层布局嵌套，而这则会导致布局文件复杂，增加渲染层次，致使性能下降。针对这种情况google为我们提供了一个百分比布局兼容库：Android Percent Support Library，解决了上述的问题，目前它支持RelativeLayout和FrameLayout的百分比布局，不过已经有大牛在GitHub上面开源了LinearLayout的百分比布局支持库。

添加依赖：

//百分比布局依赖
    compile 'com.android.support:percent:26.0.0-alpha1'

在函数库里面我们主要用到两个类：

• PercentRelativeLayout
• PercentFrameLayout

它们主要有以下属性

• app:layout_heightPercent：用百分比表示高度
• app:layout_widthPercent：用百分比表示宽度
• app:layout_marginPercent：用百分比表示View之间的间隔
• app:layout_marginLeftPercent：用百分比表示左边间隔
• app:layout_marginRight：用百分比表示右边间隔
• app:layout_marginTopPercent：用百分比表示顶部间隔
• app:layout_marginBottomPercent：用百分比表示底部间隔
• app:layout_marginStartPercent：用百分比表示距离第一个View之间的距离
• app:layout_marginEndPercent：用百分比表示距离最后一个View之间的距离
• app:layout_aspectRatio：用百分比表示View的宽高比

实例：

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <TextView
        android:layout_alignParentBottom="true"
        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%"
        android:text="100%"
        android:gravity="center"
        />

    <TextView
        android:layout_alignParentBottom="true"
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView"
        android:background="#8FFF4081"
        app:layout_heightPercent="80%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"
        android:text="80%"
        android:gravity="center"
        />

    <TextView
        android:layout_alignParentBottom="true"
        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%"
        android:text="60%"
        android:gravity="center"
        />

    <TextView
        android:layout_alignParentBottom="true"
        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%"
        android:text="40%"
        android:gravity="center"
        />

    <TextView
        android:layout_alignParentBottom="true"
        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%"
        android:text="20%"
        android:gravity="center"
        />
</android.support.percent.PercentRelativeLayout>

结果：