文档章节

Android实现CoverFlow效果

迷途d书童
 迷途d书童
发布于 2012/02/28 18:01
字数 1026
阅读 20113
收藏 64
先上一张效果图:

上代码,看了代码什么都明白

CoverFlow从Gallery继承过来

package com.coverflow;

import android.content.Context;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Transformation;
import android.widget.Gallery;
import android.widget.ImageView;

public class CoverFlow extends Gallery {

	private Camera mCamera = new Camera();
	private int mMaxRotationAngle = 50;
	private int mMaxZoom = -380;
	private int mCoveflowCenter;
	private boolean mAlphaMode = true;
	private boolean mCircleMode = false;

	public CoverFlow(Context context) {
		super(context);
		this.setStaticTransformationsEnabled(true);
	}

	public CoverFlow(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.setStaticTransformationsEnabled(true);
	}

	public CoverFlow(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		this.setStaticTransformationsEnabled(true);
	}

	public int getMaxRotationAngle() {
		return mMaxRotationAngle;
	}

	public void setMaxRotationAngle(int maxRotationAngle) {
		mMaxRotationAngle = maxRotationAngle;
	}

	public boolean getCircleMode() {
		return mCircleMode;
	}

	public void setCircleMode(boolean isCircle) {
		mCircleMode = isCircle;
	}

	public boolean getAlphaMode() {
		return mAlphaMode;
	}

	public void setAlphaMode(boolean isAlpha) {
		mAlphaMode = isAlpha;
	}

	public int getMaxZoom() {
		return mMaxZoom;
	}

	public void setMaxZoom(int maxZoom) {
		mMaxZoom = maxZoom;
	}

	private int getCenterOfCoverflow() {
		return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2
				+ getPaddingLeft();
	}

	private static int getCenterOfView(View view) {
		return view.getLeft() + view.getWidth() / 2;
	}

	protected boolean getChildStaticTransformation(View child, Transformation t) {
		final int childCenter = getCenterOfView(child);
		final int childWidth = child.getWidth();
		int rotationAngle = 0;
		t.clear();
		t.setTransformationType(Transformation.TYPE_MATRIX);
		if (childCenter == mCoveflowCenter) {
			transformImageBitmap((ImageView) child, t, 0);
		} else {
			rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
			if (Math.abs(rotationAngle) > mMaxRotationAngle) {
				rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle
						: mMaxRotationAngle;
			}
			transformImageBitmap((ImageView) child, t, rotationAngle);
		}
		return true;
	}

	/**
	 * 这就是所谓的在大小的布局时,这一观点已经发生了改变。如果 你只是添加到视图层次,有人叫你旧的观念 价值观为0。
	 * 
	 * @param w
	 *            Current width of this view.
	 * @param h
	 *            Current height of this view.
	 * @param oldw
	 *            Old width of this view.
	 * @param oldh
	 *            Old height of this view.
	 */
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		mCoveflowCenter = getCenterOfCoverflow();
		super.onSizeChanged(w, h, oldw, oldh);
	}

	/**
	 * 把图像位图的角度通过
	 * 
	 * @param imageView
	 *            ImageView the ImageView whose bitmap we want to rotate
	 * @param t
	 *            transformation
	 * @param rotationAngle
	 *            the Angle by which to rotate the Bitmap
	 */
	private void transformImageBitmap(ImageView child, Transformation t,
			int rotationAngle) {
		mCamera.save();
		final Matrix imageMatrix = t.getMatrix();
		final int imageHeight = child.getLayoutParams().height;
		final int imageWidth = child.getLayoutParams().width;
		final int rotation = Math.abs(rotationAngle);
		mCamera.translate(0.0f, 0.0f, 100.0f);

		// 如视图的角度更少,放大
		if (rotation <= mMaxRotationAngle) {
			float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));
			mCamera.translate(0.0f, 0.0f, zoomAmount);
			if (mCircleMode) {
				if (rotation < 40)
					mCamera.translate(0.0f, 155, 0.0f);
				else
					mCamera.translate(0.0f, (255 - rotation * 2.5f), 0.0f);
			}
			if (mAlphaMode) {
				((ImageView) (child)).setAlpha((int) (255 - rotation * 2.5));
			}
		}
		mCamera.rotateY(rotationAngle);
		mCamera.getMatrix(imageMatrix);
		imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
		imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
		mCamera.restore();
	}
}

这个就是CoverFlow类,说明几点:
1. 成员函数
mCamera是用来做类3D效果处理,比如z轴方向上的平移,绕y轴的旋转等
mMaxRotationAngle是图片绕y轴最大旋转角度,也就是屏幕最边上那两张图片的旋转角度
mMaxZoom是图片在z轴平移的距离,视觉上看起来就是放大缩小的效果.
其他的变量都可以无视
也就是说把这个属性设成true的时候每次viewGroup(看Gallery的源码就可以看到它是从ViewGroup间接继承过来的)在重新画它的child的时候都会促发getChildStaticTransformation这个函数,所以我们只需要在这个函数里面去加上旋转和放大的操作就可以了
其他的gettersetter函数都可以无视

ImageAdapter适配器:

package com.coverflow;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.BitmapDrawable;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.gallery.R;

public class ImageAdapter extends BaseAdapter {
	int mGalleryItemBackground;
	private Context mContext;
	private Integer[] mImageIds = { 
			R.drawable.a1,
			R.drawable.a2, 
			R.drawable.a3,
			R.drawable.a4, 
			R.drawable.a5 };

	public ImageAdapter(Context c) {
		mContext = c;
	}

	public int getCount() {
		return mImageIds.length;
	}

	public Object getItem(int position) {
		return position;
	}

	public long getItemId(int position) {
		return position;
	}

	public View getView(int position, View convertView, ViewGroup parent) {

		ImageView i = createReflectedImages(mContext,mImageIds[position]);
		
		i.setLayoutParams(new CoverFlow.LayoutParams(120, 100));
		i.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
		
		// 设置的抗锯齿
		BitmapDrawable drawable = (BitmapDrawable) i.getDrawable();
		drawable.setAntiAlias(true);
		return i;
	}

	public float getScale(boolean focused, int offset) {
		return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));
	}
	
	public ImageView createReflectedImages(Context mContext,int imageId) {

		Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), imageId);
		
		final int reflectionGap = 4;
		
		int width = originalImage.getWidth();
		int height = originalImage.getHeight();

		Matrix matrix = new Matrix();
		matrix.preScale(1, -1);

		Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
				height / 2, width, height / 2, matrix, false);

		Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
				(height + height / 2), Config.ARGB_8888);

		Canvas canvas = new Canvas(bitmapWithReflection);

		canvas.drawBitmap(originalImage, 0, 0, null);

		Paint deafaultPaint = new Paint();
		canvas.drawRect(0, height, width, height + reflectionGap, deafaultPaint);

		canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);

		Paint paint = new Paint();
		LinearGradient shader = new LinearGradient(0, originalImage
				.getHeight(), 0, bitmapWithReflection.getHeight()
				+ reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.MIRROR);

		paint.setShader(shader);

		paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));

		canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
				+ reflectionGap, paint);

		ImageView imageView = new ImageView(mContext);
		imageView.setImageBitmap(bitmapWithReflection);

		return imageView;
	}
	
}

BitmapDrawable drawable = (BitmapDrawable) i.getDrawable();
drawable.setAntiAlias(true);
是保证图片绕Y旋转了以后不会出现锯齿.

下面是Activity:

package com.coverflow;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

import com.gallery.R;

public class HelloAndroid extends Activity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		CoverFlow cf = new CoverFlow(this);
		// cf.setBackgroundResource(R.drawable.shape);
		cf.setBackgroundColor(Color.BLACK);
		cf.setAdapter(new ImageAdapter(this));
		ImageAdapter imageAdapter = new ImageAdapter(this);
		cf.setAdapter(imageAdapter);
		// cf.setAlphaMode(false);
		// cf.setCircleMode(false);
		cf.setSelection(2, true);
		cf.setAnimationDuration(1000);
		setContentView(cf);
	}

}

参考自:
http://www.eoeandroid.com/thread-70209-1-1.html
http://www.apkbus.com/android-18441-1-1.html

© 著作权归作者所有

共有 人打赏支持
迷途d书童

迷途d书童

粉丝 1021
博文 144
码字总数 14138
作品 0
深圳
高级程序员
加载中

评论(25)

孟子阅
其实这个copy上去不难,效果出来了。没有注释,看着有些晕,我只有百度脑补了。我是学习移动互联网的。 <activity
android:name="com.coverflow.HelloAndroid"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="com.coverflow.ImageAdapter"
android:label="@string/title_activity_hello_android" >
</activity>
<activity
android:name="com.coverflow.MainActivity"
android:label="@string/title_activity_hello_android" >
</activity>
coco_
coco_
我想在上面加一个ImageView下面加四个ImageButton怎么办??
唐生继
不错
j
joyo00321949
我放到手机上的运行(没改动你的源码),在横竖屏转换的时候经常出现意外中止,楼主知道这么回事吗
g
gaoweiztx
谢谢楼主分享,很好的帖子,但是滑动有点卡。。。
雄story
雄story
谢谢分享,项目down下来能运行了,参考代码希望我以后能用上
calvinlsy
calvinlsy
BitmapDrawable drawable = (BitmapDrawable) i.getDrawable();
drawable.setAntiAlias(true);
这两句不起效,代码已和上面一模一样
calvinlsy
calvinlsy
按上面的方法还是没解决抗锯齿啊,怎么办?
精神科主任
精神科主任

引用来自“迷途d书童”的评论

引用来自“资江”的评论

引用来自“迷途d书童”的评论

引用来自“资江”的评论

请问楼主啊,怎么样给它们设置点击事件吖?新手求指点

cf.setOnItemClickListener

问题是怎么取到它们呢?R.id点不出来.....(平时都这样弄的)

cf.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //view 就是你要取的每一项(ImageView)
      }      
    });

大恩不言谢!
迷途d书童
迷途d书童

引用来自“资江”的评论

引用来自“迷途d书童”的评论

引用来自“资江”的评论

请问楼主啊,怎么样给它们设置点击事件吖?新手求指点

cf.setOnItemClickListener

问题是怎么取到它们呢?R.id点不出来.....(平时都这样弄的)

cf.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //view 就是你要取的每一项(ImageView)
      }      
    });
超炫的3D特效程序管理功能android

PC上不说了一些很炫的界面效果很多,其实android上也可以实现很多很COOL的特效。 先看一下效果吧! 相册功能的效果: 下面是加载的andriod 里的程序,用3D效果列出来。这个可以做为android开机...

yumingxinli
2013/02/12
0
0
Android开发 第三方免费UI组件

本文编译自 androiduipatterns,意在分享一些免费、开源的 Android UI 库及组件资源。 一、UI 组件库 GreenDroid 该项目可以实现下列的 UI 设计: 动作栏(Action Bar)快捷动作(Quick Act...

Thanks
2014/05/16
0
0
Framework7 2.3.0 发布,全功能 HTML 框架

Framework7 2.3.0 发布了,此次更新内容包括: View/Router 修复了缺少 pushStateOnLoad 参数的问题 增加了对可路由操作表的支持 Searchbar 修正了与 Subnavbar 一起使用时 MD 主题中可扩展的...

雨田桑
05/28
0
0
CoverFlow效果控件无限循环效果

今天开发一个滑动切换的3d动画效果,就在gitHub上边找了代码,然后把这些代码放到新建的项目中,实现了循环切换的效果,具体代码如下: package pym.test.gallery3d.util; import android.co...

今日竹石
2015/07/29
0
0
47 Amazing CSS3 Animation Demos

Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be ......

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

android webrtc使用opensl es

1. java层开启开关 peerConnectionParameters = new PeerConnectionClient.PeerConnectionParameters(); 接口中的useOpensles参数设置为true 2. /system/etc/permissions/下新增and......

bill_shen
26分钟前
0
0
读《高性能mysql》记录

1 2

李佳顺
27分钟前
0
0
Element UI框架+Vue开发搭建示例

一、关于Element 1.Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,官方网址:http://element-cn.eleme.io/#/zh-CN 2.Element UI 是饿了么前端团队倾情打造htt...

tianma3798
29分钟前
2
0
Fragment整理

1、Fragment父类 Fragment的父类有两个,分别为android.app.Fragment和android.support.v4.app.Fragment。建议使用android.support.v4.app.Fragment。因为此Fragment在所有的android版本中可...

西米小娅
36分钟前
0
0
mysql报错:所选列未在GROUP BY子句中 的解决方法(laravel框架)

数据库配置文件database.php文件的 'mysql' => [ 'strict' => false] strict改为false,应该是开启宽松模式,就不会报错了...

郭周园
39分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部