[转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
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
- <span style="font-family:Comic Sans MS;font-size:18px;">/*
- * 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);
- }
- </span>
他就是个接口,里面有setOrientation这个方法。Google这么写是因为有大量自定义UI都要继承这个接口。
2、TwoStateImageView.java
- <span style="font-family:Comic Sans MS;font-size:18px;">/*
- * 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;
- }
- }
- </span>
在ImageView的基础上增加了mFilterEnabled这个属性,开关打开后,通过改变图片的Alpha实现两种状态,默认这个开关是开的,图片透明度为255,即不透明。
3、RotateImageView.java
- <span style="font-family:Comic Sans MS;font-size:18px;">/*
- * 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);
- }
- }
- </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
- <span style="font-family:Comic Sans MS;font-size:18px;">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;
- }
- }
- </span>
下面就要解决如何获得屏幕旋转角度的问题。最初我也想着用onConfigurationChanged()但发现这就是扯淡,这个只能检测此时处在横屏还是竖屏。后面再交代其用法。最终是用OrientationEventListener监测的。
MainActivity.java代码如下:
- <span style="font-family:Comic Sans MS;font-size:18px;">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);
- }
- }
- </span>
布局如下:activity_main.xml
- <span style="font-family:Comic Sans MS;font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:paddingBottom="@dimen/activity_vertical_margin"
- android:paddingLeft="@dimen/activity_horizontal_margin"
- android:paddingRight="@dimen/activity_horizontal_margin"
- android:paddingTop="@dimen/activity_vertical_margin"
- tools:context=".MainActivity" >
- <Button
- android:id="@+id/btn_fade"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="淡入淡出\n效果测试" />
- <com.android.ui.RotateImageView
- android:id="@+id/rotate_img_1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentTop="true"
- android:layout_centerHorizontal="true"
- />
- <com.android.ui.RotateImageView
- android:id="@+id/rotate_img_2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="20dip"
- android:layout_below="@id/rotate_img_1"
- android:layout_centerHorizontal="true"/>
- <ImageView
- android:id="@+id/common_img"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/rotate_img_2"
- android:layout_marginTop="20dip"
- android:layout_centerHorizontal="true"
- android:src="@drawable/nan_1"/>
- </RelativeLayout>
- </span>
运行效果: 下图是初始界面,三幅图,前两个是RotateImageView,第三个是一般的ImageView.可以看出当RoteteImageView设置不使用动画时,其旋转效果和ImageView的setRotation是一样的。第一幅图和第二图的差别,第一图南怀瑾先生的,四周不带透明区域,第二幅图我用ps做了四周的透明处理。
如果不使用文中的Util.roundOrientation()函数,即有个角度就让它转,如果它的四周没有透明区域的话将会看到下图:
(抱歉,截图不是一次截的,但效果是真实的,此图周四晚截得)
下面这幅图是用大中兴的geek牛逼的连续拍照拍下来的,记录了四周不带透明区域旋转时图片变形的场景:
第一副图片里的淡入淡出测试按钮大家自己按看效果,太晚了不传图了。
代码下载:http://download.csdn.net/detail/yanzi1225627/7115009
[转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)的更多相关文章
- Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡...)
众所周知,想要让ImageView旋转的话,可以用setRotation()让其围绕中心点旋转,但这个旋转是不带动画的,也就是旋转屏幕时图片噌的一下就转过去了,看不到旋转的过程,此UI体验不大好,为此 ...
- 【Android Developers Training】 69. 视图切换的淡入淡出效果
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- android UI 仿 win 8 模块化 标题,并实现 可长按拖动交换图片位置、可点击,且伴随动画特效
转载请声明出处,谢谢!http://www.cnblogs.com/linguanh/ 先上效果图,给大家个直观效果,后上实现代码: -> ->-> ok,现在简单说下我上面的 ...
- transition实现自定义tips淡入淡出效果
transition实现动画的时候,只能实现指定属性的渐变,元素显隐要通过opacity来实现: 做了一个小的demo: <!doctype html> <html> < ...
- GitHub上受欢迎的Android UI Library
GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 Vi ...
- Android UI相关开源项目库汇总
最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个st ...
- GitHub 上受欢迎的 Android UI Library 整理(一)
抽屉菜单 https://github.com/mikepenz/MaterialDrawer ★7337 - 安卓抽屉效果实现方案https://github.com/Yalantis/Side-M ...
- android UI进阶之用【转】
android UI进阶之用ViewPager实现欢迎引导页面 摘要: ViewPager需要android-support-v4.jar这个包的支持,来自google提供的一个附加包.大家搜下即可. ...
- (转载)Android UI设计之AlertDialog弹窗控件
Android UI设计之AlertDialog弹窗控件 作者:qq_27630169 字体:[增加 减小] 类型:转载 时间:2016-08-18我要评论 这篇文章主要为大家详细介绍了Android ...
随机推荐
- 前端开发福音!阿里Weex跨平台移动开发工具开源-b
阿里巴巴今天在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请.Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS.安卓.YunOS及 ...
- android学习(2) 多线程的理解
多线程操作UI的运行原理: UI线程:首先启动app时,系统会自动启动一个UI线程,然后此线程会创建一个Looper(注:Looper构造函数会实例化一个MessageQueue的消息队列存在变量mQ ...
- 游戏服务器:到底使用UDP还是TCP
http://blog.jobbole.com/64638/ 在编写网络游戏的时候,到底使用UDP还是TCP的问题迟早都要面对. 一般来说你会听到人们这样说:“除非你正在写一个动作类游戏,否则你就用T ...
- Xcode中报错或警告信息整理,持续更新...
整理报错和警告信息,为以后自己查看方便用! [报错1] 信息:Static table views are only valid when embedded in UITableViewContro ...
- redis问题解决
一, redis的奇葩问题:我使用命令 redis-cli shutdown 关闭redis之后就再也灭洋启动了! 尝试1: 使用命令 sudo /etc/init.d/redis-server st ...
- iphone获取sim卡信息
/* iphone获取sim卡信息 1.加入一个Framework(CoreTelephony.framework). 2.引入头文件 #import <CoreTelephony/CTTele ...
- MySQL中group_concat函数,用符号连接查询分组里字段值
http://blog.csdn.net/my_yang/article/details/7186844
- ‘char *' differs in levels of indirection from 'int'
这个问题是有与和系统变量重名导致的,如 char* ans = (char*) malloc(10);系统变量是一个int.
- Jvm工作原理学习笔记(转)
一. JVM的生命周期 1. JVM实例对应了一个独立运行的java程序它是进程级别 a) 启动.启动一个Java程序时,一个JVM实例就产生了,任何一个拥有pub ...
- ifstream文件尾最后一行读两次
看下面一段代码: ifstream m_fileConfig; string str; m_fileConfig.open(FILE_OPERATORS, ios::out ...