自定义ViewGroup

最新推荐文章于 2021-05-26 00:13:44 发布

翻译最新推荐文章于 2021-05-26 00:13:44 发布 · 333 阅读

java 专栏收录该内容

15 篇文章

订阅专栏

本文深入解析Android视图绘制的原理，包括测量和布局过程，并通过自定义一个名为CascadeLayout的容器来展示如何利用XML布局实现特定的布局效果。此外，文章还介绍了如何在res/values目录下定义属性文件来定制容器的样式，以及在CascadeLayout类中重写onMeasure和onLayout方法来实现自定义的尺寸和位置分配。

理解Android绘制视图的方式，Android开发文档中的一段话：

“绘制布局由两个遍历过程组成：测量过程和布局过程。测量过程由measure(int, int)方法完成，该方法从上到下遍历视图树。在递归遍历过程中，每个视图都会向下层传递尺寸和规格。当measure方法遍历结束，每个视图都保存了各自的尺寸信息。第二个过程由layout(int,int,int,int)方法完成，该方法也是由上而下遍历视图树，在遍历过程中，每个父视图通过测量过程的结果定位所有子视图的位置信息。”

分析ViewGroup的绘制过程，第一步是测量ViewGroup的宽度和高度，在onMeasure()方法中完成，ViewGroup遍历所有子视图计算出它的大小。第二步是根据第一步获取的尺寸去布局所有子视图，在onLayout()中完成。

创建CascadeLayout

定制一个CascadeLayout的容器，使用XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cascade="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.example.zxz.asdemo.CascadeLayout
        cascade:horizontal_space="@dimen/activity_horizontal_margin"
        cascade:vertical_space="@dimen/activity_vertical_margin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <View
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="#FF0000"/>
        <View
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="#00FF00"/>
        <View
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:background="#0000FF"/>
    </com.example.zxz.asdemo.CascadeLayout>
</LinearLayout>

定义定制的属性cascade，需要在res/values/目录下创建一个属性文件attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CascadeLayout">
        <attr name="horizontal_space" format="dimension"/>
        <attr name="vertical_space" format="dimension"/>
    </declare-styleable>
</resources>

继承自ViewGroup的CascadeLayout类，重写onMeasure()和onLayout()方法，

public class CascadeLayout extends ViewGroup{
    private int mHorizontalSpacing, mVerticalSpacing;
    private static final String TAG = "CascadeLayout";

    public CascadeLayout(Context context, AttributeSet attrs){
        super(context, attrs);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CascadeLayout);
        try {
            mHorizontalSpacing = a.getDimensionPixelSize(R.styleable.CascadeLayout_horizontal_space,
                    getResources().getDimensionPixelSize(
                            R.dimen.activity_horizontal_margin));
            mVerticalSpacing = a.getDimensionPixelSize(R.styleable.CascadeLayout_vertical_space,
                    getResources().getDimensionPixelSize(
                            R.dimen.activity_vertical_margin));
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            a.recycle();
        }
    }

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

    public CascadeLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CascadeLayout);
        try {
            mHorizontalSpacing = a.getDimensionPixelSize(R.styleable.CascadeLayout_horizontal_space,
                    getResources().getDimensionPixelSize(
                    R.dimen.activity_horizontal_margin));
            mVerticalSpacing = a.getDimensionPixelSize(R.styleable.CascadeLayout_vertical_space,
                    getResources().getDimensionPixelSize(
                            R.dimen.activity_vertical_margin));
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            a.recycle();
        }

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int k = 0; k < getChildCount(); k++){
            View child = getChildAt(k);
            Log.i(TAG, "C(w,h):" + child.getMeasuredWidth() + "," + child.getMeasuredHeight());
            child.layout(mHorizontalSpacing * k,
                    mVerticalSpacing * k,
                    child.getMeasuredWidth() + mHorizontalSpacing * k,
                    child.getMeasuredHeight() + mVerticalSpacing * k);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            Log.i(TAG, "B(w,h):" + child.getMeasuredWidth() + "," + child.getMeasuredHeight());
            //measureChild(child, widthMeasureSpec, heightMeasureSpec);
            //如果不希望系統自動測量，可用如下方式：
            int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(300, MeasureSpec.EXACTLY);
            int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(450, MeasureSpec.EXACTLY);
            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
            Log.i(TAG, "A(w,h):" + child.getMeasuredWidth() + "," + child.getMeasuredHeight());
        }
    }
}