本文原文发表于vcmo博客 by Jie
众所周知ImageView可以通过src和Background两种方式设置显示资源。和大家一起通过源码来了解两种属性的绘制流程有何不同。
热身案例
先上两段小代码:
<ImageView
android:layout_width="200dp"
android:layout_height="300dp"
android:background="@mipmap/ic_launcher"/>
<ImageView
android:layout_width="200dp"
android:layout_height="300dp"
android:src="@mipmap/ic_launcher"/>
android:background="@mipmap/ic_launcher"
android:src="@mipmap/ic_launcher"
例子中,可以看到ImageView通过设置Background会将图片资源拉伸至控件的宽高。通过src设置并不会有这样的现象。这是为什么呢?下面就同大家一起在源码中找到答案。
ImageView 是View的直接子类,我们先从ImageView的源码入手。
src与background两种属性设置的方法入手
setImageResource()方法入手src属性
在ImageView的源码中我们很容易能找到设置ImageResource的方法:
方法很短
- 首先将两个全局变量的值赋给了局部变量。
- 调用了updateDrawable(null),更新Drawable,并将null作为参数。对,是用来初始化的。
- 将我们传入的resId赋值给全局变量mResource。
- 调用resolveUri();名称的意思是解析资源。
- 根据新的宽高是否等于旧的值,判断是否请求重新计算布局。
- invalidate(),重绘
通过上面方法,找到了resolveUri()方法,看看里面做了什么。
private void resolveUri() {
···
Drawable d = null;
if (mResource != 0) {
try {
d = mContext.getDrawable(mResource);
} catch (Exception e) {
Log.w("ImageView", "Unable to find resource: " + mResource, e);
// Don't try again.
mUri = null;
}
}
···
updateDrawable(d);
}
代码不短,我们只关注相关的部分。可以看到在这个方法里面
- 通过mContext.getDrawable(mResource)获取到了mResource解析来的Drawable对象实例。
- mResource就是上面方法第三步赋值我们传入的resId来的。
- 拿到Drawable对象d,在方法最后通过updateDrawable(d)方法更新Drawable资源。(没错这个方法在上面也用到了,传入的参数是null初始化)。
接着查看updateDrawable()方法:
private void updateDrawable(Drawable d) {
···
mDrawable = d;
if (d != null) {
d.setCallback(this);
d.setLayoutDirection(getLayoutDirection());
if (d.isStateful()) {
d.setState(getDrawableState());
}
d.setVisible(getVisibility() == VISIBLE, true);
d.setLevel(mLevel);
mDrawableWidth = d.getIntrinsicWidth();
mDrawableHeight = d.getIntrinsicHeight();
applyImageTint();
applyColorMod();
configureBounds();
}
}
同样我们看重点:
- 将d赋值全局变量mDrawable.
- 通过d.getIntrinsicWidth()拿到drawable的width赋值全局变量mDrawableWidth
- 通过d.getIntrinsicHeight()拿到drawable的height赋值全局变来那个mDrawableHeight
- 调用configureBounds()方法配置边界。
OK,去看configureBounds()方法:
private void configureBounds() {
···
int dwidth = mDrawableWidth;
int dheight = mDrawableHeight;
int vwidth = getWidth() - mPaddingLeft - mPaddingRight;
int vheight = getHeight() - mPaddingTop - mPaddingBottom;
if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
mDrawable.setBounds(0, 0, vwidth, vheight);
mDrawMatrix = null;
} else {
mDrawable.setBounds(0, 0, dwidth, dheight);
···
}
}
代码较多,但是并不复杂,我们只看与我们讨论相关的部分(中间面省略的部分是与ScaleType属相相关的代码,下次单独拿出来分析)
- 计算出view的内部宽高并赋值局部变量。
- 判断drawable的宽高是否没有意义,或者是设置ScaleType为FIX_XY,就通过mDrawable.setBounds()方法将mDrawable的边界范围设置为View的内部大小。
- 否则,将mDrawable的边界范围设置为drawable资源的宽高。(所以src默认不会拉伸图片)
最后就是在ondraw()方法中将mDrawable绘制出来。到此整个的src属性的设置到绘制的流程已经清楚。
接着我们来看Background属性是如何作用于View的。
setBackgroundResource()方法入手Background属性
在ImageView的源码中我们通过搜索发现并没有Background相关的设置方法。在它的父类—View中,可以找到我们想要的代码。
public void setBackgroundResource(@DrawableRes int resid) {
if (resid != 0 && resid == mBackgroundResource) {
return;
}
Drawable d = null;
if (resid != 0) {
d = mContext.getDrawable(resid);
}
setBackground(d);
mBackgroundResource = resid;
}
代码简短,同样先根据resid拿到drawable对象,然后调用了setBackground()方法。最终调用了setBackgroundDrawable()方法。在这个方法最终将drawable赋值给了一个全局变量mBackground,在这个方法中并没有发现设置drawable的bounds相关的方法,那么我们接着往后走,到绘制层。View的onDraw()方法是空的,我们知道onDraw()方法其实是由View的draw()方法调用的,在draw()方法中是进行View的基本绘制,onDraw()是扩展视图自己绘制的方法。
直奔draw()方法
很开心,google的工程师给我们写了很清晰的注释。第一步就是绘制background,只调用了一个方法drawBackground()。乘胜追击。
private void drawBackground(Canvas canvas) {
final Drawable background = mBackground;
if (background == null) {
return;
}
setBackgroundBounds();
···
}
看到了,调用了一个setBackGroundBounds()方法,追
void setBackgroundBounds() {
if (mBackgroundSizeChanged && mBackground != null) {
mBackground.setBounds(0, 0, mRight - mLeft, mBottom - mTop);
mBackgroundSizeChanged = false;
rebuildOutline();
}
}
简短精悍的代码,mBackground.setBounds(0, 0, mRight - mLeft, mBottom - mTop),设置了mBackground这个drawable的边界。就是View的宽高。
- 此处是直接使用mRight - mleft 和 mBottom - mTop,也就是说忽略padding的存在。
- 在src属性中,使用到容器的宽高是这样获得的
int vwidth = getWidth() - mPaddingLeft - mPaddingRight;
int vheight = getHeight() - mPaddingTop - mPaddingBottom;
padding是起作用的。通过两个简单的例子看看效果。
总结
通过源码的阅读,清楚了ImageView 与 Background的区别与联系以及绘制的流程:
- 都是Drawable资源的绘制,所以他们内容是可以互通的。
- background是View的属性,在View层绘制(所以Background称为背景,因为它在自定义View的onDraw()方法被调用前就已经被调用绘制了),所有的控件都具有该属性,src是ImageView中定义的属性,在ImageView的onDraw方法中才被绘制。只有ImageView即其子类才有此属性。
- background是缩放填充式的绘制,src可以通过ScaleType设置不同的缩放效果。
- padding属性对background无效,但对ImageView的src是有效的。
第一次写技术类的文章,如有错误还望多多指正。欢迎分享交流。
邮箱: liuj4563@163.com
原创博文 转载请注明出处