android仿win8

在 eoe上偶然发现已经有人实现了这个功能的源码（地址：http://www.eoeandroid.com /forum.php?mod=viewthread&tid=327557），马上下载跑了一下，效果很炫，但是有些bug，比如点击速度特别 快时图像会被放大，以及点击时会触发两次点击事件。

本例子基于eoe中这位大神的实现，做了一些简化，和bug的修复。

效果：

首先普及一个小知识点：

我们在项目中有时候需要一个缓慢的梯度数据，例如：控件的宽度以一定的比例增加，然后以相同的比例还原到原来的长度。

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++;
    }

}

输出结果：

1.0
1.0846523
1.1764706
1.2760615
1.384083
1.5012488
1.384083
1.2760615
1.1764706
1.0846523
1.0

很完美吧，基本是个对称的梯度数据，梯度的幅度由代码中的s觉得，越接近1幅度越小，反之则反之。

好了下面开始代码：

1、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bkg_img_default"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <com.ljp.ani01.MyImageView
                    android:id="@+id/c_joke"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="matrix"
                    android:src="@drawable/left_top" />

                <com.ljp.ani01.MyImageView
                    android:id="@+id/c_idea"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="matrix"
                    android:src="@drawable/left_bottom" />
            </LinearLayout>

            <com.ljp.ani01.MyImageView
                android:id="@+id/c_constellation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:scaleType="matrix"
                android:src="@drawable/right" />
        </LinearLayout>

        <com.ljp.ani01.MyImageView
            android:id="@+id/c_recommend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:scaleType="matrix"
            android:src="@drawable/bottom" />
    </LinearLayout>

</LinearLayout>

布局文件，完成了上面效果图的静态效果，如果你不需要添加点击动画，或者只需要很简单的点击效果，那么就已经完成这样的菜单的编写，再添加个backgroud自定义下点击效果就好了。当然，我们这里有个比较柔和的点击动画，有自定义的ImageView完成。

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 = "MyImageView";

    private static final int SCALE_REDUCE_INIT = 0;
    private static final int SCALING = 1;
    private static final int SCALE_ADD_INIT = 6;

    /**
     * 控件的宽
     */
    private int mWidth;
    /**
     * 控件的高
     */
    private int mHeight;
    /**
     * 控件的宽1/2
     */
    private int mCenterWidth;
    /**
     * 控件的高 1/2
     */
    private int mCenterHeight;
    /**
     * 设置一个缩放的常量
     */
    private float mMinScale = 0.85f;
    /**
     * 缩放是否结束
     */
    private boolean isFinish = true;

    public MyImageView(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);
    }

    /**
     * 必要的初始化
     */
    @Override
    protected 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);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        switch (event.getAction())
        {
        case MotionEvent.ACTION_DOWN:
            float X = event.getX();
            float Y = event.getY();
            mScaleHandler.sendEmptyMessage(SCALE_REDUCE_INIT);
            break;
        case MotionEvent.ACTION_UP:
            mScaleHandler.sendEmptyMessage(SCALE_ADD_INIT);
            break;
        }
        return true;
    }

    /**
     * 控制缩放的Handler
     */
    private Handler mScaleHandler = new Handler()
    {
        private Matrix matrix = new Matrix();
        private int count = 0;
        private float s;
        /**
         * 是否已经调用了点击事件
         */
        private boolean isClicked;

        public void handleMessage(android.os.Message msg)
        {
            matrix.set(getImageMatrix());
            switch (msg.what)
            {
            case SCALE_REDUCE_INIT:
                if (!isFinish)
                {
                    mScaleHandler.sendEmptyMessage(SCALE_REDUCE_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();
        }
    }

    /**
     * 缩放
     *
     * @param matrix
     * @param scale
     */
    private synchronized void beginScale(Matrix matrix, float scale)
    {
        matrix.postScale(scale, scale, mCenterWidth, mCenterHeight);
        setImageMatrix(matrix);
    }

    /**
     * 回调接口
     */
    private OnViewClickListener mOnViewClickListener;

    public void setOnClickIntent(OnViewClickListener onViewClickListener)
    {
        this.mOnViewClickListener = onViewClickListener;
    }

    public interface OnViewClickListener
    {
        void onViewClick(MyImageView view);
    }

}

代码不算复杂，主要就是对onTouchEvent的Action_Down和Action_Up的监听，然后通过Handler结合matrix完成缩放的效果。这里简单说一个mScaleHandler里面代码的逻辑，当检测到ACTION_DOWN事件，会判断当前缩放是否完成，如果完成了则添加缩小的效果，如果没有，则一直检测。ACTION_UP也是同样的过程。缩放的梯度就用到了文章开始介绍的小知识点。

有人会觉得使用Handler比较麻烦，这里一直使用Handler.sendMsg的原因是，利用了这个消息队列，队列先进先出，保证动画效果的流畅。因为ACTION_DOWN_与ACTION_UP一瞬点完成的，其实动画还在进行。如果你在onTouchEvent中用while集合sleep完成动画，会出现卡死，监听不到Up事件等问题。

3、主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;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        joke = (MyImageView) findViewById(R.id.c_joke);
        joke.setOnClickIntent(new MyImageView.OnViewClickListener()
        {

            @Override
            public void onViewClick(MyImageView view)
            {
                Toast.makeText(TestRolateAnimActivity.this, "Joke", 1000).show();
            }
        });
    }


}

利用提供的回调接口注册了点击事件。这里说明一下，现在为ImageView设置OnClickLIstener是没有作用的，因为自定义的ImageView的onTouchEvent直接返回了true,不会往下执行click事件，如果你希望通过OnClickLIstener进行注册，你可以把ontouchevent里面返回值改成super.ontouchevent(event)，并且需要将ImageView的clickable设置为true。这些都是Ontouch事件的传播机制，不了解的google下，还是很有必要的。