ImageView is one of the most commonly used controls in Android, and when using ImageView, it is necessary to use its scaleType property. This property specifies how you want the ImageView to display the image, including whether to scale, scaling, and where to display the image after scaling. Android provides eight scaleType attribute values, each of which corresponds to a presentation. Here is a graphic explanation of each scaleType attribute value.

First, this is the image that the test put into the ImageView with the characters from left to right to make it easier to distinguish. This image is 1920 by 1080, which is larger than the ImageView used for the test.

Here is the ImageView layout for testing:


       
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="300dip"
        android:layout_height="300dip"
        android:layout_gravity="center"
        android:background="@android:color/holo_purple"/>

</FrameLayout>Copy the code

You can see that the ImageView is square, its background color is purple, and the parent layout sets its background color to red so that it is easy to see the size of the individual controls. On the phone, the layout looks like this. The purple space is ImageView:

Writing in the front

The scaleType attribute can be set either in XML or in code:

Android: scaleType = "centerInside" / / XML imageView. SetScaleType (imageView. ScaleType. CENTER_INSIDE); / / codeCopy the code

There are eight Scaletypes, which can be divided into three types:

  1. In order toFIT_The first four, what they all have in common is that they all zoom in and out;
  2. In order toCENTER_The first three, what they all have in common is the center display, the center point of the image will be withImageViewThe center overlaps;
  3. ScaleType.MATRIXIf so, just turn to the end and read the content;

ScaleType.FIT_CENTER The default

This mode is the default mode for ImageView and will be used to display images if ScaleType is not set. In this mode, the image is proportionally scaled to fill the control and is centered:

In this example, because the image is larger than the height, it is scaled to the size of the control and centered, leaving the top and bottom blank. If the image is larger than it is wide, the center display will be left to right.

ScaleType.FIT_START

The image is scaled equally to the size of the control and displayed above or to the left of the control. As shown, this mode will leave the lower half of the ImageView white, or the right half of the ImageView white if the image is larger than the width.

ScaleType.FIT_END

The image is scaled equally to the size of the control and displayed below or to the right of the control. As shown, this mode will leave the top half of the ImageView white, or the left half of the ImageView white if the image is larger than the width.

ScaleType.FIT_XY

The image is scaled to the control size to fully fill the control size display. Note that this mode is not proportional scaling. This pattern is also the easiest to understand, as shown below:

ScaleType.CENTER

Without scaling, ImageView shows the center of the image, where the center of the image overlaps with the center of the ImageView, as shown. If the size of the image is smaller than the width and height of the control, the image is centered.

ScaleType.CENTER_CROP

This is my favorite mode because in this mode, the image is scaled in equal proportions until it completely fills the ImageView and is centered. This pattern is also the most commonly used pattern. As you can see, the height of the image is fully visible:

ScaleType.CENTER_INSIDE

Use this mode for the purpose of fully displaying the content of the image. The image will be proportionally scaled to be fully displayed in the ImageView and centered. If the image is smaller than the control size, the image will be directly centered:

Here you can see that this mode has the same effect as scaleType.fit_center because the image is larger than the ImageView size. If the image is smaller than the control size, you can see the difference between the two modes.

ScaleType.MATRIX

In general, the focus is on the end, and of the eight ScaleTypes, this pattern is the focus. This pattern needs to work with imageView.setimagematrix (Matrix Matrix) because it needs to be used to specify a transformation Matrix that specifies how the image will be displayed. In fact, the previous 7 modes are generated internally through ImageView corresponding transformation matrix, which is equivalent to providing a specific value of the mode, using this mode as long as the corresponding matrix, also can achieve the above seven display effects. I’m not going to talk about how to use matrices very quickly, so I won’t say it here. Also note that when used, you need to call first

imageView.setScaleType(ImageView.ScaleType.MATRIX);
Copy the code

Call again

imageView.setImageMatrix(matrix);
Copy the code

Be careful not to get the order wrong, otherwise there will be problems. Here’s the code:

imageView.setScaleType(ImageView.ScaleType.MATRIX);  // Set it to matrix mode

Matrix matrix = new Matrix();           // Create an identity matrix
matrix.setTranslate(100.100);          // Shift x and y by 100
matrix.preRotate(30);                   // Rotate 30 degrees clockwise
imageView.setImageMatrix(matrix);       // Set and apply the matrixCopy the code

Each line of code has a comment, which shows the effect as shown below.