初学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);
}
}
预览:
可以看到两个TextView已经被绘制到 ParentView 上了。
。。。完