Android實現CoverFlow效果

openkk 13年前發布 | 72K 次閱讀 Android Android開發移動開發

先上一張效果圖：

上代碼，看了代碼什么都明白

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這個函數,所以我們只需要在這個函數里面去加上旋轉和放大的操作就可以了
其他的getter和setter函數都可以無視

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

本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1330427728483.html

Android Android開發移動開發

Android實現CoverFlow效果

相關經驗

相關資訊

相關文檔

目錄