Show the click effect of the Material style for earlier Android projects.

Show the click effect of the Material style for earlier Android projects.

Welcome to my Sina Weibo:Http://weibo.com/kifile

Reprinted please indicate the sourceHttp://blog.csdn.net/kifile)

 

Every day, it is a happy and unfortunate life that is entangled by different needs, this is not what our dear designers have asked us to implement click effects similar to Material Design on the Android platform of lower versions.

Although we all know that MaterialDesign looks a lot better, it is a hard job to adapt to a lower version.

However, after using the nineoldandroids open-source library, we finally achieved this effect.

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

Two more images are provided, which are based on TextView and ImageView:

Figure 1 click effect after TextView and ImageView

1. Code Implementation Logic

First, we will analyze the implementation logic of this click effect.

The processing of click effects is divided into two phases:

A. Press your finger:

When the user touches the control, first let the control display a light mask, and then from the finger pressed position, a dark mask gradually expands to the entire control.

B. Finger bounce:

After you release your finger, there are two cases: one is that the dark mask has been extended to the entire control range, and the other is that the dark mask has not completely surrounded the entire control.

In the previous case, we made a simple transparency change so that the mask gradually disappears;

In the latter case, we need to allow the dark mask to quickly spread from the current position to the entire control. At the same time, we also need to change the transparency. It is too abrupt to place the mask.

For specific code implementation logic, see here: https://github.com/Kifile/MaterialView/blob/master/materialwidget/src/main/java/com/kifile/materialwidget/MaterialBackgroundDetector.java, MaterialBackgroundDetector onTouchEvent processing.

2. Use the library file to achieve the Material click Effect

Currently, I have deployed this project to the Maven central repository. If you are interested in the deployment logic, read this article (step by step to share the open-source project with the Maven central repository ), therefore, if you are using Android Studio for project development, you can use the following code to integrate the Library:

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

By introducing the maven project in the gradle. build File, we can now officially use this click effect.

A. inherit the control you want to implement. The Code is as follows:

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 a MaterialBackgroundDetector object in the init Method for event delegation:

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. Rewrite the parent class method and delegate the corresponding event to the mDetector object for 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) process the click event to the mDetector.

When we click controls, the android Click Event Processing Mechanism will take effect. If a page Jump exists in your click callback function, you may find that, after you click it, the deep-color mask in the key has not been moved to the entire control, and the entire interface has been redirected. This will cause the Material animation to stop immediately after the jump.

To solve this problem, we need to process click events in the inherited space. We first let the mDetector receive the click request. After the animation is executed, it is then distributed to the control for 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) rewrite the following method:

@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 implementation of the entire interface effect. Congratulations!

3. Obfuscation

In fact, many times we may involve obfuscation of code. In order to avoid application failure caused by code processing by obfuscation tools, add the following code to the configuration file:

-keep class com.kifile.materialwidget.MaterialBackgroundDetector {    public void setRadius(...);    public void setAlpha(...);}

Basically, the entire code usage process is here. Thank you for reading it. If you think it is helpful to yourself, please try again.