Android is similar to Win8's metro UI (on)

 

I downloaded some apps from my phone last night and found that there are more and more main interfaces like win8. After you have compiled a class GridView or class Tab, it gives you a fresh feeling. Today on eoe accidentally found that someone has implemented this function source code (Address: http://www.eoeandroid.com/forum.php? Mod = viewthread & tid = 327557). download and run it immediately. The effect is dazzling, but there are some bugs. For example, when the click speed is very fast, the image will be enlarged, and two click events are triggered.

This example is based on the implementation of the great god in eoe. It simplifies and fixes bugs.

Effect:

First, popularize a small knowledge point:

Sometimes we need a slow gradient data in the project. For example, the width of the control increases in a certain proportion, and then the original length is restored in the same proportion.

 

package com.zhy._01;public class Test2{public static void main(String[] args){float val = 1; float s = 0.85f;int i = 0;s = (float) Math.sqrt(1 / s);

                System.out.println(val);while (i < 5){val = val *s ;System.out.println(val);i++;} s = 0.85f;i = 0;s = (float) Math.sqrt(s);while (i < 5){val = val *s ;System.out.println(val);i++;}}}

Output result:

 

 

1.01.08465231.17647061.27606151.3840831.50124881.3840831.27606151.17647061.08465231.0

Perfect. Basically, it is a symmetric gradient data. The gradient amplitude is determined by s in the Code. The closer it is to 1, the smaller it is. The opposite is true.

 

 

Now let's start the Code:

1. layout File

 

The layout file completes the above static effect. If you do not need to add a click animation or simply click the effect, you have completed writing such a menu, add a backgroud custom click button. Of course, here we have a gentle click animation, with custom ImageView complete.

 

2. MyImageView. java

 

Package com. ljp. ani01; import android. content. context; import android. graphics. matrix; import android. graphics. drawable. bitmapDrawable; import android. graphics. drawable. drawable; import android. OS. handler; import android. util. attributeSet; import android. util. log; import android. view. motionEvent; import android. widget. imageView; public class MyImageView extends ImageView {private static final String TAG = MyI MageView; private static final int scale_performance_init = 0; private static final int SCALING = 1; private static final int SCALE_ADD_INIT = 6;/*** control width */private int mWidth; /*** control height */private int mHeight;/*** control width: 1/2 */private int mCenterWidth; /*** the height of the control is 1/2 */private int mCenterHeight;/*** set a scaling constant */private float mMinScale = 0.85f; /*** whether the scaling ends */private boolean isFinish = true; public MyImageVie W (Context context) {this (context, null);} public MyImageView (Context context, AttributeSet attrs) {this (context, attrs, 0);} public MyImageView (Context context, attributeSet attrs, int defStyle) {super (context, attrs, defStyle);}/*** required initialization */@ Overrideprotected void onLayout (boolean changed, int left, int top, int right, int bottom) {super. onLayout (changed, left, top, right, bottom); if (changed) {mWidth = GetWidth ()-getPaddingLeft ()-getPaddingRight (); mHeight = getHeight ()-getPaddingTop ()-getPaddingBottom (); mCenterWidth = mWidth/2; mCenterHeight = mHeight/2; drawable drawable = getDrawable (); BitmapDrawable bd = (BitmapDrawable) drawable; bd. setAntiAlias (true) ;}@overridepublic boolean onTouchEvent (MotionEvent event) {switch (event. getAction () {case MotionEvent. ACTION_DOWN: float X = event. GetX (); float Y = event. getY (); mScaleHandler. sendEmptyMessage (scale_performance_init); break; case MotionEvent. ACTION_UP: mScaleHandler. sendEmptyMessage (SCALE_ADD_INIT); break;} return true;}/*** Handler controlling scaling */private Handler mScaleHandler = new Handler () {private Matrix matrix = new Matrix (); private int count = 0; private float s;/*** whether the click event has been called */private boolean isClicked; public void handleMessage (androi D. OS. Message msg) {matrix. set (getImageMatrix (); switch (msg. what) {case scale_performance_init: if (! IsFinish) {mScaleHandler. sendEmptyMessage (scale_performance_init);} else {isFinish = false; count = 0; s = (float) Math. sqrt (Math. sqrt (mMinScale); beginScale (matrix, s); mScaleHandler. sendEmptyMessage (SCALING);} break; case SCALING: beginScale (matrix, s); if (count <4) {mScaleHandler. sendEmptyMessage (SCALING);} else {isFinish = true; if (MyImageView. this. mOnViewClickListener! = Null &&! IsClicked) {isClicked = true; MyImageView. this. mOnViewClickListener. onViewClick (MyImageView. this) ;}else {isClicked = false ;}} count ++; break; case 6: if (! IsFinish) {mScaleHandler. sendEmptyMessage (SCALE_ADD_INIT);} else {isFinish = false; count = 0; s = (float) Math. sqrt (Math. sqrt (1.0f/mMinScale); beginScale (matrix, s); mScaleHandler. sendEmptyMessage (SCALING) ;}break ;}}; protected void sleep (int I) {try {Thread. sleep (I);} catch (InterruptedException e) {e. printStackTrace () ;}/ ***** scale ** @ param matrix * @ param scale */private synchronized void beginScale (Matrix matrix, float scale) {matrix. postScale (scale, scale, mCenterWidth, mCenterHeight); setImageMatrix (matrix);}/*** callback interface */private OnViewClickListener mOnViewClickListener; public void setOnClickIntent (OnViewClickListener onViewClickListener) {this. mOnViewClickListener = onViewClickListener;} public interface OnViewClickListener {void onViewClick (MyImageView view );}}

The code is not complex, mainly listening to The Action_Down and Action_Up of onTouchEvent, and then using Handler and matrix to complete the scaling effect. Here is a simple description of the Code logic in mScaleHandler. When the ACTION_DOWN event is detected, it will determine whether the current scaling is complete. If it is completed, it will add the zoom effect. If not, it will continue to be detected. ACTION_UP is the same process. The gradient of scaling uses the small knowledge points introduced at the beginning of this article.

 

Some people may think it is troublesome to use Handler. The reason why Handler. sendMsg is always used here is that with this message queue, the queue is first-in-first-out to ensure smooth animation effect. Because ACTION_DOWN _ and ACTION_UP are completed in a short time, the animation is still in progress. If you use the while set sleep in onTouchEvent to complete the animation, problems such as freezing and failure to listen to the Up event will occur.

3. Main Activity

 

package com.ljp.ani01;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Toast;public class TestRolateAnimActivity extends Activity{MyImageView joke;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);joke = (MyImageView) findViewById(R.id.c_joke);joke.setOnClickIntent(new MyImageView.OnViewClickListener(){@Overridepublic void onViewClick(MyImageView view){Toast.makeText(TestRolateAnimActivity.this, Joke, 1000).show();}});}}

Click events are registered using the provided callback interface. The setting of OnClickLIstener for ImageView does not work, because the onTouchEvent of the custom ImageView directly returns true, and the click event is not executed. If you want to register with OnClickLIstener, you can change the returned value in ontouchevent to super. ontouchevent (event), and set the clickable of ImageView to true. These are the propagation mechanisms of Ontouch events. It is still necessary for google to understand them.

 

 

If you think this article is useful to you, you can start ~~

 

For source code download, click here