欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android屏幕适配(三)--自定义View实现百分比布局适配

程序员文章站 2024-02-05 23:33:40
...

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

dependencies {
    implementation 'com.android.support:percent:27.0.2'
	····
}

二:使用下面两种布局

PercentRelativeLayout
PercentFrameLayout

三:主要属性

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的宽高比

今日重点

如果你不想添加上面的依赖包,毕竟添加依赖会增加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>

**第二步:**新建一个类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();
        }


    }
}

**第三步:**布局中如何使用?代码如下:

<?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>

效果如下:
Android屏幕适配(三)--自定义View实现百分比布局适配