自定义ViewGroup基础巩固1---理解onLayout()方法

自定义ViewGroup这个是在android中自定义控件中不可获缺的很重要的一部分,关于它的意义这里就不过多阐述了,为了在未来深入上继续走下去,所以先把基础给打牢。

这篇主要是理解ViewGroup中如何去通过onLayout方法去布局添加的子控件,那另外一个自定义ViewGroup的也很重要的方法onMesure方法呢?下篇再来学习,一步步来,首先先新建一个ViewGroup,搭建基础框架:

其中需要实现ViewGroup的抽象方法onLayout():

然后在MainActivity中布局文件中进行声明:

在ViewGroup添加一个子控件初识onLayout():

目前ViewGroup中木有一个子控件,所以运行肯定一片空白,所以呢,先在init中去添加一个子控件:

这里先来个套路,虽然大家都懂的,运行看下:

不多解释,懂android的都知道原因,因为自定义ViewGroup的子控制的显示是需要自己做下处理才能够显示的,而这个方法就是onLayout(),先来看一下它的参数意义:

先不用过多去揣测这四个参数的真实意义,先粗暴的去让这四个参数传给我们添加的控件:

/**
 * 自定义ViewGroup基础巩固
 * 先将添加的一个子视图显示出来
 */
public class MyViewGroup extends ViewGroup {
    public MyViewGroup(Context context) {
        this(context, null);
    }

    public MyViewGroup(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init() {
        //第一步:先添加一个子视图
        ImageView imageView = new ImageView(getContext());
        imageView.setImageResource(R.mipmap.ic_launcher);
        addView(imageView);
    }

    /**
     * 主要是用于对子视图的摆放,其参数2、3、4、5表示当前控件对应的边的左上右下
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //获得我们添加的子视图
        View child0 = getChildAt(0);
        //摆放孩子视图
        child0.layout(l, t, r, b);//直接用默认的参数的值,则是充满整个屏幕
    }
}

编译运行:

可以正常显示了,但是图片糊了,因为原图被拉伸了,那下面修改一下代码,尝试让咱们的子视图大小变小一点:

 编译运行:

嗯~~不错~~确实onLayout()可以控制子视图的大小,那下面再来理解一下onLayout()中的四个参数:"表示当前控件对应边左上右下",而当前控件在布局文件的声明是填满父控件的:

所以实际上MyViewGroup当前控件的大小为:

那这四个参数的位置为:

下面可以打印看一下是不是如此:

嗯~~确实是如此,所以对于这个结果就可以理解啦:

onLayout()加强:布局多个子控件

对于子控件通常是有多个的,所以这里在init()中添加3个ImageView,如下:

目前当然是无法将添加的控件正常显示出来滴,接着处理下onLayout()对子控件进行布局,这里模拟Android的LinearLayout让其子控件水平显示,在实现之前先看一下LinearLayout也是继承ViewGroup去实现的, 可以瞅一下它的onLayout()方法:

具体的显示也是有自己的处理规则的,当然它的实现是比较复杂的,了解下,下面来简单把我们的子控件水平排列:

编译运行:

由于子控件的layout方法摆放的基准点是基于当前ViewGroup的控件,所以比较好理解,不多解释,接下来将它竖着排列:

编译运行:

 

onLayout()脑动大开:将子视图布局成倒着的杨辉三角形

有了上面的基础,拉下来多添加几个子控件,来实现类似杨辉三角形的效果,类似于:

【注】:至于什么是杨辉三角可以百度百科,这里不是讨论的重点。

首先添加6个子控件:

接着具体来摆放它们:

实现代码比较好理解,不多解释,编译运行:

posted on 2017-09-11 21:43  cexo  阅读(760)  评论(0编辑  收藏  举报

导航