Android View 与 ViewGroup

初学Android时，总是混淆View、ViewGroup的父子关系，尽管在源码中有标明

public abstract class ViewGroup extends View implements ViewParent, ViewManager {

但总是有个疑问，ViewGroup可以包含View、ViewGroup，而View只能放在ViewGroup中，从感觉上来说，ViewGroup是父才对。

但事实胜于熊便，那就看看为什么View是父吧

先从第一步看起
1.往ViewGroup中添加子View：addView
点到ViewGroup的addView方法中，一直跟到最后，发现，ViewGroup会将添加进来的View 保存在一个数组中：

   // 保存子View的数组
    @UnsupportedAppUsage(maxTargetSdk = Build.VERSION_CODES.P)
    private View[] mChildren;

//保存子View进数组的方法 (具体细节可自行看源码 下同)
private void addInArray(View child, int index) {
       //将子View保存到mChildren
    }

2.绘制子View
在View的绘制流程中，有个空实现的方法至关重要：

    protected void dispatchDraw(Canvas canvas) {
       //空
    }

这个方法在View的渲染过程中会被调用，但在View中是空实现，调用了也没用，然而在ViewGroup中重写了此方法:

    protected void dispatchDraw(Canvas canvas) {
       //将画布Canvas根据设定值裁剪
       //绘制子View（调用子View的 draw方法）
    }

这里两个问题：
1.为什么要裁剪。
2.根据什么裁剪。

先说第一个，在Android中，所有控件都是绘制在Canvas上得，既然ViewGroup可以在内部显示其他View，那么其他View的Canvas是怎么来的呢？其实ViewGroup和其他的子View都是用的同一张Canvas，只是在绘制时，通过移动、裁剪将画布提供给对应的子View使用，不过在移动、裁剪前要保存画布，绘制完一个子View后恢复画布，如果有多个子View，继续重复以上过程，那么Canvas的平移和裁剪是根据什么来确定的呢，先看一下源码：

            canvas.clipRect(mScrollX + mPaddingLeft, mScrollY + mPaddingTop,
                    mScrollX + mRight - mLeft - mPaddingRight,
                    mScrollY + mBottom - mTop - mPaddingBottom);

可以看到裁剪的大小，根据滚动值+边距值+ 设定值（mLeft， mTop， mRight，mBottom）来确定的，最主要的是设定值，
那么设定值是通过什么设置的呢，其实在我们继承ViewGroup的时候，它会强制要求我们继承一个onLayout方法，用来给子View设置摆放位置，通过View.layout(mLeft, mTop, mRight, mBottom), 其实这四个参数，就是Canvas裁剪的设定值, 点进layout源码中最后会看到这个方法的赋值

   protected boolean setFrame(int left, int top, int right, int bottom) {
       ........
            mLeft = left;
            mTop = top;
            mRight = right;
            mBottom = bottom;
           .......
        return changed;
    }

那现在裁剪有了，没平移还不行，比如我想将子View放在ViewGroup的（100， 100， 200， 200）的位置，
如果不算滚动和边距，那么裁剪完画布的位置就是(0, 0, 100, 100), 如果我们需要将子View显示在设定的位置，那么还需要在
x轴上移动100，
y轴上移动100。

接下来就到了移动的环节，在绘制子View（调用子View的 draw方法）时，调用了View的draw方法(注意：是三个参数的draw方法)，在这个方法中可以看到Canvas调用了移动方法:

canvas.translate(mLeft, mTop);

参数和裁剪时的参数一致，是在layout时设置的参数，那么现在这个Canvas就移动到了我们设定的位置，再往后draw方法中会调用单个参数的draw方法，在这个draw方法中会调用我们熟悉的onDraw(Canvas canvas)方法，这就是我们在写自定义View的时候经常使用的方法，其中的参数Canvas就是经过ViewGroup裁剪平移过后的Canvas

  if ((mPrivateFlags & PFLAG_SKIP_DRAW) == PFLAG_SKIP_DRAW) {
                    mPrivateFlags &= ~PFLAG_DIRTY_MASK;
                    dispatchDraw(canvas);
                } else {
                    draw(canvas);
                }

 public void draw(Canvas canvas) {
       ......
        if (!verticalEdges && !horizontalEdges) {
            // Step 3, draw the content
            onDraw(canvas);

            // Step 4, draw the children
            dispatchDraw(canvas);

            drawAutofilledHighlight(canvas);

            // Overlay is part of the content and draws beneath Foreground
            if (mOverlay != null && !mOverlay.isEmpty()) {
                mOverlay.getOverlayView().dispatchDraw(canvas);
            }

            // Step 6, draw decorations (foreground, scrollbars)
            onDrawForeground(canvas);

            // Step 7, draw the default focus highlight
            drawDefaultFocusHighlight(canvas);

            if (isShowingLayoutBounds()) {
                debugDrawFocus(canvas);
            }

            // we're done...
            return;
        }
......
}

到此，就算理清了ViewGroup为什么作为View的子类还能容纳其他View了，归纳一下：
1.ViewGroup通过addView方法保存子View到集合中。
2.在OnLayout时设置子View的位置信息(mLeft， mTop， mRight，mBottom)。
3.在渲染时，根据设置的位置信息裁剪、移动画布到对应位置。
4.View调用OnDraw方法绘制自身信息。

既然已经分析出来了，那么就来实战一下吧，通过继承View，实现addView添加子View的功能:

1.自定义ParentView继承自View:

public class ParentView extends View {

2.声明一个保存子View的集合，并提供addView的方法:

private ArrayList<ViewBean> mViews = new ArrayList<>();

    /**
     * 添加子View
     */
    public void addView(View view, int left, int top, int right, int bottom){
        mViews.add(new ViewBean(left, top, right, bottom, view));
        invalidate();
    }

3.在dispatchDraw中遍历子View，并绘制：

  @Override
    protected void dispatchDraw(Canvas canvas) {
        for (ViewBean mView : mViews) {
            canvas.save();
            drawChildView(canvas, mView);
            canvas.restore();
        }
    }

    /**
     * 绘制子View
     */
    private void drawChildView(Canvas canvas, ViewBean viewBean) {
        //移动画布到 mLeft  mTop的位置
        canvas.translate(viewBean.getmLeft(), viewBean.getmTop());
        //移动画布大小为  宽:mRight-mLeft  高:mBottom - mTop
        canvas.clipRect(0, 0, viewBean.getmRight() - viewBean.getmLeft(), viewBean.getmBottom() - viewBean.getmTop());
        //绘制红色背景 方便区分
        canvas.drawColor(Color.RED);
        //添加TextView时它内部需要设定位置值， 自己写的View可不用layout
        viewBean.getmView().layout(viewBean.getmLeft(), viewBean.getmTop(), viewBean.getmRight(), viewBean.getmBottom());
        //调用子View的draw方法 将此canvas提供给子View使用
        viewBean.getmView().draw(canvas);
    }

5.在布局中使用ParentView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.viewgroupdemo.ParentView
        android:id="@+id/pv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

6.在ParentView中添加子View，并设定位置：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ParentView parentView = findViewById(R.id.pv);

        CustomTextView tvOne = new CustomTextView(this);
        tvOne.setText("I am tvOne");
        tvOne.setTextColor(Color.WHITE);

        CustomTextView tvTwo = new CustomTextView(this);
        tvTwo.setText("I am tvTwo");
        tvTwo.setTextColor(Color.WHITE);

        //第一个textview
        parentView.addView(tvOne, 100, 100, 600, 600);
        //第二个textview
        parentView.addView(tvTwo, 300, 700, 600, 1000);
    }
}

预览：

001.jpg

可以看到两个TextView已经被绘制到 ParentView 上了。

。。。完