Table of contents
3. Common properties of ImageView
4. How to load several pictures
1. Introduction to ImageView
ImageView is one of the most commonly used components in Android development. It is mainly used to display pictures, but it can not only display pictures, but any Drawable object can use it to display.
2. Basic use of ImageView
The following implements adding an ImageView to the layout file to display pictures, and only sets the basic properties such as the width and height of the ImageView, background color, and src of the picture. The realization effect is shown in the figure below.
The background color is set here because sometimes the picture cannot completely fill the entire ImageView, adding a background color is convenient for viewing the display effect.
<ImageView
android:id="@+id/imageView"
android:layout_width="250dp"
android:layout_height="200dp"
android:background="#ff0000"
app:srcCompat="@drawable/winter" />
3. Common properties of ImageView
- android:maxWidth: The maximum width of the ImageView.
- android:maxHeight: The maximum height of the ImageView.
- android:adjustViewBounds: Used to adjust the boundary of ImageView so that ImageView has the same aspect ratio as the picture, usually used together with maxWidth and maxHeight.
- app:srcCompat: Set the reference of the Drawable object to be displayed.
- android:scaleType: Set the zoom type of the image, which will be described in detail later.
4. How to load several pictures
ImageView loads images in the following ways:
- Set the attribute app:srcCompat in the layout file to load local images.
- setImageResource(int resId): load the resource file in the drawable folder.
- setImageURI(Uri): load the picture file in the mobile phone.
- setImageBitmap(Bitmap): Load Bitmap.
- setImageDrawable(Drawable)：加载 Drawable。
Five, ImageView zoom type
The android:scaleType attribute of ImageView is used to set the scaling type of the image, and there are 8 scaling types as follows.
- android:scaleType="centerInside": The image is scaled down or kept at its original size, and displayed in the center of the ImageView.
- android:scaleType="fitStart": The image is scaled up or down to the width or height of the ImageView, displayed in the upper left corner of the ImageView, and the image will be fully displayed.
- android:scaleType="fitEnd": The image is scaled up or down to the width or height of the ImageView, displayed in the lower right corner of the ImageView, and the image will be fully displayed.
- android:scaleType="center": Display the image in the center of the ImageView according to its original size. If the image size is larger than the ImageView width and height, only part of the image will be displayed, and the image will not be scaled.
- android:scaleType="matrix": The image transformed by matrix is displayed in the upper left corner of ImageView. If the size of the scaled image is larger than the width and height of ImageView, only part of it will be displayed. This mode needs to be used in conjunction with ImageView.setImageMatrix(Matrix matrix) , because this mode needs to be used to specify a transformation matrix to specify how to display the image. In fact, the other 7 modes generate corresponding transformation matrices internally through ImageView.
An example of setting matrix is as follows:
imageView.setScaleType(ImageView.ScaleType.MATRIX); //设置为矩阵模式
Matrix matrix = new Matrix(); //创建一个单位矩阵
matrix.setTranslate(100, 100); //平移x和y各100单位
matrix.preRotate(30); //顺时针旋转30度
matrix.setScale(0.5, 0.5); //设置缩放比例
imageView.setImageMatrix(matrix); //设置并应用矩阵
- android:scaleType="fitXY": Stretches the image to fill the entire ImageView, without scaling it proportionally.
- android:scaleType="fitCenter": This mode is used by default. The image is enlarged or reduced proportionally to the width and height of the ImageView, and then displayed in the center.
- android:scaleType="centerCrop": The image is proportionally scaled to completely fill the entire ImageView, displayed in the center, and the enlarged redundant part is cropped.
It's not easy to be original, just give it a thumbs up and leave. . .
