Android Practice Note (10) --- src attribute of ImageView VS blackground attribute

Android Practice Note (10) --- src attribute of ImageView VS blackground attribute

 

 

Problem Analysis

I believe everyone is familiar with the ImageView image component. It is used to display images!

You can use the src attribute or the blackground attribute to set the displayed image!

Everyone knows this, but do you have to worry about how to use and under what circumstances?

It is estimated that many of my friends have not answered this question. Haha, Let's explain these two attributes in this section!

 

 

From simple to deep, let's talk about what most people know:

 

I. Common sense

① Background generally refers to the background, while src refers to the content !!

② When using src to fill in the image, it is directly filled according to the image size and will not be stretched

Filling in the image with background will be stretched Based on the width specified by ImageView.

 

It is useless to say more. Write a simple layout test:

Main. xml:

 

The code is very simple. The first two use blackground and the last two use src, as follows:

 

Analysis:

The width and height are all wrap_content, which is the same as the source image size. However, if we fix the width or height,

The difference is obvious. blackground completely fills the entire ImageView, while src is still so big,

And he is centered. This involves another scaleType attribute of ImageView!

Another point is that we can only set width or height! We also set

If width and height are used, the blackground is still filled. However, the size of src may change!

For example, we test the following code:

 

:

 

 

Ps: As for the scaleType of ImageView, I will not explain it in detail here. For details, refer to another blog post by the author:

ImageView Image view of android-UI component examples

In addition, this attribute only takes effect for the src attribute !! Remember !!

 

 

 

 

Ii. Solution to deformation of Images Caused by blackground stretching

In the second Imageview above, we can see that the image has been stretched and deformed,

The square turns into 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:

 

1) 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);  

2) In addition to dynamically loading views, we will still introduce ImageView in xml layout.

 

The solution is not difficult, that is, it is done through the Bitmap resource file of drawable, and then set the blackground attribute to this file!

This xml file is created in the drawable folder, which must be created by yourself !!

Pen_bg.xml:

 

The above code is not difficult to understand. It is estimated that the titleMode attribute is the most confusing attribute. This attribute is tiled, that is, we set it in windows.

 

The background is tiled. Multiple small icons are filled with the whole 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 attribute is effective only when src is used !!

 

!!!! Set setAlpha () in src !!!!!

 

 

4. Combination of the two advantages:

This is a picture on the Internet:

 

A simple GridView, each item is an ImageView, but you may find it carefully,

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 !)

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

The Code is as follows:

 

In addition, you can also use selctor to achieve the click effect and set different images for different situations to achieve the click or touch effect!

 

 

 

 

 

Well, this section is here. If you have any questions or find any mistakes in this article, please let us know. Thank you very much !!