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;

	@Override
	public 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() {
			
			@Override
			public 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;

	@Override
	protected 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源码。有过这方面经验的朋友希望可以指点迷津，不胜感激。