Android learning notes-ImageView (Image view), android-imageview

Android learning notes-ImageView (Image view), android-imageview

From: http://www.runoob.com/w3cnote/android-tutorial-imageview.html

 

This section introduces:

The basic UI control introduced in this section is: ImageView (Image View), which is a View or control used to display images! Official API: ImageView. This section describes the following content:

1. Differences between the src attribute and the background attribute:

In the API documentation, we found that ImageView has two attributes that can be set for images: src and background.
Common sense:
① Background generally refersBackgroundWhile src refersContent!!
② When usedSrcWhen you fill in an image, it is based on the image size.Direct Filling, AndDo not stretch
However, filling in the image with background will be performed based on the width specified by ImageView.Stretch

1) Differences in code writing and verification:

Write a simple layout test:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/LinearLayout1"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="vertical"      tools:context="com.jay.example.imageviewdemo.MainActivity" >        <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:background="@drawable/pen" />        <ImageView          android:layout_width="200dp"          android:layout_height="wrap_content"          android:background="@drawable/pen" />        <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:src="@drawable/pen" />        <ImageView          android:layout_width="200dp"          android:layout_height="wrap_content"          android:src="@drawable/pen" />    </LinearLayout> 

As follows:

Result Analysis:

The width and height are all wrap_content, which is the size of the source image. However, when we fix the width or height, the difference is obvious. blackground completely fills the entire ImageView, src is still so big and centered. This involves another scaleType attribute of ImageView! Another point is that we can only set width or height! If both width and height are set, the blackground is still filled, but the size of src may change! For example, we test the following code:

<ImageView          android:layout_width="100dp"          android:layout_height="50dp"          android:src="@drawable/pen" />

Run:

PS: scaleType ~

2) solution to blackground stretching leading to image deformation

In the second Imageview above, we can see that the image has been stretched and deformed, and the square has become a rectangle. It is obviously unacceptable for people with slight obsessive-compulsive disorder like me, is there a way to set it? The answer must be yes. For the moment, I have two methods:

• This is suitable for dynamically loading ImageView, and the code is gradually getting better, as long as the View is added, it can be case-insensitive.

LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(48, 48);            layout.addView(ibtnPen, layoutParam); 

• In addition to dynamically loading the view, it is not difficult to introduce the ImageView solution through xml layout, that is, through the drawable Bitmap resource file, then set the blackground property to this file! This xml file is created in the drawable folder, which must be created by yourself !!

Pen_bg.xml:

<bitmap      xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@id/pen_bg"      android:gravity="top"      android:src="@drawable/pen"      android:tileMode="disabled" >  </bitmap>

The above code is not hard to understand. It is estimated that the titleMode attribute is the most confusing attribute. This attribute is tiled, that is, when we set the background for windows, multiple small icons will fill the entire screen! Remember! You can try it yourself! Disabled is to deny him!
This is the simple code above. The Calling method is as follows:
Dynamic: ibtnPen. setBacklgroundResource (R. drawable. penbg );
Static: android: background = "@ drawable/penbg"

3) Transparency setting

Let's talk about the two differences. Let's talk about the setAlpha attribute! This is very simple. This property,Only src works !!

4) combined advantages:

A picture on the Internet:

It looks like a simple GridView. Every item is an ImageView, but you may find that the ICON above is not a rule, but a circle, a rounded rectangle, and so on, so src + background is used here! To achieve the above effect, you only need two operations:Find a transparent png Image + set a black background(You can also set the transparency of png, but the result may be different from what you expected !) Let's write a simple example:

The cute and cute pig is displayed on the ImageView. Haha, blackground sets the blue background!

Implementation Code:

<ImageView      android:layout_width="150dp"      android:layout_height="wrap_content"      android:src="@drawable/pig"      android:background="#6699FF" /> 

PS: Of course, you can also use selctor to achieve click effects and set different images for different situations to achieve click or touch effects!

5) set the blackground and src attributes in Java code:

Foreground (corresponding to the src attribute ):SetImageDrawable();
Background (corresponding to the background attribute ):SetBackgroundDrawable();

2. adjustViewBounds: Set whether to save the aspect ratio of the source image.

ImageView provides usAdjustViewBoundsAttribute, used to set whether to maintain the aspect ratio of the source Image During Scaling! Independent settings do not work and must be used togetherMaxWidthAndMaxHeightAttribute used together! These two attributes also take effect only when the value of adjustViewBounds is true ~
 
 

  
  
Android: maxHeight: sets the maximum height of the ImageView.
  
  
Android: maxWidth: sets the maximum width of the ImageView.
 
 

Sample Code:

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" tools: context = ". mainActivity "> <! -- Normal image --> <ImageView android: id = "@ + id/imageView1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_margin = "5px" android: src = "@ mipmap/meinv"/> <! -- Limits the maximum width and height, and sets the adjustment boundary to maintain the aspect ratio of the displayed image --> <ImageView android: id = "@ + id/imageView2" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_margin = "5px" android: adjustViewBounds = "true" android: maxHeight = "200px" android: maxWidth = "200px" android: src = "@ mipmap/meinv"/> </LinearLayout>

Run:

Result Analysis:The large image is an image without any processing. Its size is 541.In the following example, we use maxWidth and maxHeight to limit the maximum width and height of ImageView to 374 PX, that is, we can only display a maximum of 200For the image of 200, we set anotherAdjustViewBounds = "true"Adjust Our boundary to maintain the aspect ratio of the image. The ImageView width and height are 128*200 ~

3. Set scaling type for scaleType

Android: scaleType is used to set how the displayed image scales or moves to fit the ImageView size. in Java code, you can use imageView. setScaleType (ImageView. ScaleType. CENTER) to set ~ Optional values:
 
 

  
  
FitXY: Scale the image horizontally and vertically so that the image can be fully adapted to ImageView. However, the horizontal and vertical ratios of the image may change.
  
  
FitStart: Maintain the aspect-to-aspect ratio of the scaled Image. If you know that the longer side is equal to the programming of the Image, place the Image in the upper left corner of the ImageView.
  
  
FitCenter: Same as above, scaled and placed in the middle;
  
  
FitEnd: Same as above, scaled and placed in the lower right corner;
  
  
Center: Keep the source image size in the center of ImageView. When the size of the source image is greater than the size of the ImageView, part of the cropping process is exceeded.
  
  
CenterCrop: Keep the image horizontally or vertically scaled. If you know that the image view is completely overwritten, the image may not be completely displayed.
  
  
CenterInside: The image is scaled horizontally and vertically until the Image view can fully display the image.
  
  
Matrix: Default value. It does not change the size of the source image. The source image is drawn from the upper left corner of the ImageView. The cropped part of the source image exceeds the size of the ImageView.
 
 

Next we will compare them in a group:

1) 1. fitEnd, fitStart, fitCenter

Here, fitEnd is used as an example. The other two are similar:

Sample Code:

<! -- Maintain horizontal and vertical scaling of the image, know that the image can be displayed on the ImageView component, and display the scaled image in the lower right corner of the imageView --> <ImageView android: id = "@ + id/imageView3" android: layout_width = "300px" android: layout_height = "300px" android: layout_margin = "5px" android: scaleType = "fitEnd" android: src = "@ mipmap/meinv"/>

Run:

2) centerCrop and centerInside

• CenterCrop: scales horizontally and vertically to completely overwrite the entire ImageView.
• CenterInside: scales horizontally and vertically so that the ImageView can fully display the image.

Sample Code:

<ImageView        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="centerCrop"        android:src="@mipmap/meinv" />    <ImageView        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="centerInside"        android:src="@mipmap/meinv" />

Run:

3) fitXY

Scale the image proportionally. The goal is to fill the image with the entire View.

Sample Code:

<ImageView        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="fixXY"        android:src="@mipmap/meinv" />

Run:

Okay, obviously flattened =-= ~

4) matrix

Draw the source image from the upper left corner of the ImageView. Crop the part where the source image exceeds the ImageView.

Sample Code:

<ImageView        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="matrix"        android:src="@mipmap/meinv" />

Run:

5) center

Keep the source image size in the center of ImageView. When the size of the source image is greater than the size of the ImageView, part of the cropping process is exceeded.

Sample Code:

<ImageView        android:layout_width="300px"        android:layout_height="300px"        android:layout_margin="5px"        android:scaleType="center"        android:src="@mipmap/meinv" />

Run:

4. The simplest way to draw a circular ImageView

I believe everyone is familiar with the circular or rounded ImageView. Many apps now like the circular avatar ~

Here we will simply write a circular ImageView. Of course, this is just an example. If performance and anti-aliasing are not considered !!!

It can be said that it is writing and playing games. For actual projects, you can consider using the controls written by cool people on Github, such as the following two:

I have taught you how to use git ~ Clone the project and copy the related files to your project ~

RoundedImageView

CircleImageView