屏幕适配之百分比布局

前言

刚刚复习多屏幕适配的时候，想到之所以要对手机屏幕进行适配，是因为Android手机的屏幕碎片化太过于严重。但转念一想，电脑屏幕的碎片化相对于手机只会有过之无不及吧，网上查找了下，发现前端之所以没有强调屏幕适配，是因为它们引入了百分比。

然后谷歌搜了下，才发现去年(2015年)谷歌就已经在Android中引入了百分比来适配不同的屏幕，原来我已经out了……

百分比布局介绍

谷歌目前只提供了 PercentRelativeLayout 以及 PercentFrameLayout 的两种布局，它们支持的属性有：

layout_widthPercent、layout_heightPercent

layout_marginPercent、layout_marginLeftPercent

layout_marginTopPercent、layout_marginRightPercent

layout_marginBottomPercent、layout_marginStartPercent

layout_marginEndPercent

在此基础上鸿洋大神提供了 PercentLinearLayout (见博客)，并已经引入到Github中。

使用步骤

1.在gradle文件中添加依赖

dependencies {
    compile 'com.android.support:percent:22.2.0'
}

2.鸿洋大神实现的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;

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

百分比线性布局

<?xml version="1.0" encoding="utf-8"?>
<com.myapplication.view.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:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="10%"
        android:background="#d1f756"
        android:gravity="center"
        android:text="width:50% height:10%"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_widthPercent="80%"
        app:layout_heightPercent="10%"
        app:layout_marginTopPercent="1%"
        android:background="#56f7b1"
        android:gravity="center"
        android:text="width:80% height:10%"/>
  
</com.myapplication.view.PercentLinearLayout>

百分比相对布局

<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/top_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="#ff44aacc"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="70%" />

    <View
        android:id="@+id/top_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/top_left"
        android:background="#ffe40000"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="30%" />


    <View
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/top_left"
        android:background="#ff00ff22"
        app:layout_heightPercent="80%" />
</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">
        <!-- ... XML CODE -->
</android.support.percent.PercentFrameLayout>