Android Support库百分比布局

之前写过一篇屏幕适配的文章Android 屏幕适配最佳实践，里面提到了类似百分比布局的东西，但是该方法缺点很明显，就会增加很多无用的数据，导致apk包变大。

而谷歌的support库中，增加了一个叫做percent库，该库在如图目录下，如果没有，请使用sdk manager更新至最新

在使用前，我们先看下这个库有哪些类

很明显里面有一个FrameLayout布局的子类和RelativeLayout布局的子类，此外还有一个Helper类，这个Helper类主要是完成百分比的测量工作，里面有一个接口PercentLayoutParams，如果我们自己要实现百分比布局，那么就要实现这个接口。

我们看下谷歌对外公布了什么自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PercentLayout_Layout">
        <attr name="layout_widthPercent" format="fraction"/>
        <attr name="layout_heightPercent" format="fraction"/>
        <attr name="layout_marginPercent" format="fraction"/>
        <attr name="layout_marginLeftPercent" format="fraction"/>
        <attr name="layout_marginTopPercent" format="fraction"/>
        <attr name="layout_marginRightPercent" format="fraction"/>
        <attr name="layout_marginBottomPercent" format="fraction"/>
        <attr name="layout_marginStartPercent" format="fraction"/>
        <attr name="layout_marginEndPercent" format="fraction"/>
    </declare-styleable>
</resources>

看到这些属性应该能直接明白这些属性的意思，其属性值类型为fraction，即小数，百分比。主要属性有宽度，高度占是百分比，外边距的百分比，其中Android MarginLeft与MarginStart的区别参考Android MarginLeft与MarginStart的区别，提取关键内容如下。

在写layout布局的时候，我们会发现有这样几个比较相似的属性：
MarginStart MarginLeft
MarginEnd MarginRight

这些属性的区别是什么? 根据api注释，我们得知MarginStart指的是控件距离开头View部分的间距大小，MarginLeft则指的是控件距离左边View部分的间距大小，MarginEnd和MarginRight同理。

一般情况下，View开始部分就是左边，但是有的语言目前为止还是按照从右往左的顺序来书写的，例如阿拉伯语，在Android 4.2系统之后，Google在Android中引入了RTL布局，更好了支持了由右到左文字布局的显示，为了更好的兼容RTL布局，google推荐使用MarginStart和MarginEnd来替代MarginLeft和MarginRight，这样应用可以在正常的屏幕和由右到左显示文字的屏幕上都保持一致的用户体验。

了解了这些后，我们开始使用PercentRelativeLayout

使用前加入库文件依赖

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

开始编写布局文件，我们要实现的效果如图所示

即左边红色部分宽度占屏幕30%，高度占屏幕90%，右边宽度占屏幕70%，高度各占屏幕45%。在不使用百分比布局之前，我们一般是使用LinearLayout的weight达到这种效果，然而使用weight会增加布局的嵌套，会过度绘制。那么使用百分比布局会变成什么样的，无需布局嵌套，设置高度宽度百分比即可。

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

    >

    <View
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:background="#ff0000"
        app:layout_heightPercent="100%"
        app:layout_marginBottomPercent="10%"
        app:layout_widthPercent="30%"/>
    <View
        android:id="@+id/right_top"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:background="#00ff00"
        app:layout_heightPercent="45%"
        app:layout_widthPercent="70%"/>
    <View
        android:id="@+id/right_bttom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:background="#ffff00"
        app:layout_heightPercent="45%"
        app:layout_marginBottomPercent="10%"
        app:layout_widthPercent="70%"/>
</android.support.percent.PercentRelativeLayout>

我们要设置左边的布局宽度占30%，使用app:layout_widthPercent=”30%”，高度占90%，为了演示另一个属性的使用，这里不直接设置高度为90%，而是设置高度为100%,底边距为10%,即

android:layout_alignParentBottom="true"
app:layout_heightPercent="100%"
app:layout_marginBottomPercent="10%"

同理编写右边两个的布局。

正如文章开头看到的，这个库只提供了两个百分比布局给我们使用，比较常见的线性布局并没有提供对应的百分比布局。因此，我们想能不能自己实现一个呢，答案是肯定的，通过观察现有的两个百分比布局的代码，我们需呀继承原来的布局，即LinearLayout，编写对应的构造方法调用父类。声明一个PercentLayoutHelper对象辅助完成百分比测量，此外还需要重写onMeasure和onLayout方法，以及一个
实现了PercentLayoutHelper.PercentLayoutParams接口的继承原来布局的LayoutParams的LayoutParams。

那么我们新建一个叫PercentLinearLayout的继承LinearLayout的类，实现其构造方法，以及声明一个final的PercentLayoutHelper 对象。

public class PercentLinearLayout extends LinearLayout {
    private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);

    public PercentLinearLayout(Context context) {
        super(context);
    }

    public PercentLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public PercentLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

仿造现有的两个百分比布局实现内部类LayoutParams ，这一步直接复制代码修改一下即可，记得一定要继承自android.widget.LinearLayout.LayoutParams。

   public static class LayoutParams extends android.widget.LinearLayout.LayoutParams implements PercentLayoutHelper.PercentLayoutParams {
        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            this.mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
        }

        public LayoutParams(int width, int height) {
            super(width, height);
        }

        public LayoutParams(android.view.ViewGroup.LayoutParams source) {
            super(source);
        }

        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }

        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
            return this.mPercentLayoutInfo;
        }

        protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
            PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
        }
    }

此外，还要重写一个生成LayoutParams 的方法generateLayoutParams，返回我们的内部类。

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new PercentLinearLayout.LayoutParams(this.getContext(), attrs);
    }

然后重新onLayout和onMeasure方法即可，这一步也不需要自己实现，直接复制代码即可。

   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        this.mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if(this.mHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }

    }

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        this.mHelper.restoreOriginalParams();
    }

就这样，完成了百分比线性布局，我们进行使用下。完成下面的效果，随意发挥的涂鸦。

主要是红色部分，从上到下，高度各为父容器的20%,30%,30%，宽度各为父容器的30%,50%,40，其中第三个靠右边布局，右边距为父容器的20%，同时有上边距为父容器的10%，看代码更直接

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


    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00ff00"
        app:layout_heightPercent="30%"
        app:layout_widthPercent="50%"></View>

    <cn.edu.zafu.percentlayout.PercentLinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="100%"
        android:background="#ff0000"
        android:layout_alignParentBottom="true"
        app:layout_marginBottomPercent="10%"
        android:orientation="vertical"
        >

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ff0ff0"
            app:layout_heightPercent="20%"
            app:layout_widthPercent="30%"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#dedff0"
            app:layout_heightPercent="30%"
            app:layout_widthPercent="50%"
            app:layout_marginTopPercent="10%"
            app:layout_marginLeftPercent="10%"
            />
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#1254f0"
            android:layout_gravity="right"
            app:layout_heightPercent="30%"
            app:layout_widthPercent="40%"
            app:layout_marginTopPercent="10%"
            app:layout_marginRightPercent="20%"
            />
    </cn.edu.zafu.percentlayout.PercentLinearLayout>

</android.support.percent.PercentRelativeLayout>

怎么样，是不是轻轻松松就实现了百分比布局，更多内容自行挖掘，下面上源码
http://download.csdn.net/detail/sbsujjbcy/8853673

eclipse可用的库请见下载链接,将该项目导入eclipse中去,依赖该项目即可使用百分比布局.
http://download.csdn.net/detail/sbsujjbcy/8857747