Android百分比布局

  以往在写网页中我们经常用到百分比布局，现在在Android中我们也可以百分比布局，为屏幕适配带来一些方便。在使用时导入android-percent-support-lib-sample包。

使用说明：
1.需要在build.gradle文件当中导入以下内容：
dependencies {
    compile 'com.android.support:percent:24.4.0'
}
2.这个库提供了包android.support.percent
这里包括了两种布局：
    PercentRelativeLayout、PercentFrameLayout，通过名字就可以看出，这是继承自FrameLayout和RelativeLayout两个容器类；
android.support.percent.PercentRelativeLayout
android.support.percent.PercentFrameLayout

支持的属性有：
    layout_widthPercent、layout_heightPercent、
    layout_marginPercent、layout_marginLeftPercent、
    layout_marginTopPercent、layout_marginRightPercent、
    layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。

可以看到百分比布局支持宽高，以及margin属性。
只要在开发过程中使用PercentRelativeLayout、PercentFrameLayout替换FrameLayout、RelativeLayout。

实例：

<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:orientation="vertical">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="30%"
        android:background="#00ff00"
        android:gravity="center"
        android:text="w-30%,h-20%"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="70%"
        android:background="#ff0000"
        android:layout_toRightOf="@+id/tv1"
        android:gravity="center"
        android:text="w-70%,h-20%"/>

    <TextView
        android:id="@+id/tv3"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"
        android:layout_alignParentBottom="true"
        android:layout_width="0dp"
        android:background="#ffff00"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="w-50%,h-50%"/>
</android.support.percent.PercentRelativeLayout>

效果：

实例二：

<android.support.percent.PercentFrameLayout
    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/tv1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:background="#ff00ff"
        />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_gravity="right|top"
        android:background="#00ffff"/>

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="80%"
        android:background="#ffff00"
        app:layout_marginTopPercent="30%"/>

    <ImageView
        android:id="@+id/iv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_marginTopPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="100%"
        android:src="@mipmap/ali"
        android:scaleType="centerCrop"/>
</android.support.percent.PercentFrameLayout>

可以通过自定义实现线性百分比布局：

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);
        }

    }
}

<com.xinyuliu.imageproject.custom.PercentLinearLayout
    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:orientation="vertical">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="40%"
        android:background="#00ff00"
        app:layout_marginBottomPercent="5%"/>

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="60%"
        android:background="#ff0000"
        />
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="80%"
        app:layout_marginTopPercent="5%"
        android:background="#0000ff"/>
</com.xinyuliu.imageproject.custom.PercentLinearLayout>

通过导入com.zhy.android.percent.support.PercentFrameLayout实现居中布局：

<com.zhy.android.percent.support.PercentFrameLayout
    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">


    <com.zhy.android.percent.support.PercentFrameLayout
        android:id="@+id/percentflayout01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center"
        app:layout_heightPercent="50%w"
        app:layout_widthPercent="50%w"
        android:background="#ff0000">
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_heightPercent="25%w"
            app:layout_widthPercent="25%w"
            android:layout_gravity="center"
            android:background="#00ff00"/>
    </com.zhy.android.percent.support.PercentFrameLayout>


</com.zhy.android.percent.support.PercentFrameLayout>