[转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

2023-08-18 19:49:58

http://blog.csdn.net/yanzi1225627/article/details/22439119

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

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

1、Rotatable.java

  1. <span style="font-family:Comic Sans MS;font-size:18px;">/*
  2. * Copyright (C) 2011 The Android Open Source Project
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. *      http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. package com.android.ui;
  17. public interface Rotatable {
  18. // Set parameter 'animation' to true to have animation when rotation.
  19. public void setOrientation(int orientation, boolean animation);
  20. }
  21. </span>

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

2、TwoStateImageView.java

  1. <span style="font-family:Comic Sans MS;font-size:18px;">/*
  2. * Copyright (C) 2011 The Android Open Source Project
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. *      http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. package com.android.ui;
  17. import android.content.Context;
  18. import android.util.AttributeSet;
  19. import android.widget.ImageView;
  20. /**
  21. * A @{code ImageView} which change the opacity of the icon if disabled.
  22. */
  23. public class TwoStateImageView extends ImageView {
  24. private static final int ENABLED_ALPHA = 255;
  25. private static final int DISABLED_ALPHA = (int) (255 * 0.4);
  26. private boolean mFilterEnabled = true;
  27. public TwoStateImageView(Context context, AttributeSet attrs) {
  28. super(context, attrs);
  29. }
  30. public TwoStateImageView(Context context) {
  31. this(context, null);
  32. }
  33. @SuppressWarnings("deprecation")
  34. @Override
  35. public void setEnabled(boolean enabled) {
  36. super.setEnabled(enabled);
  37. if (mFilterEnabled) {
  38. if (enabled) {
  39. setAlpha(ENABLED_ALPHA);
  40. } else {
  41. setAlpha(DISABLED_ALPHA);
  42. }
  43. }
  44. }
  45. public void enableFilter(boolean enabled) {
  46. mFilterEnabled = enabled;
  47. }
  48. }
  49. </span>

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

3、RotateImageView.java

  1. <span style="font-family:Comic Sans MS;font-size:18px;">/*
  2. * Copyright (C) 2009 The Android Open Source Project
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. *      http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. package com.android.ui;
  17. import android.content.Context;
  18. import android.graphics.Bitmap;
  19. import android.graphics.Canvas;
  20. import android.graphics.Rect;
  21. import android.graphics.drawable.BitmapDrawable;
  22. import android.graphics.drawable.Drawable;
  23. import android.graphics.drawable.TransitionDrawable;
  24. import android.media.ThumbnailUtils;
  25. import android.util.AttributeSet;
  26. import android.util.Log;
  27. import android.view.ViewGroup.LayoutParams;
  28. import android.view.animation.AnimationUtils;
  29. import android.widget.ImageView;
  30. /**
  31. * A @{code ImageView} which can rotate it's content.
  32. */
  33. public class RotateImageView extends TwoStateImageView implements Rotatable {
  34. @SuppressWarnings("unused")
  35. private static final String TAG = "RotateImageView";
  36. private static final int ANIMATION_SPEED = 270; // 270 deg/sec
  37. private int mCurrentDegree = 0; // [0, 359]
  38. private int mStartDegree = 0;
  39. private int mTargetDegree = 0;
  40. private boolean mClockwise = false, mEnableAnimation = true;
  41. private long mAnimationStartTime = 0;
  42. private long mAnimationEndTime = 0;
  43. public RotateImageView(Context context, AttributeSet attrs) {
  44. super(context, attrs);
  45. }
  46. public RotateImageView(Context context) {
  47. super(context);
  48. }
  49. protected int getDegree() {
  50. return mTargetDegree;
  51. }
  52. // Rotate the view counter-clockwise
  53. @Override
  54. public void setOrientation(int degree, boolean animation) {
  55. mEnableAnimation = animation;
  56. // make sure in the range of [0, 359]
  57. degree = degree >= 0 ? degree % 360 : degree % 360 + 360;
  58. if (degree == mTargetDegree) return;
  59. mTargetDegree = degree;
  60. if (mEnableAnimation) {
  61. mStartDegree = mCurrentDegree;
  62. mAnimationStartTime = AnimationUtils.currentAnimationTimeMillis();
  63. int diff = mTargetDegree - mCurrentDegree;
  64. diff = diff >= 0 ? diff : 360 + diff; // make it in range [0, 359]
  65. // Make it in range [-179, 180]. That's the shorted distance between the
  66. // two angles
  67. diff = diff > 180 ? diff - 360 : diff;
  68. mClockwise = diff >= 0;
  69. mAnimationEndTime = mAnimationStartTime
  70. + Math.abs(diff) * 1000 / ANIMATION_SPEED;
  71. } else {
  72. mCurrentDegree = mTargetDegree;
  73. }
  74. invalidate();
  75. }
  76. @Override
  77. protected void onDraw(Canvas canvas) {
  78. Drawable drawable = getDrawable();
  79. if (drawable == null) return;
  80. Rect bounds = drawable.getBounds();
  81. int w = bounds.right - bounds.left;
  82. int h = bounds.bottom - bounds.top;
  83. if (w == 0 || h == 0) return; // nothing to draw
  84. if (mCurrentDegree != mTargetDegree) {
  85. long time = AnimationUtils.currentAnimationTimeMillis();
  86. if (time < mAnimationEndTime) {
  87. int deltaTime = (int)(time - mAnimationStartTime);
  88. int degree = mStartDegree + ANIMATION_SPEED
  89. * (mClockwise ? deltaTime : -deltaTime) / 1000;
  90. degree = degree >= 0 ? degree % 360 : degree % 360 + 360;
  91. mCurrentDegree = degree;
  92. invalidate();
  93. } else {
  94. mCurrentDegree = mTargetDegree;
  95. }
  96. }
  97. int left = getPaddingLeft();
  98. int top = getPaddingTop();
  99. int right = getPaddingRight();
  100. int bottom = getPaddingBottom();
  101. int width = getWidth() - left - right;
  102. int height = getHeight() - top - bottom;
  103. int saveCount = canvas.getSaveCount();
  104. // Scale down the image first if required.
  105. if ((getScaleType() == ImageView.ScaleType.FIT_CENTER) &&
  106. ((width < w) || (height < h))) {
  107. float ratio = Math.min((float) width / w, (float) height / h);
  108. canvas.scale(ratio, ratio, width / 2.0f, height / 2.0f);
  109. }
  110. canvas.translate(left + width / 2, top + height / 2);
  111. canvas.rotate(-mCurrentDegree);
  112. canvas.translate(-w / 2, -h / 2);
  113. drawable.draw(canvas);
  114. canvas.restoreToCount(saveCount);
  115. }
  116. private Bitmap mThumb;
  117. private Drawable[] mThumbs;
  118. private TransitionDrawable mThumbTransition;
  119. public void setBitmap(Bitmap bitmap) {
  120. // Make sure uri and original are consistently both null or both
  121. // non-null.
  122. if (bitmap == null) {
  123. mThumb = null;
  124. mThumbs = null;
  125. setImageDrawable(null);
  126. setVisibility(GONE);
  127. return;
  128. }
  129. LayoutParams param = getLayoutParams();
  130. //下面四行代码被我注释掉了，换成了固定值400*400 by yanguoqi 2014-3-28
  131. //        final int miniThumbWidth = param.width
  132. //                - getPaddingLeft() - getPaddingRight();
  133. //        final int miniThumbHeight = param.height
  134. //                - getPaddingTop() - getPaddingBottom();
  135. final int miniThumbWidth = 400;
  136. final int miniThumbHeight = 400;
  137. Log.i("yan", "param.width = " + param.width + " getPaddingLeft() = "
  138. + getPaddingLeft() + " getPaddingRight()" + getPaddingRight());
  139. Log.i("yan", "miniThumbWidth = " + miniThumbWidth);
  140. mThumb = ThumbnailUtils.extractThumbnail(
  141. bitmap, miniThumbWidth, miniThumbHeight);
  142. Drawable drawable;
  143. if (mThumbs == null || !mEnableAnimation) {
  144. mThumbs = new Drawable[2];
  145. mThumbs[1] = new BitmapDrawable(getContext().getResources(), mThumb);
  146. setImageDrawable(mThumbs[1]);
  147. } else {
  148. mThumbs[0] = mThumbs[1];
  149. mThumbs[1] = new BitmapDrawable(getContext().getResources(), mThumb);
  150. mThumbTransition = new TransitionDrawable(mThumbs);
  151. setImageDrawable(mThumbTransition);
  152. mThumbTransition.startTransition(500);
  153. }
  154. setVisibility(VISIBLE);
  155. }
  156. }
  157. </span>

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

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

Util.java

  1. <span style="font-family:Comic Sans MS;font-size:18px;">package com.android.util;
  2. import android.app.Activity;
  3. import android.view.OrientationEventListener;
  4. import android.view.Surface;
  5. public class Util {
  6. public static final int ORIENTATION_HYSTERESIS = 5;
  7. public static int roundOrientation(int orientation, int orientationHistory) {
  8. boolean changeOrientation = false;
  9. if (orientationHistory == OrientationEventListener.ORIENTATION_UNKNOWN) {
  10. changeOrientation = true;
  11. } else {
  12. int dist = Math.abs(orientation - orientationHistory);
  13. dist = Math.min( dist, 360 - dist );
  14. changeOrientation = ( dist >= 45 + ORIENTATION_HYSTERESIS );
  15. }
  16. if (changeOrientation) {
  17. return ((orientation + 45) / 90 * 90) % 360;
  18. }
  19. return orientationHistory;
  20. }
  21. public static int getDisplayRotation(Activity activity) {
  22. int rotation = activity.getWindowManager().getDefaultDisplay()
  23. .getRotation();
  24. switch (rotation) {
  25. case Surface.ROTATION_0: return 0;
  26. case Surface.ROTATION_90: return 90;
  27. case Surface.ROTATION_180: return 180;
  28. case Surface.ROTATION_270: return 270;
  29. }
  30. return 0;
  31. }
  32. }
  33. </span>

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

MainActivity.java代码如下：

  1. <span style="font-family:Comic Sans MS;font-size:18px;">package org.yanzi.testrotateimageview;
  2. import android.app.Activity;
  3. import android.content.Context;
  4. import android.content.res.Configuration;
  5. import android.graphics.Bitmap;
  6. import android.graphics.BitmapFactory;
  7. import android.os.Bundle;
  8. import android.util.Log;
  9. import android.view.Menu;
  10. import android.view.OrientationEventListener;
  11. import android.view.View;
  12. import android.widget.Button;
  13. import android.widget.ImageView;
  14. import com.android.ui.RotateImageView;
  15. import com.android.util.Util;
  16. public class MainActivity extends Activity {
  17. private static final String tag = "yan";
  18. RotateImageView rotateImg1;
  19. RotateImageView rotateImg2;
  20. ImageView commonImg;
  21. Button fadeBtn;
  22. MyOrientationEventListener mOrientationListener;
  23. Bitmap a;
  24. Bitmap b;
  25. boolean flag = true;
  26. int mOrientation = OrientationEventListener.ORIENTATION_UNKNOWN;
  27. @Override
  28. protected void onCreate(Bundle savedInstanceState) {
  29. super.onCreate(savedInstanceState);
  30. setContentView(R.layout.activity_main);
  31. initUI();
  32. mOrientationListener = new MyOrientationEventListener(this);
  33. b = BitmapFactory.decodeResource(getResources(), R.drawable.kunqing2);
  34. a = BitmapFactory.decodeResource(getResources(), R.drawable.kunlong);
  35. fadeBtn.setOnClickListener(new View.OnClickListener() {
  36. @Override
  37. public void onClick(View v) {
  38. // TODO Auto-generated method stub
  39. if(flag){
  40. rotateImg1.setBitmap(b);
  41. flag = false;
  42. }
  43. else{
  44. rotateImg1.setBitmap(a);
  45. flag = true;
  46. }
  47. }
  48. });
  49. }
  50. @Override
  51. public boolean onCreateOptionsMenu(Menu menu) {
  52. // Inflate the menu; this adds items to the action bar if it is present.
  53. getMenuInflater().inflate(R.menu.main, menu);
  54. return true;
  55. }
  56. @Override
  57. protected void onResume() {
  58. // TODO Auto-generated method stub
  59. super.onResume();
  60. mOrientationListener.enable();
  61. }
  62. @Override
  63. protected void onPause() {
  64. // TODO Auto-generated method stub
  65. super.onPause();
  66. mOrientationListener.disable();
  67. }
  68. private void initUI(){
  69. rotateImg1 = (RotateImageView)findViewById(R.id.rotate_img_1);
  70. rotateImg1.setImageResource(R.drawable.nan_1);
  71. rotateImg2 = (RotateImageView)findViewById(R.id.rotate_img_2);
  72. rotateImg2.setImageResource(R.drawable.nan_2);
  73. commonImg = (ImageView)findViewById(R.id.common_img);
  74. fadeBtn = (Button)findViewById(R.id.btn_fade);
  75. }
  76. private class MyOrientationEventListener extends OrientationEventListener{
  77. public MyOrientationEventListener(Context context) {
  78. super(context);
  79. // TODO Auto-generated constructor stub
  80. }
  81. @Override
  82. public void onOrientationChanged(int orientation) {
  83. // TODO Auto-generated method stub
  84. if(orientation == OrientationEventListener.ORIENTATION_UNKNOWN){
  85. return;
  86. }
  87. mOrientation = Util.roundOrientation(orientation, mOrientation);
  88. Log.i(tag, "MyOrientationEventListener mOrientation = " + mOrientation);
  89. rotateImg1.setOrientation(mOrientation, true);
  90. rotateImg2.setOrientation(mOrientation, true);
  91. commonImg.setRotation(-mOrientation);
  92. }
  93. }
  94. @Override
  95. public void onConfigurationChanged(Configuration newConfig) {
  96. // TODO Auto-generated method stub
  97. super.onConfigurationChanged(newConfig);
  98. int degree = newConfig.orientation;
  99. Log.i("yan", "onConfigurationChanged = " + degree);
  100. }
  101. }
  102. </span>

布局如下：activity_main.xml

  1. <span style="font-family:Comic Sans MS;font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:paddingBottom="@dimen/activity_vertical_margin"
  6. android:paddingLeft="@dimen/activity_horizontal_margin"
  7. android:paddingRight="@dimen/activity_horizontal_margin"
  8. android:paddingTop="@dimen/activity_vertical_margin"
  9. tools:context=".MainActivity" >
  10. <Button
  11. android:id="@+id/btn_fade"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:text="淡入淡出\n效果测试" />
  15. <com.android.ui.RotateImageView
  16. android:id="@+id/rotate_img_1"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_alignParentTop="true"
  20. android:layout_centerHorizontal="true"
  21. />
  22. <com.android.ui.RotateImageView
  23. android:id="@+id/rotate_img_2"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_marginTop="20dip"
  27. android:layout_below="@id/rotate_img_1"
  28. android:layout_centerHorizontal="true"/>
  29. <ImageView
  30. android:id="@+id/common_img"
  31. android:layout_width="wrap_content"
  32. android:layout_height="wrap_content"
  33. android:layout_below="@id/rotate_img_2"
  34. android:layout_marginTop="20dip"
  35. android:layout_centerHorizontal="true"
  36. android:src="@drawable/nan_1"/>
  37. </RelativeLayout>
  38. </span>

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

[转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

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

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

[转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

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

[转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

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

代码下载:http://download.csdn.net/detail/yanzi1225627/7115009

上一篇：spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中（合并对象）


下一篇：Android旋转动画