自定义-利用ViewGroup实现的线性布局

自定义类:

/**
 * Created by my on 2016/9/12.
 *
 *  6.自定义的垂直的线性布局
 /*需求: 垂直向下的线性布局
 *       1.测量该控件的宽高
 *           0.拿到所有的子view
 *          1.遍历所有的子view,测量子view的宽高
 *          2.该控件的高 --- 所有的子view的高的总和
 *          3.该控件的宽----取所有子view中最宽的值
 *          4.设置自身大小
 *
 *       2.布局子view的位置
 *          0.拿到所有的子view
 *          1.遍历所有的子view
 *          2.调用子View的layout方法来确定子view的位置
 *
 *
 * */

public class CustomLinearlayout extends ViewGroup {
    public CustomLinearlayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 测量
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //父控件的高和宽
        int height = 0;
        int width  = 0;
        //获得子view的数量
        int childCount = getChildCount();
        for (int i= 0; i < childCount; i++) {
            //得到每个view
            View childAt = getChildAt(i);
            //得到子view的宽高,0,0表示重新测量
            childAt.measure(0,0);
            height += childAt.getMeasuredHeight();
            if(width < childAt.getMeasuredWidth()){
                width = childAt.getMeasuredWidth();
            }
        }
        //设置父布局自身宽高
        setMeasuredDimension(width,height);


    }

    /**
     * b布局
     * @param changed
     * @param l 左
     * @param t 上
     * @param r 右
     * @param b 下
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //childAt.getMeasuredWidth()子view的宽度
        //getMeasuredWidth view的宽度
        //记录当前控件高度
         int height = 0;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childAt = getChildAt(i);
            //childAt.measure(0,0);

            childAt.layout(0,height,childAt.getMeasuredWidth(),height+childAt.getMeasuredHeight());
            //新添加的子view的高度加上当前viewGroup的高度
            height += childAt.getMeasuredHeight();
        }
    }
}

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.day27_customview4.MainActivity">

 <com.example.day27_customview4.CustomLinearlayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#00ff00">
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="20dp"
         android:text="12"
         android:textSize="30sp"
         android:background="@android:color/black"/>
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="123"
         android:textSize="40sp"
         android:background="@android:color/white"/>
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="40dp"
         android:text="12345"
         android:textSize="50sp"
         android:background="@android:color/holo_blue_bright"/>
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="70dp"
         android:text="123456"
         android:textSize="30sp"
         android:background="@android:color/holo_red_dark"/>
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="1234567"
         android:textSize="30sp"
         android:background="@android:color/darker_gray"/>

 </com.example.day27_customview4.CustomLinearlayout>
</RelativeLayout>

activity中直接显示这个布局,效果如下:

posted @ 2016-09-12 22:18  ts-android  阅读(298)  评论(0编辑  收藏  举报