[Material Design] teaches you how to create a Material style, Animation button (MaterialButton), materialdesign

[Material Design] teaches you how to create a Material style, Animation button (MaterialButton), materialdesign

Original works, reproduced please indicate the source: http://blog.csdn.net/qiujuer/article/details/39831451

Some time ago, Android L was released. I believe that all the friends I know at the press conference are"Material Design"Are you surprised! At least I am.

I am sorry to be amazed because it must be used on "Android L". MD is depressing.
Then I tried to get a click animation. This thought was out of control. I simply wrote a new one when I was not doing anything" MaterialButton"Control.
What is not discussed here:" Material Design".
Here we will share with you what I made myself: Material Design"Style" MaterialButton"Button animation implementation.

Push:

Are you sure you have read the above two animations? Is it good? Anyway, I think it is nice to have such an animation on a mobile phone. Compared to mobile phones, it is used to increase the experience. However, these animations can only be used in Android L. For the current situation of Android manufacturers in China, it is estimated that Google will be able to use this L version when it comes to a new version.

Next, let's take a look at my"MaterialButton"Button:

Good results, right? Okay. Start working.

Introduce my tools:"Android Studio"Of course you can also use other products.

Step 1: Create a project)

Step 2: create a custom control: Right-click the java folder and choose Custom Control:

Name:"MaterialButton"

Now we can see that there is another class (MaterialButton), a layout file "sample_material_button", and an attribute file "attrs_material_button"

The second step is complete. 3 more files.

Step 3: Modify the "MaterialButton" class:

The steps are as follows: Delete the sample code, re-inherit from the "Button" class, and re-write the "onTouchEvent ()" method. Code after completion:

public class MaterialButton extends Button {    public MaterialButton(Context context) {        super(context);        init(null, 0);    }    public MaterialButton(Context context, AttributeSet attrs) {        super(context, attrs);        init(attrs, 0);    }    public MaterialButton(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        init(attrs, defStyle);    }    private void init(AttributeSet attrs, int defStyle) {        // Load attributes        final TypedArray a = getContext().obtainStyledAttributes(                attrs, R.styleable.MaterialButton, defStyle, 0);        a.recycle();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        return super.onTouchEvent(event);    }}

Is it much cleaner? The third step is complete.

Step 4: make the actual animation. here we need to talk about three things to be aware:

1. click Event response. This is easy to understand. It is completed in the onTouchEvent () method. What we need to do in this method is to start an animation after clicking, at the same time, you need to obtain the click position.

2. Animation: the animation here is not a zoom-in animation but a property animation. To tell the truth, it's not just a little bit clear. Simply put, an attribute change can be controlled in an animation. Here, a width and a color attribute can be created in the "MaterialButton" class, then control the changes of these two attributes in the animation.

3. Attribute establishment and determination of attribute change areas.

First, create two attributes:

Private Paint backgroundPaint; private float radius; private Property <MaterialButton, Float> mRadiusProperty = new Property <MaterialButton, Float> (Float. class, "radius") {@ Override public Float get (MaterialButton object) {return object. radius;} @ Override public void set (MaterialButton object, Float value) {object. radius = value; // refresh Canvas invalidate () ;}}; private Property <MaterialButton, Integer> mBackgroundColorProperty = new Property <MaterialButton, Integer> (Integer. class, "bg_color") {@ Override public Integer get (MaterialButton object) {return object. backgroundPaint. getColor () ;}@ Override public void set (MaterialButton object, Integer value) {object. backgroundPaint. setColor (value );}};

Comparing the two attributes, we can find that the attribute"Set"The operation calls"Invalidate ()"Method. The function of this method is to tell the system to refresh the current control"Canvas", That is, triggered once:"OnDraw (Canvas canvas)"Method.

Then re-write"OnTouchEvent ()The method is as follows:

@ Override public boolean onTouchEvent (MotionEvent event) {if (event. getAction () = MotionEvent. ACTION_DOWN) {// record coordinate paintX = event. getX (); paintY = event. getY (); // start the animation startAnimator ();} return super. onTouchEvent (event );}

In this method, first determine whether the event is clicked, record the coordinates, and start the animation.

When the animation method"StartAnimator ()"Method, we write as follows:

Private void startAnimator () {// calculate the int start and end of the radius variation region; if (getHeight () <getWidth () {start = getHeight (); end = getWidth () ;}else {start = getWidth (); end = getHeight () ;}float startRadius = (start/2> paintY? Start-paintY: paintY) * 1.15f; float endRadius = (end/2> paintX? End-paintX: paintX) * 0.85f; // create an animation, Which is set = new AnimatorSet (); // Add a property set. playTogether (// ObjectAnimator with a radius change. ofFloat (this, mRadiusProperty, startRadius, endRadius), // color change black to transparent ObjectAnimator. ofObject (this, mBackgroundColorProperty, new ArgbEvaluator (), Color. BLACK, Color. TRANSPARENT); // set the time set. setDuration (long) (1200/end * endRadius); // set quickly and then slowly. setInterpolator (new DecelerateInterpolator (); set. start ();}

In this step, we need to know that some buttons are not horizontal, so the length is not necessarily greater than the width, so we need to first determine the longest and shortest obtained, then, calculate the start radius and end radius. Here is my idea:

We know that in AndroidCentered on the top left foot, And then the right side is X positive, and the bottom is Y positive. Therefore, the above coordinate system is created.

The blue rectangle area represents the button, and the blue point represents the clicked point. The gray rectangle represents the start area after the click, and then the four sides start to spread. The above is a simple principle. Of course, the train of thought is a little jumping. If you don't understand it, you can comment on me below.Reply.

Step 5: Draw, that is, draw; this step is to use the above radius and paint color for actual painting.

Here you need to know:

1: painting is in:"OnDraw (Canvas canvas)"Done In the Method

2: on the canvas (CanvasIn short, it is the process of first painting the background, then painting the house, then painting the people, and finally painting some small details from the bottom up.

3: Each drawing is a new drawing board, indicating that you need to draw from the background and then arrive at people.OnDraw (Canvas canvas)"Canvas (Canvas) Is New ).

It is actually very easy to say so much, because the complicated ones are all completed in the previous step. "OnDraw (Canvas canvas)"Source code is as follows:

    @Override    protected void onDraw(Canvas canvas) {        canvas.save();        canvas.drawCircle(paintX, paintY, radius, backgroundPaint);        canvas.restore();        super.onDraw(canvas);    }

Here, we first save the status of the canvas, draw a circle, then restore the last state, and then call the parent class for subsequent painting.

Here is an explanation:

1. WhySuper. onDraw (canvas)"Need to be placed at the end of the call?

Because the canvas is hierarchical, when "super. onDraw (canvas) "is used to draw fonts. If we put them in front, the result is that our circle will overwrite the font. Therefore, we need to draw a circle background first.

2. Why is there only one circle operation (Canvas. drawCircle ())?

Because "invalidate ()" is called in the radius attribute, each time the radius value is changed, an "onDraw (canvas)" operation is performed to draw a circle, in a certain period of time, the animation effect is formed when the circle with a gradually increasing radius is repeated.

Finally, the Code of this control is provided:

Public class MaterialButton extends Button {private Paint backgroundPaint; private float paintX, paintY, radius; public MaterialButton (Context context) {super (context); init (null, 0 );} public MaterialButton (Context context, AttributeSet attrs) {super (context, attrs); init (attrs, 0);} public MaterialButton (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); ini T (attrs, defStyle);} private void init (AttributeSet attrs, int defStyle) {// Load attributes final TypedArray a = getContext (). obtainStyledAttributes (attrs, R. styleable. materialButton, defStyle, 0);. recycle () ;}@ Override protected void onDraw (Canvas canvas) {canvas. save (); canvas. drawCircle (paintX, paintY, radius, backgroundPaint); canvas. restore (); super. onDraw (canvas) ;}@ Override public Boolean onTouchEvent (MotionEvent event) {if (event. getAction () = MotionEvent. ACTION_DOWN) {// record coordinate paintX = event. getX (); paintY = event. getY (); // start the animation startAnimator ();} return super. onTouchEvent (event);} private void startAnimator () {// calculate the int start and end of the radius variation region; if (getHeight () <getWidth () {start = getHeight (); end = getWidth ();} else {start = getWidth (); end = getHeight ();} float startR Adius = (start/2> paintY? Start-paintY: paintY) * 1.15f; float endRadius = (end/2> paintX? End-paintX: paintX) * 0.85f; // create an animation, Which is set = new AnimatorSet (); // Add a property set. playTogether (// ObjectAnimator with a radius change. ofFloat (this, mRadiusProperty, startRadius, endRadius), // color change black to transparent ObjectAnimator. ofObject (this, mBackgroundColorProperty, new ArgbEvaluator (), Color. BLACK, Color. TRANSPARENT); // set the time set. setDuration (long) (1200/end * endRadius); // set quickly and then slowly. setInterpolator (new DecelerateInterpolator (); set. start ();} private Property <MaterialButton, Float> mRadiusProperty = new Property <MaterialButton, Float> (Float. class, "radius") {@ Override public Float get (MaterialButton object) {return object. radius;} @ Override public void set (MaterialButton object, Float value) {object. radius = value; // refresh Canvas invalidate () ;}}; private Property <MaterialButton, Integer> mBackgroundColorProperty = new Property <MaterialButton, Integer> (Integer. class, "bg_color") {@ Override public Integer get (MaterialButton object) {return object. backgroundPaint. getColor () ;}@ Override public void set (MaterialButton object, Integer value) {object. backgroundPaint. setColor (value );}};}

Of course, the subsequent work also involves buttons of different colors and button attributes;

These are all completed in my project. Let's try them:

Genius-Android

The following will share the animation implementation of the rectangular bar after the click, not the circle, but the rounded corner.

What is Material Design?

Google released the brand new Design language Material Design. Google said the design language aims to provide a more consistent and broader "Look and Feel" for mobile phones, tablets, desktops, and other platforms ".
Matias Durate, head of user experience at Google's Android operating system, said in a keynote speech at today's I/O Developer Conference: "We imagine that if pixels are colored, what kind of scenarios is there depth? What if there is a material that can change its texture? This imagination eventually led us to develop a Design language called Material Design ."
Some important functions of the Material Design language include the upgraded version of the system font Roboto. The color is brighter and the animation effect is more prominent. Dulat also briefly talked about some changes to the new framework, which was also published in google.com/design today. Google's idea is to let developers on the Google platform master this new framework, so that all applications have a uniform appearance, just like the design principles Apple has proposed to developers.
Google has also re-designed its flagship application based on the new design language, including Gmail and Calendar for Android and web pages. You may still remember that you have recently seen articles about these changes. Some blogs have mastered the leaked screenshots, And the UI is more clean and simpler as the Gmail is redesigned.
On the Android platform, this new style is called Material. It supports various new animation effects, built-in real-time UI shadows, and hero elements that can be switched between different screens.

Floating material Animation

Don't want to answer questions in vain! (You have too many penalty points)
You can download images and Chinese subtitles!
Wait for someone else!
If you don't have one, just use me!
After adoption, provide seeds!
Sorry!
It is said that only the volume is finished!