众所周知，想要让ImageView旋转的话，可以用setRotation()让其围绕中心点旋转，但这个旋转是不带动画的，也就是旋转屏幕时图片噌的一下就转过去了，看不到旋转的过程，此UI体验不大好，为此需要自定义带旋转动画的ImageView.虽然Google SDK里基本控件里没有，但在Camera的原生APP代码里却给出了带旋转动画的ImageView，即今天的主角：RotateImageView。

尽管民间已有    提供思路实现带旋转动画的ImageView，都不如Google官方标配的啊。先上源码吧，为实现此目的，需要四个文件：

1、Rotatable.java

/* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *      http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.android.ui;public interface Rotatable { // Set parameter 'animation' to true to have animation when rotation. public void setOrientation(int orientation, boolean animation); }

他就是个接口，里面有setOrientation这个方法。Google这么写是因为有大量自定义UI都要继承这个接口。

2、TwoStateImageView.java

/* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *      http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.android.ui;import android.content.Context;import android.util.AttributeSet; import android.widget.ImageView; /** * A @{code ImageView} which change the opacity of the icon if disabled. */ public class TwoStateImageView extends ImageView { private static final int ENABLED_ALPHA = 255; private static final int DISABLED_ALPHA = (int) (255 * 0.4); private boolean mFilterEnabled = true; public TwoStateImageView(Context context, AttributeSet attrs) { super(context, attrs); } public TwoStateImageView(Context context) { this(context, null); } @SuppressWarnings("deprecation") @Override public void setEnabled(boolean enabled) { super.setEnabled(enabled); if (mFilterEnabled) { if (enabled) { setAlpha(ENABLED_ALPHA); } else { setAlpha(DISABLED_ALPHA); } } } public void enableFilter(boolean enabled) { mFilterEnabled = enabled; } }

在ImageView的基础上增加了mFilterEnabled这个属性，开关打开后，通过改变图片的Alpha实现两种状态，默认这个开关是开的，图片透明度为255，即不透明。

3、RotateImageView.java

/* * Copyright (C) 2009 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *	  http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.android.ui;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas; import android.graphics.Rect; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.graphics.drawable.TransitionDrawable; import android.media.ThumbnailUtils; import android.util.AttributeSet; import android.util.Log; import android.view.ViewGroup.LayoutParams; import android.view.animation.AnimationUtils; import android.widget.ImageView; /** * A @{code ImageView} which can rotate it's content. */ public class RotateImageView extends TwoStateImageView implements Rotatable { @SuppressWarnings("unused") private static final String TAG = "RotateImageView"; private static final int ANIMATION_SPEED = 270; // 270 deg/sec private int mCurrentDegree = 0; // [0, 359] private int mStartDegree = 0; private int mTargetDegree = 0; private boolean mClockwise = false, mEnableAnimation = true; private long mAnimationStartTime = 0; private long mAnimationEndTime = 0; public RotateImageView(Context context, AttributeSet attrs) { super(context, attrs); } public RotateImageView(Context context) { super(context); } protected int getDegree() { return mTargetDegree; } // Rotate the view counter-clockwise @Override public void setOrientation(int degree, boolean animation) { mEnableAnimation = animation; // make sure in the range of [0, 359] degree = degree >= 0 ? degree % 360 : degree % 360 + 360; if (degree == mTargetDegree) return; mTargetDegree = degree; if (mEnableAnimation) { mStartDegree = mCurrentDegree; mAnimationStartTime = AnimationUtils.currentAnimationTimeMillis(); int diff = mTargetDegree - mCurrentDegree; diff = diff >= 0 ? diff : 360 + diff; // make it in range [0, 359] // Make it in range [-179, 180]. That's the shorted distance between the // two angles diff = diff > 180 ? diff - 360 : diff; mClockwise = diff >= 0; mAnimationEndTime = mAnimationStartTime + Math.abs(diff) * 1000 / ANIMATION_SPEED; } else { mCurrentDegree = mTargetDegree; } invalidate(); } @Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (drawable == null) return; Rect bounds = drawable.getBounds(); int w = bounds.right - bounds.left; int h = bounds.bottom - bounds.top; if (w == 0 || h == 0) return; // nothing to draw if (mCurrentDegree != mTargetDegree) { long time = AnimationUtils.currentAnimationTimeMillis(); if (time < mAnimationEndTime) { int deltaTime = (int)(time - mAnimationStartTime); int degree = mStartDegree + ANIMATION_SPEED * (mClockwise ? deltaTime : -deltaTime) / 1000; degree = degree >= 0 ? degree % 360 : degree % 360 + 360; mCurrentDegree = degree; invalidate(); } else { mCurrentDegree = mTargetDegree; } } int left = getPaddingLeft(); int top = getPaddingTop(); int right = getPaddingRight(); int bottom = getPaddingBottom(); int width = getWidth() - left - right; int height = getHeight() - top - bottom; int saveCount = canvas.getSaveCount(); // Scale down the image first if required. if ((getScaleType() == ImageView.ScaleType.FIT_CENTER) && ((width < w) || (height < h))) { float ratio = Math.min((float) width / w, (float) height / h); canvas.scale(ratio, ratio, width / 2.0f, height / 2.0f); } canvas.translate(left + width / 2, top + height / 2); canvas.rotate(-mCurrentDegree); canvas.translate(-w / 2, -h / 2); drawable.draw(canvas); canvas.restoreToCount(saveCount); } private Bitmap mThumb; private Drawable[] mThumbs; private TransitionDrawable mThumbTransition; public void setBitmap(Bitmap bitmap) { // Make sure uri and original are consistently both null or both // non-null. if (bitmap == null) { mThumb = null; mThumbs = null; setImageDrawable(null); setVisibility(GONE); return; } LayoutParams param = getLayoutParams(); //下面四行代码被我注释掉了，换成了固定值400*400 by yanguoqi 2014-3-28 // final int miniThumbWidth = param.width // - getPaddingLeft() - getPaddingRight(); // final int miniThumbHeight = param.height // - getPaddingTop() - getPaddingBottom(); final int miniThumbWidth = 400; final int miniThumbHeight = 400; Log.i("yan", "param.width = " + param.width + " getPaddingLeft() = " + getPaddingLeft() + " getPaddingRight()" + getPaddingRight()); Log.i("yan", "miniThumbWidth = " + miniThumbWidth); mThumb = ThumbnailUtils.extractThumbnail( bitmap, miniThumbWidth, miniThumbHeight); Drawable drawable; if (mThumbs == null || !mEnableAnimation) { mThumbs = new Drawable[2]; mThumbs[1] = new BitmapDrawable(getContext().getResources(), mThumb); setImageDrawable(mThumbs[1]); } else { mThumbs[0] = mThumbs[1]; mThumbs[1] = new BitmapDrawable(getContext().getResources(), mThumb); mThumbTransition = new TransitionDrawable(mThumbs); setImageDrawable(mThumbTransition); mThumbTransition.startTransition(500); } setVisibility(VISIBLE); } }

整体没啥可说的，在setBitmap处有四句代码运行不正确我给换成了固定值。这个setBitmap干啥呢?是为了实现在同一个ImageView切换图片时的淡入淡出效果，如果单纯是旋转则不需要这个函数。不过本文的测试代码还是对这一功能做了测试。其思想也很简单，用Drawable[] mThumbs来存两个缩略图，第一次set的时候缩略图存一张，第二次再set的时候再放数组里一张，然后将Drawable[]数组实例化到TransitionDrawable变量里，通过这个变量的startTransition()显示淡入淡出效果，里面的参数表示时间。如果设成1000毫秒即1秒则会非常明显。关于TransitionDrawable的更多用法和解释可以参见这里

4、有了以上三个文件其实已经可以完成旋转ImageView了，在布局里定义成RotateImageView即可。但仍需要角度。下面这个函数是将连续的旋转角度0---360度变换成0°、90°、180°、270°四个值。我们旋转屏幕时，当成一定角度时才旋转图片，而不是稍微动一下就旋转，除非需求如此。

Util.java

package com.android.util;import android.app.Activity;import android.view.OrientationEventListener;import android.view.Surface;public class Util { public static final int ORIENTATION_HYSTERESIS = 5; public static int roundOrientation(int orientation, int orientationHistory) { boolean changeOrientation = false; if (orientationHistory == OrientationEventListener.ORIENTATION_UNKNOWN) { changeOrientation = true; } else { int dist = Math.abs(orientation - orientationHistory); dist = Math.min( dist, 360 - dist ); changeOrientation = ( dist >= 45 + ORIENTATION_HYSTERESIS ); } if (changeOrientation) { return ((orientation + 45) / 90 * 90) % 360; } return orientationHistory; } public static int getDisplayRotation(Activity activity) { int rotation = activity.getWindowManager().getDefaultDisplay() .getRotation(); switch (rotation) { case Surface.ROTATION_0: return 0; case Surface.ROTATION_90: return 90; case Surface.ROTATION_180: return 180; case Surface.ROTATION_270: return 270; } return 0; } }

下面就要解决如何获得屏幕旋转角度的问题。最初我也想着用onConfigurationChanged()但发现这就是扯淡，这个只能检测此时处在横屏还是竖屏。后面再交代其用法。最终是用OrientationEventListener监测的。

MainActivity.java代码如下：

package org.yanzi.testrotateimageview;import android.app.Activity;import android.content.Context;import android.content.res.Configuration; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.view.OrientationEventListener; import android.view.View; import android.widget.Button; import android.widget.ImageView; import com.android.ui.RotateImageView; import com.android.util.Util; public class MainActivity extends Activity { private static final String tag = "yan"; RotateImageView rotateImg1; RotateImageView rotateImg2; ImageView commonImg; Button fadeBtn; MyOrientationEventListener mOrientationListener; Bitmap a; Bitmap b; boolean flag = true; int mOrientation = OrientationEventListener.ORIENTATION_UNKNOWN; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initUI(); mOrientationListener = new MyOrientationEventListener(this); b = BitmapFactory.decodeResource(getResources(), R.drawable.kunqing2); a = BitmapFactory.decodeResource(getResources(), R.drawable.kunlong); fadeBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub if(flag){ rotateImg1.setBitmap(b); flag = false; } else{ rotateImg1.setBitmap(a); flag = true; } } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override protected void onResume() { // TODO Auto-generated method stub super.onResume(); mOrientationListener.enable(); } @Override protected void onPause() { // TODO Auto-generated method stub super.onPause(); mOrientationListener.disable(); } private void initUI(){ rotateImg1 = (RotateImageView)findViewById(R.id.rotate_img_1); rotateImg1.setImageResource(R.drawable.nan_1); rotateImg2 = (RotateImageView)findViewById(R.id.rotate_img_2); rotateImg2.setImageResource(R.drawable.nan_2); commonImg = (ImageView)findViewById(R.id.common_img); fadeBtn = (Button)findViewById(R.id.btn_fade); } private class MyOrientationEventListener extends OrientationEventListener{ public MyOrientationEventListener(Context context) { super(context); // TODO Auto-generated constructor stub } @Override public void onOrientationChanged(int orientation) { // TODO Auto-generated method stub if(orientation == OrientationEventListener.ORIENTATION_UNKNOWN){ return; } mOrientation = Util.roundOrientation(orientation, mOrientation); Log.i(tag, "MyOrientationEventListener mOrientation = " + mOrientation); rotateImg1.setOrientation(mOrientation, true); rotateImg2.setOrientation(mOrientation, true); commonImg.setRotation(-mOrientation); } } @Override public void onConfigurationChanged(Configuration newConfig) { // TODO Auto-generated method stub super.onConfigurationChanged(newConfig); int degree = newConfig.orientation; Log.i("yan", "onConfigurationChanged = " + degree); } }

布局如下：activity_main.xml

运行效果: 下图是初始界面，三幅图，前两个是RotateImageView，第三个是一般的ImageView.可以看出当RoteteImageView设置不使用动画时，其旋转效果和ImageView的setRotation是一样的。第一幅图和第二图的差别，第一图南怀瑾先生的，四周不带透明区域，第二幅图我用ps做了四周的透明处理。

如果不使用文中的Util.roundOrientation()函数，即有个角度就让它转，如果它的四周没有透明区域的话将会看到下图:

（抱歉，截图不是一次截的，但效果是真实的，此图周四晚截得）

下面这幅图是用大中兴的geek牛逼的连续拍照拍下来的，记录了四周不带透明区域旋转时图片变形的场景:

第一副图片里的淡入淡出测试按钮大家自己按看效果，太晚了不传图了。

代码下载:

------------------本文系原创，转载注明作者:yanzi1225627