Android 关于高仿 WIN8系统磁贴点击下沉倾斜效果的应用说明

    这是eoe上的一篇帖子，地址如下：高仿 WIN8系统 磁贴点击下沉倾斜效果。效果就是点击一个图片的时候，图片会在点击的位置下沉。如图：

                                         

     其实，效果还是很不错的，至少也像path菜单那样，颠覆了传统的导航，给人耳目一新的感觉，比较新颖。所以，就运行一下看看效果到底怎么样。那片文章默认给的源码只有点击效果，没有提供进入另一个Activity的代码。但是，实际应用中我们是要点击后进入其他的Activity。

     之后，我就按照常规思路为每一个图片设置一个onClickListener。代码如下： 

import mobile.android.view.MyImageView;import mobile.android.view.MyImageView.OnViewClick;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;public class MainActivity extends Activity {private MyImageView joke;private MyImageView constellation;private MyImageView creative;private MyImageView recommend;private Intent intent;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);this.requestWindowFeature(0);setContentView(R.layout.main);initImageListener();}private void initImageListener() {joke = (MyImageView) findViewById(R.id.c_joke);constellation = (MyImageView) findViewById(R.id.c_constellation);creative = (MyImageView) findViewById(R.id.c_idea);recommend = (MyImageView) findViewById(R.id.c_recommend);joke.setOnClickIntent(new OnViewClick() {@Overridepublic void onClick() {intent=new Intent(MainActivity.this,OtherActivity.class);startActivity(intent);}});}}

      这样理论上当我们点击id为c_joke的图片时，应该产生磁贴点击下沉倾斜效果。而事实上是，点击边缘会产生这样的效果，但是当点击中央部分会进入OtherActivity两次。这个大家可以自己下载代码去试验。所以，就想这可能是一个bug，修改一下代码吧。

      源代码中有一段这样的代码 ：          

private Handler handler = new Handler() {                private Matrix matrix = new Matrix();                private float s;                int count = 0;                 @Override                public void handleMessage(Message msg) {                        super.handleMessage(msg);                        matrix.set(getImageMatrix());                        switch (msg.what) {                        case 1:                                if (!isFinish) {                                        return;                                } else {                                        isFinish = false;                                        count = 0;                                        s = (float) Math.sqrt(Math.sqrt(minScale));                                        BeginScale(matrix, s);                                        handler.sendEmptyMessage(2);                                }                                break;                        case 2:                                BeginScale(matrix, s);                                if (count < 4) {                                        handler.sendEmptyMessage(2);                                } else {                                        isFinish = true;                                        <font color="\"Red\"">if(!isActionMove&&onclick!=null){                                                onclick.onClick();                                        }</font>                                 }                                count++;                                break;                        case 6:                                if (!isFinish) {                                        handler.sendEmptyMessage(6);                                } else {                                        isFinish = false;                                        count = 0;                                        s = (float) Math.sqrt(Math.sqrt(1.0f / minScale));                                        BeginScale(matrix, s);                                        handler.sendEmptyMessage(2);                                }                                break;                        }                }

       这段代码简单的说就是处理点击中间部分下沉效果的handler，看的出来你在点击的时候图片会缩小和扩大，从代码中可以看出缩小和扩大的finish都是在执行到case 2才完成的，我们可以看到case 2 中的一段代码：

       这就是监听效果，!isActionMove&&onclick!=null应该就是叛变是否监听到的依据，本来这个代码的作用应该是缩小时，!isActionMove&&onclick!=null应该是false，扩大后是true，这样就只监听一次了，但我也不知道有什么问题，貌似起不到效果。其实，我们只需要在代码开始处重新定义一个private boolean clickGuolv = false; 然后把上面的代码替换为：

if(clickGuolv){        clickGuolv = false;        onclick.onClick();    } else{clickGuolv = true;}

       这样， 每次第一次图片缩小时由于clickGuolv = false，所以不会监听到，图片扩大完，程序执行到此处clickGuolv = true，产生监听。

        

        问题得到了解决，但是我想作者不会连这个问题都考虑不到吧。所以尝试换了另一种方法来设置监听事件。就是在xml布局文件里为每一个image设置onclik事件。代码如下：        

if(!isActionMove&&onclick!=null){          onclick.onClick(); <mobile.android.view.MyImageView                    android:id="@+id/personal"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_margin="2dp"                    android:onClick="personal"                    android:scaleType="matrix"                    android:src="@drawable/myzone" />    }

         这样在主Activity里面就可以这样调用了：

import android.os.Bundle;import android.app.Activity;import android.content.Intent;import android.view.Menu;import android.view.View;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;public class MainActivity extends Activity {private Intent intent;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.test);initImageView();}public void personal(View v) {intent = new Intent(MainActivity.this, PersonalActivity.class);startActivity(intent);}public void online(View v) {intent = new Intent(MainActivity.this, StudyOnLineActivity.class);startActivity(intent);}public void recommend(View v) {intent = new Intent(MainActivity.this, RecommendActivity.class);startActivity(intent);}public void social(View v) {intent = new Intent(MainActivity.this, SocialActivity.class);startActivity(intent);}}

       换成这种方式后，就不会产生上面的bug了。至于具体原因，我也不清楚，没有研究过onclick源码。有过这方面经验的朋友希望可以指点迷津，不胜感激。