`
liuxin-smallmouse
  • 浏览: 18992 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Android实现CoverFlow效果

阅读更多

先上一张效果图:

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

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://my.oschina.net/liux/blog/41925

分享到:
评论

相关推荐

    Android中实现coverflow效果

    4. **实现Coverflow效果**:虽然Gallery控件本身不能直接提供Coverflow效果,但我们可以通过覆写`onFling()`和`onScrollStateChanged()`方法来自定义滑动行为。同时,可以使用第三方库,如Android-CoverFlow或...

    Android实现CoverFlow效果控件的实例代码

    "Android实现CoverFlow效果控件的实例代码详解" Android实现CoverFlow效果控件的实例代码是Android开发中一个常见的需求,特别是在开发图片浏览器、图片库等应用时。CoverFlow效果控件可以提供一个吸引人的用户...

    android 实现Coverflow

    在Android平台上实现Coverflow效果,主要是为了模仿iPhone中经典的3D滚动图片浏览界面。这个"CoverFlow"效果在用户交互中提供了独特的视觉体验,让用户能够像翻阅实物书本一样浏览图片。以下是对这个Android项目的...

    android-coverflow

    综上所述,"android-coverflow" 是一个帮助Android开发者轻松实现Coverflow效果的工具或库,它涉及到自定义视图、动画、触摸事件处理等多个核心编程概念,同时也体现了Android开发中的创新和用户体验设计。...

    Android-Coverflow,android漂亮的coverflow库.zip

    "Android-Coverflow"是一个专门针对Android平台的开源项目,旨在提供一种美观的封面流动效果,类似于苹果iTunes中的Coverflow效果。这个库是基于ViewPager的扩展,能够帮助开发者轻松地在应用中实现这种视觉上...

    android coverflow

    其中,`jackfengji-glcoverflow-a9e2475`这个库就是一个专门用于实现Coverflow效果的开源项目。它基于OpenGL ES,利用硬件加速的优势,提供了高效且流畅的动画效果。 1. 自定义View:开发者可以创建一个新的View类...

    Android版仿iOS的CoverFlow效果

    在Android开发中,有时我们希望实现一种类似于iOS的CoverFlow效果,这能为用户界面增添独特的视觉体验。CoverFlow是一种动态展示元素的方式,通常用于显示一系列图像或卡片,用户可以平滑地滚动浏览,就像翻阅一本...

    coverflow效果demo,可直接下载运行ADT环境

    【标题】"coverflow效果demo"是指在Android平台上实现的一种视觉效果,...通过这个示例项目,开发者不仅可以学习如何实现Coverflow效果,还可以了解Android开发中的自定义View、手势识别、动画设计等多个重要知识点。

    android cover flow特效

    实现Cover Flow特效可以很复杂,因此有许多开源库可以帮助开发者快速实现这一效果,例如`android-coverflow`、`android-ui-utils`等。"FilmPageEffect"可能是其中一个库的示例代码,你可以参考它来理解实现细节。 ...

    整理的coverFlow效果(v alpha 0.1).rar

    在这个“整理的coverFlow效果(v alpha 0.1).rar”压缩包中,很可能包含了一个实现CoverFlow效果的早期版本的源代码、资源文件或其他相关材料。 CoverFlow的核心特点在于它的动态翻页效果,用户可以左右滑动,而每...

    收集的scorllview和coverflow效果

    2. **实现方式**:早期的Android SDK并未内置CoverFlow,开发者通常需要借助第三方库(如OpenFlowCover)来实现这一效果。OpenFlowCover可能是一个开源库,提供了仿照苹果Cover Flow效果的组件。 3. **使用方法**:...

    安卓的伪3D实现,用galler控件实现coverflow,里面都是可以运行的demo

    在早期的Android版本中,Gallery控件是实现Cover Flow效果的一个常见选择,尽管在Android 5.0(API级别21)之后,它已被废弃,但通过一些自定义和优化,仍然可以在现代Android系统上实现类似的效果。 首先,要实现...

    Android改进版CoverFlow效果控件无限循环

    在实现CoverFlow效果时,还需要考虑以下几个技术要点: 1. **布局管理**:确定每个元素的位置和大小,使其在视觉上形成流畅的翻转效果。 2. **图像缩放和旋转**:根据距离中心位置的距离调整元素的大小,同时进行...

    Android 3D CoverFlow 3D Gallery

    "Android 3D CoverFlow 3D Gallery"就是这样一个利用OpenGL ES技术实现的创新性应用组件,它将传统的CoverFlow效果提升到三维空间,为用户呈现更为立体和生动的浏览体验。 CoverFlow最初由Apple公司在iPod和iTunes...

    CoverFlow.rar

    这个文件包含了实现Coverflow效果的所有必要组件,包括但不限于布局文件、图片资源、Java代码、XML配置等。开发者可能需要将这个文件解压后导入到他们的Android Studio项目中,然后根据提供的文档或者示例代码来集成...

    Android Coverflow 代码

    在本讨论中,我们将深入探讨如何在Android应用中实现Coverflow效果,基于提供的"Android Coverflow 代码"。 首先,我们需要理解Coverflow的基本工作原理。Coverflow的核心在于它的动画效果,即在用户滚动时,中间的...

    使用Android自带的Gallery控件实现CoverFlow

    在Android开发中,`Gallery`控件是一种非常实用的组件,它可以用来展示一系列横向滑动的项目,类似于图片轮播或者iOS中的CoverFlow效果。在本教程中,我们将深入探讨如何利用Android SDK中的`Gallery`控件来实现类似...

Global site tag (gtag.js) - Google Analytics