Android development-Android common components-ImageView image view

4.4 ImageView (image view)

ImageView is a well-known name, which is a View or control used to display images

Knowledge points to be mastered:

1. The difference between the src attribute of ImageView and blackground;
2. adjustViewBounds sets whether the image is scaled according to the aspect ratio
3. scaleType sets the zoom type
4. The simplest way to draw a circular ImageView

• The difference between the src attribute and the background attribute

　　　　In the API documentation, we found that ImageView has two properties that can set pictures, namely: src and background

　　　　common sense:

　　　　① background usually refers to the background, and src refers to the content!!

　　　　② When using src to fill in the picture, it will be filled directly according to the size of the picture, and will not be stretched, while filling in the picture with background will be stretched according to the width given by ImageView

case:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linerLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_launcher_round"/>

    <ImageView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_launcher_round"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"/>

    <ImageView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"/>

</LinearLayout>

•  Set background and src attributes in Java code:

　　　　Foreground (corresponding to src attribute): setImageDrawable();

　　　　Background (corresponding to background property): setBackgroundDrawable();

• Combining the two works:

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:padding="20dp"
        android:background="@mipmap/ic_launcher_round"　　//背景
        android:src="@mipmap/wode"/>　　　　//前景

 

•  scaleType attribute android:scaleType

android:scaleType is used to set how the displayed image scales or moves to fit the size of the ImageView. It can be set by imageView.setScaleType(ImageView.ScaleType.CENTER); in Java code. The optional values ​​are as follows:

fitXY	Scale the image horizontally and vertically independently so that the image fits the ImageView completely, but the aspect ratio of the image may change
fitStart	Keep the aspect ratio and scale the picture until the longer side is equal to the programming of the Image, and place the picture in the upper left corner of the ImageView after the scaling is complete
fitCenter	Same as above, scaled and placed in the middle
fitend	Same as above, scaled and placed in the lower right corner
center	保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size，超过部分裁剪处理
centerCrop	保持横纵比缩放图片，直到完全覆盖ImageView，可能会出现图片的显示不完全
centerInside	保持横纵比缩放图片，直到ImageView能够完全地显示图片
matrix	默认值，不改变原图的大小，从ImageView的左上角开始绘制原图， 原图超过ImageView的部分作裁剪处理

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/linerLayout1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".MainActivity">
<!--fitXY:对图像的横向与纵向进行独立缩放，使得该图片完全适应ImageView，但是图片的横纵比可能会发生改变-->
 <ImageView
 android:background="@color/lawn_green"
 android:layout_width="300dp"
 android:layout_height="30dp"
 android:layout_gravity="center"
 android:scaleType="fitXY"
 android:src="@mipmap/ic_launcher_round"/>
<!--fitStart:保持纵横比缩放图片，直到较长的边与Image的编程相等，缩放完成后将图片放在ImageView的左上角-->
 <ImageView
 android:background="@color/lawn_green"
 android:layout_width="300dp"
 android:layout_height="30dp"
 android:layout_gravity="center"
 android:scaleType="fitStart"
 android:src="@mipmap/ic_launcher_round"/>
<!--fitCenter:同上，缩放后放于中间-->
 <ImageView
 android:background="@color/lawn_green"
 android:layout_width="300dp"
 android:layout_height="30dp"
 android:layout_gravity="center"
 android:scaleType="fitCenter"
 android:src="@mipmap/ic_launcher_round"/>
<!--fitEnd:同上，缩放后放于右下角-->
 <ImageView
 android:background="@color/lawn_green"
 android:layout_width="300dp"
 android:layout_height="30dp"
 android:layout_gravity="center"
 android:scaleType="fitEnd"
 android:src="@mipmap/ic_launcher_round"/>
<!--center:保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size，超过部分裁剪处理-->
 <ImageView
 android:background="@color/lawn_green"
 android:layout_width="300dp"
 android:layout_height="30dp"
 android:layout_gravity="center"
 android:scaleType="center"
 android:src="@mipmap/ic_launcher_round"/>
<!--centerCrop:保持横纵比缩放图片，直到完全覆盖ImageView，可能会出现图片的显示不完全-->
 <ImageView
 android:background="@color/lawn_green"
 android:layout_width="300dp"
 android:layout_height="30dp"
 android:layout_gravity="center"
 android:scaleType="centerCrop"
 android:src="@mipmap/ic_launcher_round"/>
<!--centerInside:保持横纵比缩放图片，直到ImageView能够完全地显示图片-->
 <ImageView
 android:background="@color/lawn_green"
 android:layout_width="300dp"
 android:layout_height="30dp"