Android view for dimming effect

Source: Internet
Author: User

Make a default image dimmed in Android project, with focus time-varying effect. I believe we can all kinds of ways, all kinds of means are easy to achieve this effect. Here is a record of the author's implementation of the effect of the process and encountered problems, for reference only.
See (Note: Because it is eclipse, so a little chromatic aberration, yellow to blue, but the effect of dark light is still obvious O (∩_∩) o~):

1. The idea of the first realization in the head is:
2 pictures, a dark image, a bright picture. Monitor the focus event and change the picture.
Eh, this is not a demo Ah, where a resource picture to get 2 copies, and this picture is obtained from the server, not practical.

2. Remember that you used to set the transparency of the control. OK, here's a try:
Well? There are 2 different overloaded methods, and the parameters are float and int respectively. What's the difference between the two?

 Public void setalpha (float Alpha)

Sets the value of the view's transparency to 0~1, 0 is completely transparent, and 1 is completely opaque. Note that this is the view.

 Public void setalpha (int Alpha)

Sets the transparency of the image, and the method is replaced by Setimagealpha (int) in the version of API 16

Well, seeing is real, let's see the effect separately:

Iv.setalpha (0.5f) is:

Setimagealpha (100), the effect is: ╮(╯▽╰)╭ gave me an abnormal exit.

07-08 21:17:12.012:e/androidruntime (29310): Java.lang.NoSuchMethodError:android.widget.ImageView.setImageAlpha

The test machine for android4.0.3, the corresponding API for 15.eclipse has set the corresponding 16 API, but the operation is hung ╮(╯▽╰)╭. Visual inspection should be a compatibility issue, here do not delve into, feel the targetversion about, but did not verify ha.
Here's another way, Iv.getbackground (). Setalpha (100), running effect and using Iv.setalpha (0.5f), but the degree of transparency is somewhat inconsistent (but not big). The former value is (1~255), the latter
for (0~1).

All right. Here you should find that the effect is far from what you want to achieve, and the author is disappointed. Because this I also Baidu Google "Android ImageView to achieve dimming effect", a bunch of links in the above method. This is obviously transparent,
Darken transparent, not for EH.

What's the way to keep looking for something else? Accidentally found a way to do this:

Color filter? is not the PS filter? See how it's used:

Filter effects can be achieved with setcolorfilter. such as: final Wallpapermanager Wallpapermanager = Wallpapermanager.getinstance (this);
Get Wallpaper
Final drawable wallpaperdrawable = wallpapermanager.getdrawable ();
Specifying filter colors and blending modes
Wallpaperdrawable.setcolorfilter (color.red, PorterDuff.Mode.MULTIPLY);
/* Note: Porterduff.mode enumeration value:
1.porterduff.mode.clear is not submitted to the canvas.
2.PORTERDUFF.MODE.SRC Show Top Draw picture
3.PORTERDUFF.MODE.DST Show Lower drawing pictures
4.porterduff.mode.src_over the normal drawing display, the upper and lower layers are drawn with overlapping covers.
5.porterduff.mode.dst_over the upper and lower layers are displayed. The lower level is shown on the home.
6.porterduff.mode.src_in draws the intersection of two layers. Displays the upper layer.
7.porterduff.mode.dst_in draws the intersection of two layers. Displays the lower layer.
8.porterduff.mode.src_out draws the non-intersecting portion of the upper layer.
9.porterduff.mode.dst_out remove the layer to draw the non-intersecting part.
10.porterduff.mode.src_atop removing the non-intersecting part of the layer from the upper intersection part
11.porterduff.mode.dst_atop taking the non-intersecting part of upper layer and the lower intersection part
12.porterduff.mode.xor//Dimming
13.porterduff.mode.darken//Brighten
14.porterduff.mode.lighten//For color filters
15.porterduff.mode.multiply
16.porterduff.mode.screen

To try the effect:

Iv.setcolorfilter (Color.transparent,porterduff.mode.xor);

Well, looks like the effect hasn't changed. Look at the usage notes above

 for the image

It looks like the image is set, not the control ImageView. OK, let's change to the following usage:

drawable drawable = imgs.get (i);d rawable.setcolorfilter (Color.transparent,porterduff.mode.xor); Iv.setimagedrawable (drawable);

Eh, it seems to have no effect. Then carefully pondering, is not the above used color value is wrong? Well, it's not right to change into a color.gray. No matter which color you use, the picture will not show up.

Well, I've compromised. Use the example in the above post to try it out. Change to a multi-layered style:

Drawable.setcolorfilter (color.gray,porterduff.mode.multiply);

O (∩_∩) o~ haha, the effect came out:

It's a good try. Then, when you get the focus, clear the filter off and it's OK.

Drawable.clearcolorfilter ();

is displayed as the original light map.

Note: In fact, the first 2 images posted by the author are not implemented using the above filter method. The above method is just a temporary discovery when we organize this blog. Just try, didn't think of success. If I had known how many times I had tried, I would not have used the following method.

Keep looking at ImageView's API and see what the properties are. I believe you will notice that the 2 methods peculiar to ImageView are:

     Public void setimagedrawable (drawable drawable)          1    this  ImageView.         Parameters    drawable The    drawable to set
     Public void setbackgrounddrawable (drawable background)     Use SetBackground (drawable) instead

What's the difference between these 2 people? It's easy to understand the people who believe in it.

When Setbackgrounddrawable is set, the control background color of the entire imageview changes.

When Setimagedrawable is set, the ImageView intermediate content area is filled with the picture. However, there are some margins around, and the entire control cannot be populated by default (which, of course, has property settings).

The
value of ScaleType represents the meaning: ImageView is the underlying picture display control in Android, which has an important property of ScaleType, a property that represents the way a picture is displayed, with a total of 8 values
Scaletype.center:: The picture size is the original size, if the picture size is larger than the ImageView control, the middle part of the picture is truncated, and if it is smaller, the picture is centered directly.
Scaletype.center_crop: The picture is scaled so that the short edge of the image is the same as the edge length of the ImageView, that is, it cannot be left blank, and the middle part is displayed after zooming.
Scaletype.center_inside: The picture size is larger than the ImageView picture is scaled down, until the entire picture can be centered in the ImageView, less than the imageview of the picture is not changed, directly centered display.
ScaleType.FIT_CENTER:ImageView the default state, large picture, etc., so that the whole picture can be centered in the ImageView, small graphs and other proportional amplification, the same overall center display in the ImageView.
Scaletype.fit_end: Zoom in the same way as Fit_center, just display the picture on the right or bottom instead of the center.
Scaletype.fit_start: Zoom in the same way as Fit_center, just display the picture on the left or top rather than centered.
Scaletype.fit_xy: Scales the picture proportionally to the same size as the ImageView.
Scaletype.matrix: The image is scaled according to a 3x3 matrix

For example, the blue icon is setimagedrawable and the back gray background is setbackgrounddrawable,src above the background. So everyone should be able to understand it.
All right. To get to the +scaletype.center_crop, there are these 2 attributes, which can completely darken and lighten the image.

1. Use a filter to cover the darkened image filter_bg.png as the source image of ImageView: setimagedrawable

2. Set the picture show.png to be displayed to the background: setbackgrounddrawable

3. When lighten, replace filter_bg.png with a picture transparent_bg.png completely transparent after cover

This results in darkening and brightening.

Note: When setting, to set SRC to populate the entire control Center_crop

< ImageView        Android:id = "@+id/ivs_show1"        android:layout_width= "315px"       android:layout_height= "120px"        android:src = "@drawable/filter_bg"        android:scaletype= "Centercrop"/>

Android view for dimming effect

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.