Android屏幕适配（三）--自定义View实现百分比布局适配_android view屏幕宽高等比例

在Android屏幕适配中百分比布局适配是一种很好的解决方案。
Android其实提供了百分比适配布局，使用方法如下：（这不是今天所说的重点，重点在后边）
一：先添加依赖

dependencies {
    implementation 'com.android.support:percent:27.0.2'
	····
}
1
2
3
4

二：使用下面两种布局

PercentRelativeLayout
PercentFrameLayout
1
2

三：主要属性

app:layout_heightPercent：用百分比表示高度
app:layout_widthPercent：用百分比表示宽度
app:layout_marginPercent：用百分比表示View之间的间隔
app:layout_marginLeftPercent：用百分比表示左边间隔
app:layout_marginRight：用百分比表示右边间隔
app:layout_marginTopPercent：用百分比表示顶部间隔
app:layout_marginBottomPercent：用百分比表示底部间隔
app:layout_marginStartPercent：用百分比表示距离第一个View之间的距离
app:layout_marginEndPercent：用百分比表示距离最后一个View之间的距离
app:layout_aspectRatio：用百分比表示View的宽高比
1
2
3
4
5
6
7
8
9
10

今日重点

如果你不想添加上面的依赖包，毕竟添加依赖会增加app的体积，而且想用百分比布局的话。不妨自己手写一个百分比布局。
实现原理：
一、自定义属性来设置view的宽、高、边距、等百分比属性，
二、根据父容器的宽高与设置的百分比属性来计算出子view 的宽高。

开撸代码：

**第一步：**自定义view–自定义属性
在values下新建attrs.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PercentLayout">
        <attr name="widthPercent" format="float"/>
        <attr name="heightPercent" format="float"/>
        <attr name="marginLeftPercent" format="float"/>
        <attr name="marginRightPercent" format="float"/>
        <attr name="marginTopPercent" format="float"/>
        <attr name="marginBottomPercent" format="float"/>
    </declare-styleable>
</resources>

1
2
3
4
5
6
7
8
9
10
11
12

**第二步：**新建一个类PercentLayout继承RelativeLayout，代码如下：

/**
 * 自定义View
 * 百分比布局
 */
public class PercentLayout extends RelativeLayout {
    public PercentLayout(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取父容器的尺寸
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int count = getChildCount();
        for (int i =0;i < count ; i ++){
            View child = getChildAt(i);
            ViewGroup.LayoutParams params = child.getLayoutParams();
            //如果说是百分比布局属性
            if (checkLayoutParams(params)){
                LayoutParams lp = (LayoutParams) params;
                 float widthPercent = lp.widthPercent;
                 float heightPercent = lp.heightPercent;
                 float marginLeftPercent = lp.marginLeftPercent;
                 float marginRightPercent = lp.marginRightPercent;
                 float marginTopPercent = lp.marginTopPercent;
                 float marginBottomPercent = lp.marginBottomPercent;

                 if (widthPercent > 0){
                     params.width = (int) (widthSize * widthPercent);
                 }
                 if (widthPercent > 0){
                     params.height = (int) (heightSize * heightPercent);
                 }
                 if (widthPercent > 0){
                     ((LayoutParams) params).leftMargin = (int) (widthSize * marginLeftPercent);
                 }
                 if (widthPercent > 0){
                     ((LayoutParams) params).rightMargin = (int) (widthSize * marginRightPercent);
                 }
                 if (widthPercent > 0){
                     ((LayoutParams) params).topMargin = (int) (heightSize * marginTopPercent);
                 }
                 if (widthPercent > 0){
                     ((LayoutParams) params).bottomMargin = (int) (heightSize * marginBottomPercent);
                 }

            }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

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



    public static class LayoutParams extends RelativeLayout.LayoutParams{
        private float widthPercent;
        private float heightPercent;
        private float marginLeftPercent;
        private float marginRightPercent;
        private float marginTopPercent;
        private float marginBottomPercent;

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            //解析自定义属性
            TypedArray a = c.obtainStyledAttributes(attrs,R.styleable.PercentLayout);
            widthPercent = a.getFloat(R.styleable.PercentLayout_widthPercent,0);
            heightPercent = a.getFloat(R.styleable.PercentLayout_heightPercent,0);
            marginLeftPercent = a.getFloat(R.styleable.PercentLayout_marginLeftPercent,0);
            marginRightPercent = a.getFloat(R.styleable.PercentLayout_marginRightPercent,0);
            marginTopPercent = a.getFloat(R.styleable.PercentLayout_marginTopPercent,0);
            marginBottomPercent = a.getFloat(R.styleable.PercentLayout_marginBottomPercent,0);
            a.recycle();
        }


    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

**第三步：**布局中如何使用？代码如下：

<?xml version="1.0" encoding="utf-8"?>
<com.yulore.screenadapterdemo.PercentLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="设置宽50%高50%"
        app:widthPercent = "0.5"
        android:background="@color/colorPrimary"
        app:heightPercent = "0.5"/>

</com.yulore.screenadapterdemo.PercentLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如下：