Android 百分比布局讲解

1 前沿

android 推出了百分比布局，有了这个布局我们按照百分比来分配屏幕。大家是不是听了很激动？下面我们来慢慢讲解。

2 控件介绍

2.1 控件介绍

我们来看一下这几个百分比控件：

1. PercentRelativeLayout
2. PercentFrameLayout.

它们分别继承了FrameLayout和RelativeLayout两个容器类。大家可能奇怪为什么没有PercentLinearLayout控件呢？这个android确实没给出，但是我们可以自己做一个嘛！

2.2 支持的属性

layout_widthPercent、
layout_heightPercent、 
layout_marginPercent、
layout_marginLeftPercent、 
layout_marginTopPercent、
layout_marginRightPercent、 
layout_marginBottomPercent、
layout_marginStartPercent、
layout_marginEndPercent

上面这些是百分比宽度和margin属性，具体使用请继续看。

3 使用步骤

1. 在build.gradle添加：

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

2. 使用控件

<?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"
    android:orientation="vertical">
    <Button
        android:id="@+id/button1"
        android:text="左按钮"
        android:background="#FBAFB0"
        android:layout_alignParentLeft="true"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="100%"
        app:layout_widthPercent="70%"/>
         />
    <Button
        android:id="@+id/button2"
        android:text="右按钮"
        android:background="#A5F4AF"
        android:layout_alignParentRight="true"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="100%"
        app:layout_widthPercent="30%"
        />
</android.support.percent.PercentRelativeLayout>

3. 效果图

是不是很简单啊。下面我们再自己做一个PercentLinearLayout.

4 PercentLinearLayout代码

import android.content.Context;
import android.content.res.TypedArray;
import android.support.percent.PercentLayoutHelper;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.LinearLayout;

/**
 * Created by Yyd on 2017-01-09.
 */
public class PercentLinearLayout extends LinearLayout {

    private PercentLayoutHelper mPercentLayoutHelper;

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

        mPercentLayoutHelper = new PercentLayoutHelper(this);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mPercentLayoutHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mPercentLayoutHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        mPercentLayoutHelper.restoreOriginalParams();
    }

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


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

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

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

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

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


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

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

    }

}

5 结尾

注：本文参照鸿洋大神写的文章，因源码我还没有研究明白，所以只记录如何使用。等我研究明白再补充。

6 参考文档

1.Android 百分比布局库(percent-support-lib) 解析与扩展
2.PercentRelativeLayout 源码解析