Android 屏幕适配之百分比库适配

百分比库 android-percent-support 实现了Android 百分比布局功能

 

 

GitHub链接：https://github.com/JulienGenoud/android-percent-support-lib-sample

 

 

 

下面讲述如何使用

 

 

1.添加依赖

 

com.android.support:percent:25.3.0  如下图

 

 

 

 

这个库提供了两种布局

PercentRelativeLayout和PercentFrameLayout

通过名字就可以看出，这是继承自FrameLayout和RelativeLayout两个容器类。

 

 

 

2.PercentRelativeLayout使用

 

2.1.PercentRelativeLayout源码

public class PercentRelativeLayout extends RelativeLayout {
    private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);

    public PercentRelativeLayout(Context context) {
        super(context);
    }

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

    public PercentRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHelper.restoreOriginalParams();
    }

    public static class LayoutParams extends RelativeLayout.LayoutParams
            implements PercentLayoutHelper.PercentLayoutParams {
        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
        }

        public LayoutParams(int width, int height) {
            super(width, height);
        }

        public LayoutParams(ViewGroup.LayoutParams source) {
            super(source);
        }

        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }

        @Override
        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
            if (mPercentLayoutInfo == null) {
                mPercentLayoutInfo = new PercentLayoutHelper.PercentLayoutInfo();
            }

            return mPercentLayoutInfo;
        }

        @Override
        protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
            PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
        }
    }
}

 

 

2.2.PercentRelativeLayout属性

 

因为PercentRelativeLayout继承自RelativeLayout，所以RelativeLayout的属性全部都适用于PercentRelativeLayout。PercentRelativeLayout也有自己独特的属性

 

app:layout_widthPercent：View的宽度是多少%

 

app:layout_heightPercent：View的高度是多少%

 

app:layout_marginPercent :View距离参照物上下左右是多少%

 

app:layout_marginLeftPercent：View距离参照物左边是多少%

 

app:layout_marginRightPercent：View距离参照物右边是多少%

 

app:layout_marginTopPercent：View距离参照物上面是多少%

 

app:layout_marginBottomPercent：View距离参照物下面是多少%
 

 

其他：

 

app:layout_marginStartPercent

 

app:layout_marginEndPercent

 

 

 

2.3.Demo说明

 

2.3.1.布局文件

<?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.support.percent.PercentRelativeLayout
        android:id="@+id/activity_percentage_layout1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_heightPercent="15%">

        <ImageView
            android:id="@+id/activity_percentage_imageview1"
            android:scaleType="fitXY"
            android:src="@mipmap/sb"
            app:layout_heightPercent="70%"
            app:layout_marginBottomPercent="15%"
            app:layout_marginLeftPercent="2%"
            app:layout_marginTopPercent="15%"
            app:layout_widthPercent="20%" />

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/activity_percentage_layout2"
            android:layout_width="match_parent"
            android:layout_toRightOf="@+id/activity_percentage_imageview1"
            app:layout_heightPercent="70%"
            app:layout_marginBottomPercent="15%"
            app:layout_marginLeftPercent="2%"
            app:layout_marginRightPercent="2%"
            app:layout_marginTopPercent="15%">

            <TextView
                android:id="@+id/activity_percentage_textview1"
                android:layout_width="match_parent"
                android:ellipsize="end"
                android:gravity="center|left"
                android:singleLine="true"
                android:text="这个库提供了两种布局"
                android:textColor="#000000"
                android:textSize="18sp"
                app:layout_heightPercent="50%" />

            <TextView
                android:id="@+id/activity_percentage_textview2"
                android:layout_width="match_parent"
                android:layout_below="@+id/activity_percentage_textview1"
                android:ellipsize="end"
                android:gravity="center|left"
                android:singleLine="true"
                android:text="通过名字就可以看出"
                android:textColor="#696969"
                android:textSize="14sp"
                app:layout_heightPercent="50%" />


        </android.support.percent.PercentRelativeLayout>

    </android.support.percent.PercentRelativeLayout>

    <View
        android:id="@+id/activity_percentage_view1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/activity_percentage_layout1"
        android:background="#44CCCCCC" />

    <android.support.percent.PercentRelativeLayout
        android:id="@+id/activity_percentage_layout3"
        android:layout_width="match_parent"
        android:layout_below="@+id/activity_percentage_view1"
        app:layout_heightPercent="20%"
        app:layout_marginLeftPercent="2%"
        app:layout_marginRightPercent="2%">

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/activity_percentage_layout4"
            android:layout_height="match_parent"
            app:layout_widthPercent="23.5%">

            <ImageView
                android:id="@+id/activity_percentage_imageview2"
                android:src="@mipmap/icon_baodantijian"
                app:layout_heightPercent="70%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

            <TextView
                android:id="@+id/activity_percentage_textview3"
                android:layout_below="@+id/activity_percentage_imageview2"
                android:gravity="center"
                android:singleLine="true"
                android:text="消息"
                android:textColor="#000000"
                android:textSize="14sp"
                app:layout_heightPercent="26%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

        </android.support.percent.PercentRelativeLayout>

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/activity_percentage_layout5"
            android:layout_height="match_parent"
            android:layout_toRightOf="@+id/activity_percentage_layout4"
            app:layout_marginLeftPercent="2%"
            app:layout_widthPercent="23.5%">

            <ImageView
                android:id="@+id/activity_percentage_imageview3"
                android:src="@mipmap/icon_ciyue"
                app:layout_heightPercent="70%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

            <TextView
                android:id="@+id/activity_percentage_textview4"
                android:layout_below="@+id/activity_percentage_imageview3"
                android:gravity="center"
                android:singleLine="true"
                android:text="订单"
                android:textColor="#000000"
                android:textSize="14sp"
                app:layout_heightPercent="26%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

        </android.support.percent.PercentRelativeLayout>

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/activity_percentage_layout6"
            android:layout_height="match_parent"
            android:layout_toRightOf="@+id/activity_percentage_layout5"
            app:layout_marginLeftPercent="2%"
            app:layout_widthPercent="23.5%">

            <ImageView
                android:id="@+id/activity_percentage_imageview4"
                android:src="@mipmap/icon_dangyue"
                app:layout_heightPercent="70%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

            <TextView
                android:id="@+id/activity_percentage_textview5"
                android:layout_below="@+id/activity_percentage_imageview4"
                android:gravity="center"
                android:singleLine="true"
                android:text="我的"
                android:textColor="#000000"
                android:textSize="14sp"
                app:layout_heightPercent="26%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

        </android.support.percent.PercentRelativeLayout>

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/activity_percentage_layou7"
            android:layout_height="match_parent"
            android:layout_toRightOf="@+id/activity_percentage_layout6"
            app:layout_marginLeftPercent="2%"
            app:layout_widthPercent="23.5%">

            <ImageView
                android:id="@+id/activity_percentage_imageview5"
                android:src="@mipmap/icon_jianyishu1"
                app:layout_heightPercent="70%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

            <TextView
                android:id="@+id/activity_percentage_textview6"
                android:layout_below="@+id/activity_percentage_imageview5"
                android:gravity="center"
                android:singleLine="true"
                android:text="首页"
                android:textColor="#000000"
                android:textSize="14sp"
                app:layout_heightPercent="26%"
                app:layout_marginLeftPercent="10%"
                app:layout_marginRightPercent="10%"
                app:layout_marginTopPercent="2%"
                app:layout_widthPercent="80%" />

        </android.support.percent.PercentRelativeLayout>

    </android.support.percent.PercentRelativeLayout>

    <View
        android:id="@+id/activity_percentage_view2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/activity_percentage_layout3"
        android:background="#44CCCCCC" />


    <TextView
        android:id="@+id/activity_percentage_textview7"
        android:layout_alignParentBottom="true"
        android:background="#0000ff"
        android:gravity="center"
        android:text="width:100%,height:10%"
        android:textColor="#FFFFFF"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="100%" />

</android.support.percent.PercentRelativeLayout>

 

 

2.3.2.Java代码

public class PercentageActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_percentage);


        TextView textView = findViewById(R.id.activity_percentage_textview7);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(PercentageActivity.this, "你好ya", Toast.LENGTH_LONG).show();
            }
        });

    }
}

 

 

2.3.3.效果

 

 

 

 

 

3.PercentFrameLayout ​​​​​​使用参照PercentRelativeLayout以及FrameLayout ​​​​​​

 

 

4.扩展：https://github.com/hongyangAndroid/android-percent-support-extend