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 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




    


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 上了。

。。。完

你可能感兴趣的:(Android View 与 ViewGroup)