【达内课程】自定义控件（居中）

这一节自定义一个容器，新建一个CenterLayout继承自ViewGroup

先做一些练习

模拟一个LinearLayout

//写一个布局，容器
public class CenterLayout extends ViewGroup {
    public CenterLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    //设置子控件如何显示
    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        View view1 = getChildAt(0);
        Log.d("CenterLayout","textView width:"+view1.getMeasuredWidth()+";height:"+view1.getMeasuredHeight());
        //指定控件位置
        view1.layout(0,0,600,100);

        View view2 = getChildAt(1);
        Log.d("CenterLayout","image width:"+view2.getMeasuredWidth()+";height:"+view2.getMeasuredHeight());
        view2.layout(0,100,600,300);
    }

    //测量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获得子控件个数
        int childViewCount = getChildCount();
        //测量
        for(int i=0;i<childViewCount;i++){
            View childView = getChildAt(i);
            childView.measure(widthMeasureSpec,heightMeasureSpec);
        }
    }
}

布局

<com.xx.shadeview.CenterLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:Shade="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.xx.shadeview.ShadeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        Shade:shade_color="#FF888888"
        Shade:text="运动伙伴 就选酷跑"
        Shade:text_color="#FF0000FF"
        Shade:text_size="20" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="运动伙伴 就选酷跑"
        android:textSize="20dp" />

</com.xx.shadeview.CenterLayout>

这里的ShadeView，是之前的自定义控件​​【达内课程】自定义控件（文字阴影）​​

效果

现在模拟一个帧布局

View view1 = getChildAt(0);
        view1.layout(0,0,300,100);
        //坐标左上角重叠
        View view2 = getChildAt(1);
        view2.layout(0,0,600,100);

效果

模拟一个相对布局

View view1 = getChildAt(0);
        view1.layout(0,0,300,100);

        View view2 = getChildAt(1);
        view2.layout(300,100,600,200);

效果

现在来做居中效果

假设有2个view，来计算下它们相关数据

CenterLayout

//写一个布局，容器
public class CenterLayout extends ViewGroup {
    int groupWidth,groupHeight;

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        groupHeight = h;
        groupWidth = w;
    }

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


    //设置子控件如何显示
    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        //获得子控件个数
        int childViewCount = getChildCount();

        //所有控件的高度之和
        int sum = 0;
        for(int j=0;j<childViewCount;j++){
            View view = getChildAt(j);
            sum+=view.getMeasuredHeight();
        }
        int top = (groupHeight - sum)/2;

        for(int j=0;j<childViewCount;j++){
            View view = getChildAt(j);
            int viewWidth = view.getMeasuredWidth();
            int viewHeight = view.getMeasuredHeight();
            int left = (groupWidth - viewWidth)/2;
            int right = left + viewWidth;
            int bottom = top + viewHeight;

            view.layout(left,top,right,bottom);

            top += viewHeight;
        }
    }

    //测量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获得子控件个数
        int childViewCount = getChildCount();
        //测量
        for(int i=0;i<childViewCount;i++){
            View childView = getChildAt(i);
            childView.measure(widthMeasureSpec,heightMeasureSpec);
        }
    }
}

布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.xx.shadeview.CenterLayout xmlns:Shade="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.xx.shadeview.ShadeView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            Shade:shade_color="#FF888888"
            Shade:text="运动伙伴 就选酷跑"
            Shade:text_color="#FF0000FF"
            Shade:text_size="20" />

        <com.xx.shadeview.ShadeView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            Shade:shade_color="#FF888888"
            Shade:text="运动伙伴 就选酷跑"
            Shade:text_color="#FF0000FF"
            Shade:text_size="20" />

    </com.xx.shadeview.CenterLayout>
</LinearLayout>