Android 仿Win8的metro的UI界面（上）-CSDN博客

本文链接：https://blog.csdn.net/2401_84121935/article/details/138055026

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” />

<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” />

<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” />

布局文件，完成了上面效果图的静态效果，如果你不需要添加点击动画，或者只需要很简单的点击效果，那么就已经完成这样的菜单的编写，再添加个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;

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！