目录
- 简介
- 常用属性
- 常见功能需求实现
- 常见问题
- 小技巧
1.简介
- 显示图片的控件
2.属性
| 序号 | 属性 | 功能 |
|---|---|---|
| 1 | src | 添加一个Drawable资源 |
| 2 | scaleType | src中Drawable的缩放方式（8种） |
| 3 | adjustViewBounds | 是否允许改变ImageView的界限来保持宽高比 |
| 4 | maxWidth | ImageView最大宽度，需要adjustViewBounds设置为true |
| 5 | maxHeight | ImageView最大高度度，需要adjustViewBounds设置为true |
| 6 | tint | 着色 |
| 7 | baselineAlignBottom | |
| 8 | cropToPadding | |
| 9 | baseline | |
| 10 | drawableAlpha | |
| 11 | tintMode | 着色模式 |
2.1 src
Sets a drawable as the content of this ImageView.
给ImageView设置一张Drawable资源
-
XML
android:src="@mipmap/ic_launcher" android:src="@color/colorAccent" android:src="@drawable/ic_launcher_background" -
Java
iv.setImageDrawable(Drawable drawable) iv.setImageBitmap(Bitmap bm) iv.setImageResource(int resId) iv.setImageURI(Uri uri)- setImageDrawable(Drawable drawable)
- 给ImageView设置一张Drawable资源
- 设置 null，表示清空这个Drawable
- 其他3个都是RemotableViewMethod
- setImageDrawable(Drawable drawable)
2.2 scaleType
Controls how the image should be resized or moved to match the size of this ImageView
控制image如何调整或者移动以匹配这个ImageView的大小
| 参数 | 值 |
|---|---|
| matrix | 0 |
| fitXY | 1 |
| fitStart | 2 |
| fitCenter（默认） | 3 |
| fitEnd | 4 |
| center | 5 |
| centerCrop | 6 |
| centerInside | 7 |
2.2.1 matrix
Scale using the image matrix when drawing
在绘制的时候使用图像矩阵进行缩放
-
XML
android:scaleType="matrix" -
Java
iv.setScaleType(ImageView.ScaleType.MATRIX);
都需要在代码中配合以下属性使用
iv.setImageMatrix(Matrix matrix)
- 可以设置一些特殊的Matrix来改变图像的效果，比较灵活
2.2.2 fitXY
Scale the image using {@link Matrix.ScaleToFit#FILL}.
使用Matrix.Scale的FILL模式对图片进行缩放
-
XML
android:scaleType="fitXY" -
Java
iv.setScaleType(ImageView.ScaleType.FIT_XY); - Matrix.ScaleToFit.FILL
Scale in X and Y independently, so that src matches dst exactly. This may change the
aspect ratio of the src.
分别对X和Y进行缩放，使src与dst完全匹配。这可能会改变
src的长宽比。
- 这里看看一张设置不缩放的居中显示的图片效果
<ImageView android:layout_width="200dp" android:layout_height="100dp" android:scaleType="center" android:src="@mipmap/ic_launcher"/>
center
- 可以看出来，有些地方没有填充满,并且也不会对Image进行缩放处理，现在改变缩放的属性为fitXY
fitXY
- ImageView的源码中有这样一段代码，说明这个属性是在(0,0)坐标点开始对图片进行X，Y轴的缩放，以填满整个ImageVIew
if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
/* If the drawable has no intrinsic size, or we're told to
scaletofit, then we just fill our entire view.
*/
mDrawable.setBounds(0, 0, vwidth, vheight);
mDrawMatrix = null;
}
- 使用这个属性的时候要特别注意图片会变形
2.2.3 fitStart
Scale the image using {@link Matrix.ScaleToFit#START}
使用Matrix.Scale的START模式对图片进行缩放
-
XML
android:scaleType="fitStart" -
Java
iv.setScaleType(ImageView.ScaleType.FIT_START); - Matix.ScaleToFit.START
Compute a scale that will maintain the original src aspect ratio, but will also ensure
that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START
aligns the result to the left and top edges of dst.
计算一个比例，将保持原来的src长宽比，但也将确保
src完全适合dst。至少有一个轴(X或Y)正好合适。开始
将结果对齐到dst的左侧和顶部边缘。
- 对不缩放的居中显示的图片设置为fitStart
<ImageView android:id="@+id/iv_demo" android:layout_width="200dp" android:layout_height="100dp" android:scaleType="fitStart" android:src="@mipmap/ic_launcher"/>
center
fitStart
- 可以看出来对Y轴进行了缩放，充满了整个ImageView，对X轴进行了等比缩放，然后对齐到了左侧和顶点边缘显示
- 也可以说是在(0,0)坐标点开始对src进行了等比缩放，直到有一边适合ImageView
2.2.4 fitCenter(默认设置)
Scale the image using {@link Matrix.ScaleToFit#CENTER}
使用Matrix.Scale的CENTER模式对图片进行缩放
-
XML
android:scaleType="fitCenter" -
Java
iv.setScaleType(ImageView.ScaleType.FIT_CENTER); - Matix.ScaleToFit.CENTER
Compute a scale that will maintain the original src aspect ratio, but will also ensure
that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The
result is centered inside dst.
计算一个比例，将保持原来的src长宽比，但也将确保
src完全适合dst。至少有一个轴(X或Y)正好合适。结果集中在dst内部。
- 对不缩放的居中显示的图片设置为fitCenter
<ImageView android:id="@+id/iv_demo" android:layout_width="200dp" android:layout_height="100dp" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher"/>
center
fitCenter
2.2.5 fitEnd
Scale the image using {@link Matrix.ScaleToFit#END}
使用Matrix.Scale的END模式对图片进行缩放
-
XML
android:scaleType="fitEnd" -
Java
iv.setScaleType(ImageView.ScaleType.FIT_END); - Matix.ScaleToFit.END
Compute a scale that will maintain the original src aspect ratio, but will also ensure
that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END
aligns the result to the right and bottom edges of dst.
计算一个比例，将保持原来的src长宽比，但也将确保
src完全适合dst。至少有一个轴(X或Y)正好合适。
将结果对齐到dst的右侧和底部边缘。
- 对不缩放的居中显示的图片设置为fitEnd
<ImageView android:id="@+id/iv_demo" android:layout_width="200dp" android:layout_height="100dp" android:scaleType="fitEnd" android:src="@mipmap/ic_launcher"/>
center
fitEnd
2.2.6 center
Center the image in the view, but perform no scaling
居中显示图片，但不执行缩放
-
XML
android:scaleType="fitEnd" -
Java
iv.setScaleType(ImageView.ScaleType.FIT_END); -
下图就是设置了center属性的，蓝框为ImageView的宽高
center
-
ImageView源码
可以看出来就是仅仅把图片平移到了ImageView的中心
if (ScaleType.CENTER == mScaleType) {
// Center bitmap in view, no scaling.
mDrawMatrix = mMatrix;
mDrawMatrix.setTranslate(Math.round((vwidth - dwidth) * 0.5f),
Math.round((vheight - dheight) * 0.5f));
}
2.2.7 centerCrop
Scale the image uniformly (maintain the image's aspect ratio) so both dimensions
(width and height) of the image will be equal to or larger than the corresponding
dimension of the view (minus padding). The image is then centered in the view.
均匀缩放图像(保持图像的长宽比)，所以两个维度
(宽度和高度)的图像将等于或大于相应的
视图的维度(减去填充)。然后图像在视图中居中。
-
XML
android:scaleType="centerCrop" -
Java
iv.setScaleType(ImageView.ScaleType.CENTER_CROP); - 对不缩放的居中显示的图片设置为centerCrop
<ImageView android:id="@+id/iv_demo" android:layout_width="200dp" android:layout_height="100dp" android:scaleType="centerCrop" android:src="@mipmap/ic_launcher"/>
center
centerCrop
-
可以看到上图对src进行了等比拉伸，Y轴方向拉伸显示不了的区域直接被crop了
-
ImageView源码
if (ScaleType.CENTER_CROP == mScaleType) {
mDrawMatrix = mMatrix;
float scale;
float dx = 0, dy = 0;
if (dwidth * vheight > vwidth * dheight) {
scale = (float) vheight / (float) dheight;
dx = (vwidth - dwidth * scale) * 0.5f;
} else {
scale = (float) vwidth / (float) dwidth;
dy = (vheight - dheight * scale) * 0.5f;
}
mDrawMatrix.setScale(scale, scale);
mDrawMatrix.postTranslate(Math.round(dx), Math.round(dy));
}
2.2.8 centerInside
Scale the image uniformly (maintain the image's aspect ratio) so that both
dimensions (width and height) of the image will be equal to or less than the
corresponding dimension of the view (minus padding). The image is then centered in
the view.
均匀缩放图像(保持图像的长宽比)，使两者
图像的尺寸(宽度和高度)将等于或小于视图的相应维度(减去填充)。然后图像居中
视图。
-
XML
android:scaleType="centerInside" -
Java
iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE); - ImageView源码
if (ScaleType.CENTER_INSIDE == mScaleType) {
mDrawMatrix = mMatrix;
float scale;
float dx;
float dy;
if (dwidth <= vwidth && dheight <= vheight) {
scale = 1.0f;
} else {
scale = Math.min((float) vwidth / (float) dwidth,
(float) vheight / (float) dheight);
}
dx = Math.round((vwidth - dwidth * scale) * 0.5f);
dy = Math.round((vheight - dheight * scale) * 0.5f);
mDrawMatrix.setScale(scale, scale);
mDrawMatrix.postTranslate(dx, dy);
}
- 对不缩放的居中显示的图片设置为centerInside
<ImageView android:id="@+id/iv_demo" android:layout_width="200dp" android:layout_height="100dp" android:scaleType="centerInside" android:src="@mipmap/ic_launcher"/>
center
centerInside
-
感觉基本没变,看源码发现当图片的宽高都比ImageView小的时候是不缩放的，那么现在改变下ImageView的大小
-
改变ImageView的大小
<ImageView android:layout_width="100dp" android:layout_height="50dp" android:scaleType="centerInside" android:src="@mipmap/ic_launcher"/>
centerInside
- 如果src比ImageView的宽高都小，那么不缩放，居中显示
如果src有一边的比ImageView的宽高大,那么选取小的那边的比例，保证视图可以完整的居中显示 -
centerInside与fitCenter的区别
- 在src比ImageView小的时候，不会进行缩放（或者说缩放比例为1）
2.3 adjustViewBounds(默认为false)
Set this to true if you want the ImageView to adjust its bounds
to preserve the aspect ratio of its drawable
如果你想要ImageView调整它的边界，就把这个设置为true
保持其可拉伸长宽比
-
XML
android:adjustViewBounds="true" -
Java
iv.setAdjustViewBounds(true);
2.4 maxWidth
An optional argument to supply a maximum width for this view.
为这个视图提供最大宽度的可选参数
- 需要adjustViewBounds设置为true
-
XML
android:maxWidth="100dp" -
Java
iv.setMaxWidth(100);
2.5 maxHeight
An optional argument to supply a maximum height for this view
为这个视图提供最大高度的可选参数
- 需要adjustViewBounds设置为true
-
XML
android:maxHeight="100dp" -
Java
iv.setMaxHeight(100);
2.6 tint
占坑
2.7 baselineAlignBottom
If true, the image view will be baseline aligned with based on its
bottom edge.
如果设置为true，图像视图将根据其基线底部边缘对齐
2.8 cropToPadding
If true, the image will be cropped to fit within its padding.
如果为true，图像将被裁剪以适合其填充。
2.9 baseline
The offset of the baseline within this view. See {see android.view.View#getBaseline}
for details
这个视图中基线的偏移量。
2.10 drawableAlpha
@hide The alpha value (0-255) set on the ImageView's drawable. Equivalent
to calling ImageView.setAlpha(int), not the same as View.setAlpha(float).
@hide在ImageView的drawable中的alpha值(0-255)。等效
调用ImageView.setAlpha(int)，与View.setAlpha(float)不同
2.11 tintMode
占坑
网友评论