android屏幕适配方案二（百分比布局）

梦里梦外; 2022-06-08 00:28 695阅读 0赞

# 一，百分比布局库android-percent-support介绍 #

百分比布局库中提供了两种布局可以设置百分比：PercentRelativeLayout、PercentFrameLayout。

这两个百分比布局都有以下九个布局属性，值都是用百分比来表示宽度、高度、margin值，使用时候需要父布局为百分比布局，child控件才可以使用这九个布局属性：

*  app:layout\_heightPercent
 *  app:layout\_widthPercent
 *  app:layout\_marginPercent
 *  app:layout\_marginTopPercent
 *  app:layout\_marginBottomPercent
 *  app:layout\_marginLeftPercent
 *  app:layout\_marginRightPercent
 *  app:layout\_marginStartPercent
 *  app:layout\_marginEndPercent

可以看到支持宽高，以及margin。

也就是说，大家只要在开发过程中使用PercentRelativeLayout、PercentFrameLayout替换FrameLayout、RelativeLayout即可。

# 二，百分比布局使用 #

关于使用，其实及其简单，并且github上也有例子，[android-percent-support-lib-sample][]。我们就简单过一下：

首先记得在build.gradle添加：

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

## (一) PercentFrameLayout ##

<?xml version="1.0" encoding="utf-8"?>
    <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:layout_width="0dp" android:layout_height="0dp" android:layout_gravity="left|top" android:background="#44ff0000" android:text="width:30%,height:20%" app:layout_heightPercent="20%" android:gravity="center" app:layout_widthPercent="30%"/>
    
        <TextView android:layout_width="0dp" android:layout_height="0dp" android:layout_gravity="right|top" android:gravity="center" android:background="#4400ff00" android:text="width:70%,height:20%" app:layout_heightPercent="20%" app:layout_widthPercent="70%"/>
    
    
        <TextView android:layout_width="0dp" android:layout_height="0dp" android:layout_gravity="bottom" android:background="#770000ff" android:text="width:100%,height:10%" android:gravity="center" app:layout_heightPercent="10%" app:layout_widthPercent="100%"/>
    
    
    </android.support.percent.PercentFrameLayout>

3个TextView，很简单，直接看效果图：  
![这里写图片描述][SouthEast]

## (二) PercentRelativeLayout ##

<?xml version="1.0" encoding="utf-8"?>
    <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:clickable="true">
    
        <TextView android:id="@+id/row_one_item_one" android:layout_width="0dp" android:layout_height="0dp" android:layout_alignParentTop="true" android:background="#7700ff00" android:text="w:70%,h:20%" android:gravity="center" app:layout_heightPercent="20%" app:layout_widthPercent="70%"/>
    
        <TextView android:id="@+id/row_one_item_two" android:layout_width="0dp" android:layout_height="0dp" android:layout_toRightOf="@+id/row_one_item_one" android:background="#396190" android:text="w:30%,h:20%" app:layout_heightPercent="20%" android:gravity="center" app:layout_widthPercent="30%"/>
    
    
        <ImageView android:id="@+id/row_two_item_one" android:layout_width="match_parent" android:layout_height="0dp" android:src="@drawable/tangyan" android:scaleType="centerCrop" android:layout_below="@+id/row_one_item_one" android:background="#d89695" app:layout_heightPercent="70%"/>
    
        <TextView android:layout_width="0dp" android:layout_height="0dp" android:layout_below="@id/row_two_item_one" android:background="#770000ff" android:gravity="center" android:text="width:100%,height:10%" app:layout_heightPercent="10%" app:layout_widthPercent="100%"/>
    
    
    </android.support.percent.PercentRelativeLayout>

![这里写图片描述][SouthEast 1]

## (三) 使用注意 ##

其实PercentRelativeLayout 和PercentFrameLayout就是多了九个布局属性的RelativeLayout 和FrameLayout，用法完全和这两个布局一样，不过只有父布局是百分比布局（PercentRelativeLayout和PercentFrameLayout ）的时候，child才能使用百分比布局属性进行布局，否则无效，如：

<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">
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="width=50%"
            app:layout_widthPercent="50%" />
        </LinearLayout>
    </android.support.percent.PercentRelativeLayout>

这样设置Button的宽度并不会是父布局宽度的一半，因为child用百分比只对父布局是百分比布局才有效。

# 三、实现PercentLinearlayout #

### (一) PercentLinearLayout ###

package com.juliengenoud.percentsamples;
    
    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 zhy on 15/6/30. */
    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.juliengenoud.percentsamples.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" android:background="#ff44aacc" android:text="width:60%,height:5%" android:textColor="#ffffff" app:layout_heightPercent="5%" app:layout_marginBottomPercent="5%" app:layout_widthPercent="60%"/>
    
        <TextView android:layout_width="0dp" android:layout_height="0dp" android:background="#ff4400cc" android:gravity="center" android:textColor="#ffffff" android:text="width:70%,height:10%" app:layout_heightPercent="10%" app:layout_marginBottomPercent="5%" app:layout_widthPercent="70%"/>
        <TextView android:layout_width="0dp" android:layout_height="0dp" android:background="#ff44aacc" android:gravity="center" android:text="width:80%,height:15%" android:textColor="#ffffff" app:layout_heightPercent="15%" app:layout_marginBottomPercent="5%" app:layout_widthPercent="80%"/>
        <TextView android:layout_width="0dp" android:layout_height="0dp" android:background="#ff4400cc" android:gravity="center" android:text="width:90%,height:5%" android:textColor="#ffffff" app:layout_heightPercent="20%" app:layout_marginBottomPercent="10%" app:layout_widthPercent="90%"/>
    
        <TextView android:layout_width="match_parent" android:layout_height="0dp" android:background="#ff44aacc" android:gravity="center" android:text="width:100%,height:25%" android:textColor="#ffffff" app:layout_heightPercent="25%" app:layout_marginBottomPercent="5%" />
    
    
    </com.juliengenoud.percentsamples.PercentLinearLayout>

我们纵向排列的几个TextView，分别设置宽/高都为百分比，且之间的间隔为5%p。  
![这里写图片描述][SouthEast 2]

# 四，固定比例属性 layout\_aspectRatio #

**注意：layout\_aspectRatio属性需要在23.3.0版本以上才能使用**

详细解释请见：[http://blog.csdn.net/zcn596785154/article/details/76855499][http_blog.csdn.net_zcn596785154_article_details_76855499]

PercentLayout是百分比控件, 使用百分比属性创建控件. 除了常用的百分比, 也可以使用固定比例进行布局(aspect ratio)

PercentLayout布局, 提供宽度和比例, 自动适配高度.

<android.support.percent.PercentRelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_below="@+id/main_text">
       <ImageView
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#FF1493"
          app:layout_aspectRatio="@fraction/header_aspectRatio"
          app:layout_widthPercent="50%"/>
    
    </android.support.percent.PercentRelativeLayout>

比例的资源文件, fractions.xml.

178%的含义是16:9.  //宽：高

文章参考：

[Android 百分比布局库(percent-support-lib) 解析与扩展][android-percent-support-lib-sample]

[PercentLayout的固定比例][PercentLayout]

[Android百分比布局支持库（android-percent-support）][Android_android-percent-support]

[android-percent-support-lib-sample]: http://blog.csdn.net/lmj623565791/article/details/46695347
[SouthEast]: /images/20220608/58c770864ba044cb82c6e864e3882b74.png
[SouthEast 1]: /images/20220608/a02ec8ad24bd4969999b1c7e4bb2d02e.png
[SouthEast 2]: /images/20220608/b7c56e94c13c47be98847387e39d9f1e.png
[http_blog.csdn.net_zcn596785154_article_details_76855499]: http://blog.csdn.net/zcn596785154/article/details/76855499
[PercentLayout]: http://blog.csdn.net/caroline_wendy/article/details/50107829
[Android_android-percent-support]: http://blog.csdn.net/u010687392/article/details/48090765