Let low-version Android projects show Material-style click Effects

you are welcome to follow my Sina Weibo blog: Http://weibo.com/kifile

Reprint Please indicate the source (http://blog.csdn.net/kifile)

It's a happy and unfortunate life to be haunted by different needs, and it's not our dear designers who let us implement a click effect similar to Material Design on a low-version Android platform.

Although we all know that materialdesign is really good-looking, but let us for the low version of the adaptation is also a bitter job.

Fortunately, after the use of the Open Source Library nineoldandroids, it is finally achieved this effect.

First release a Github address, if you can go there to see the source: Https://github.com/Kifile/MaterialView, can Star a bit better.

Give two more, respectively, based on the TextView and ImageView click Effect:

Figure 1 Click Effect after application of TextView and ImageView

1. Code implementation Logic

First we analyze the implementation logic of this click effect.

The processing of the Click effect is mainly divided into two stages:

a. Press the finger:

When the user touches the control, first we let the control display a light layer of matte, and then from the point where the finger is pressed, a dark matte is gradually extended to the entire control.

B. Finger Bounce:

When the user releases the finger, there are two cases where a dark matte has been extended to the entire control , and one is that the dark matte has not yet completely encircled the entire control .

In the former case, we simply make a change in transparency and let the mask fade away;

In the latter case, we need to quickly diffuse the dark mask from its current position to the entire control, while also making transparency changes, where the placement mask disappears too abruptly.

For specific code implementation logic, see here: https://github.com/Kifile/MaterialView/blob/master/materialwidget/src/main/java/com/kifile/ Materialwidget/materialbackgrounddetector.java, Materialbackgrounddetector in the treatment of ontouchevent.

2. Use the library file to achieve Material click Effect

Now that I've deployed this project to the MAVEN central repository, if you're interested in the logic of deployment, take a look at this article (step-by-step to share your open source project to the MAVEN central repository ), so if you're using Android Studio to develop projects, You can integrate this library by using the following code:

dependencies {    compile ' com.kifile:materialview:1.0 '}

by introducing the MAVEN project into the Gradle.build file, we can now formally use the Click Effect.

A. Inherit the control you want to implement, with the following code:

public class Materialimageview extends ImageView {public    Materialimageview (context context) {        super (context);        init (null, 0);    }    Public Materialimageview (context context, AttributeSet Attrs) {        Super (context, attrs);        Init (attrs, 0);    }    Public Materialimageview (context context, AttributeSet attrs, int defstyle) {        Super (context, attrs, defstyle);        Init (attrs, Defstyle);}    }

B. Create an Materialbackgrounddetector object in the Init method for the event delegate:

Private materialbackgrounddetector mdetector;private void init (attributeset attrs, int defstyle) {    final TypedArray A = GetContext (). Obtainstyledattributes (            attrs, Com.kifile.materialwidget.r.styleable.materialtextview, Defstyle, 0);    int color = A.getcolor (Com.kifile.materialwidget.r.styleable.materialtextview_maskcolor, Materialbackgrounddetector.default_color);    A.recycle ();    Mdetector = new Materialbackgrounddetector (GetContext (), this, null, color);}

C. Overriding the parent class method, delegating the corresponding event to the Mdetector object processing

@Overrideprotected void onsizechanged (int w, int h, int oldw, int oldh) {    super.onsizechanged (W, H, OLDW, OLDH);    Mdetector.onsizechanged (W, h);} @Overridepublic boolean ontouchevent (Motionevent event) {    Boolean superresult = Super.ontouchevent (event);    Return Mdetector.ontouchevent (event, superresult);} @Overrideprotected void OnDraw (canvas canvas) {    super.ondraw (canvas);    if (Isineditmode ()) {        return;    }    Mdetector.draw (canvas);}

d. (optional) Handing over the Click event to Mdetector

When we click on the control, Android's own Click event Processing mechanism will work, if you have a click callback function in the page jump, then you may find that when you click, the key in the dark mask has not yet spread to the entire control, the entire interface has been jump. This causes the material animation to appear to stop at the flash of the jump.

To solve this problem, we need to deal with the Click event in the inherited space, we first let Mdetector receive the click Request, when the animation is finished, then distribute to the control to do the click Processing.

Therefore, you need to implement the following code:

1) in the Init method, change NULL to this to enable the control to implement the callback interface

Mdetector = new Materialbackgrounddetector (GetContext (), this, this, color);

2) Override the following methods:

@Overridepublic Boolean PerformClick () {    return Mdetector.handleperformclick ();} @Overridepublic Boolean Performlongclick () {    return Mdetector.handleperformlongclick ();} @Overridepublic void Performclickafteranimation () {    super.performclick ();} @Overridepublic void Performlongclickafteranimation () {    super.performlongclick ();}

so far, you have successfully completed the entire implementation of the interface effect, congratulations!

3. With regard to confusion

In fact, many times, we may involve the confusion of the code, in order to avoid confusion during the process of obfuscation, the processing of the code causes the application of the program failed, we need to add the following code in the obfuscation configuration file:

-keep class Com.kifile.materialwidget.MaterialBackgroundDetector {public    void Setradius (...);    public void Setalpha (...);}

Basically the whole code of the use of the process is here, thank you for your reading, if you feel that you have help, please also top.

Let low-version Android projects show Material-style click Effects