ScaleType attribute of ImageView in android learning notes

ScaleType attribute of ImageView in android learning notes

We know that an attribute of ImageView is scaleType, which has eight values: matrix, fitXY, fitStart, fitCenter, fitEnd, center, centerCrop, and centerInside. Let's take a look at the meanings of these eight values.

I used two images for demo. The two images have a small and small resolution, and they are called big and small. The source image is as follows:

Big:

Small:

OK. The preparation is complete.

Matrix

Matrix indicates that the source image is drawn from the upper left corner of the ImageView. If the source image is larger than the ImageView, the excess part is cropped. If the source image is smaller than the ImageView, no processing is performed on the source image. For example, if two images of different sizes are displayed on the ImageView of 96dp × 96dp respectively, different effects are displayed. The Code is as follows:

    <imageview android:layout_width="96dp" android:layout_height="96dp" android:adjustviewbounds="false" android:background="#ffaa77" android:scaletype="matrix" android:src="@drawable/big">    <imageview android:layout_width="96dp" android:layout_height="96dp" android:adjustviewbounds="false" android:background="#aa99cc" android:scaletype="matrix" android:src="@drawable/small"></imageview></imageview>

The display effect is as follows:

We can see that the big image is displayed only in the upper left corner because it is relatively large, and the other part is cropped, while the small image is relatively small in resolution, therefore, it is displayed in the upper left corner of the ImageView.

FitXY

FitXY's goal is to fill the entire ImageView. To accomplish this goal, it needs to scale the image. During the scaling process, it will not scale according to the original image ratio. For example:

    <imageview android:layout_width="96dp" android:layout_height="96dp" android:background="#ffaa77" android:scaletype="fitXY" android:src="@drawable/big">    <imageview android:layout_width="96dp" android:layout_height="128dp" android:background="#aa99cc" android:scaletype="fitXY" android:src="@drawable/small"></imageview></imageview>

The display effect is as follows:

Both images are displayed, but all of them are distorted to a certain extent. In this case, the system only needs to fill up the ImageView, instead of zooming the image according to the ratio of the source image.

FitStart

Scale the image proportionally to the width or height of the View (the minimum value of width and height), and then display it in the upper or lower left corner (related to the width or height of the Front). Let's look at the following example:

    <imageview android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaletype="fitStart" android:src="@drawable/big">    <imageview android:layout_width="256dp" android:layout_height="36dp" android:background="#aa99cc" android:scaletype="fitStart" android:src="@drawable/small"></imageview></imageview>

Display Effect:

The big image is scaled to the width of the ImageView, and then displayed in the upper corner. The small image is scaled to the height of the ImageView, and then displayed in the left corner.

FitCenter

FitCenter and fitStart are basically the same. The only difference between fitCenter and fitStart is that fitCenter displays the image after proportional scaling. See the following example:

    <imageview android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaletype="fitCenter" android:src="@drawable/big">    <imageview android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaletype="fitCenter" android:src="@drawable/small"></imageview></imageview>

The display effect is as follows:

FitEnd

FitEnd and fitStart are also basically the same. The only difference is that fitEnd scales the image proportionally and then displays the image right or bottom. For example, in the following Demo:

    <imageview android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaletype="fitEnd" android:src="@drawable/big">    <imageview android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaletype="fitEnd" android:src="@drawable/small"></imageview></imageview>

Center

Center indicates that the source image is centered according to the original size. If the size of the source image exceeds the size of ImageView, the excess part is cut and only the middle part of the image is displayed, for example, the following Demo:

    <imageview android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaletype="center" android:src="@drawable/big">    <imageview android:layout_width="256dp" android:layout_height="24dp" android:background="#aa99cc" android:scaletype="center" android:src="@drawable/small"></imageview></imageview>

The display effect is as follows:

CenterCrop

The goal of centerCrop is to fill the ImageView with full size. Therefore, the original image can be scaled proportionally so that the ImageView can be filled with full size and the excess width or height can be cropped. For example, in the following Demo:

    <imageview android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaletype="centerCrop" android:src="@drawable/big">    <imageview android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaletype="centerCrop" android:src="@drawable/small"></imageview></imageview>

The display effect is as follows:

CenterInsid

The goal of centerInside is to completely display the source image. Therefore, you can scale the source image proportionally so that the ImageView can completely display the source image, for example, the following Demo:

    <imageview android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaletype="centerInside" android:src="@drawable/big">    <imageview android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaletype="centerInside" android:src="@drawable/small"></imageview></imageview>

The display effect is as follows:

OK, so much about scaleType attributes,Generally,These attributes can be used only when the width and height of the ImageView are fixed values.