android - 如何在背景中滚动更宽的图像

Question

就像在 LinkedIn 中的前三个屏幕

1. Splash
2. Login/Signup Buttons
3. Login/Signup Form

都具有与背景相同的图像，但是当我们从一个 Activity 移动到另一个 Activity 时，背景图像从右侧滚动到左侧。

我只能尝试使用 overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right); 但事实并非如此。

Answer 1

这称为视差滚动，我使用 2 层实现它:一层用于内容，另一层用于背景。 内容，你把它放在没有背景的 ViewPager 上。请注意，您将使用将由 viewpager 动画的 fragment (每个页面都是一个 fragment )而不是 Activity 。 (参见 FragmentStatePagerAdapter)

背景在一个背景层上，显然在viewpager后面并且独立于它。它可以是 ScrollView 中的图像，或者您要移动其剪辑区域的图像，或者您通过 drawBitmap(x,y) 渲染的图像。请参阅我的解决方案的附加源代码，它扩展了一个 View ，其背景可以滚动，只需调用方法“setPercent”

然后你覆盖

viewPager.setOnPageChangeListener(new OnPageChangeListener(){

    @Override
    public void onPageScrolled(int position, float percent, int pixoffset) {

        // this is called while user's flinging with:
        // position is the page number
        // percent is the percentage scrolled (0...1)
        // pixoffset is the pixel offset related to that percentage
        // so we got everything we need ....

        int totalpages=mViewPagerAdapter.getCount(); // the total number of pages
        float finalPercentage=((position+percent)*100/totalpages); // percentage of this page+offset respect the total pages
        setBackgroundX ((int)finalPercentage);
    }
}

void setBackgroundX(int scrollPosition) {
        // now you have to scroll the background layer to this position. You can either adjust the clipping or
        // the background X coordinate, or a scroll position if you use an image inside an scrollview ...
                    // I personally like to extend View and draw a scaled bitmap with a clipping region (drawBitmap with Rect parameters), so just modifying the X position then calling invalidate will do. See attached source ParallaxBackground
          parallaxBackground.setPercent(position);
}

现在是 ViewPager 后面的视差背景 View 。我在这里发布了我自己的 ParallaxBackgroundView 的完整工作版本。这是经过实际测试的代码。

        package com.regaliz.gui.views;

    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.Bitmap.Config;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.graphics.drawable.BitmapDrawable;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.View;

    /**
     * Implements a horizontal parallax background. The image is set via setImageDrawable(), it is then scaled to 150% and 
     * you set the percentage via setPErcentage.
     * @author rodo
     */

    public class ParallaxBackground extends View {

        private final static String TAG="ParallaxBackground";
        private final static int MODE_PRESCALE=0, MODE_POSTSCALE=1;

        /** How much a image will be scaled  */
        /** Warning: A full screen image on a Samsung 10.1 scaled to 1.5 consumes 6Mb !! So be careful */
        private final static float FACTOR=1.5f;

        /** The current background */
        private Bitmap mCurrentBackground=null;

        /** Current progress 0...100 */
        private float mOffsetPercent=0;

        /** Flag to activate */
        private boolean isParallax=true;

        /** The parallax mode (MODE_XXX) */
        private int mParallaxMode=MODE_PRESCALE;

        /** precalc stuff to tighten onDraw calls */
        private int  mCurrentFactorWidth;
        private float mCurrentFactorMultiplier;
        private Rect mRectDestination, mRectSource;

        private Paint mPaint;


        public ParallaxBackground(Context context, AttributeSet attrs) {
            super(context, attrs);
            construct(context);
        }

        public ParallaxBackground(Context context) {
            super(context);
            construct(context);
        }

        /**
         * Enables or disables parallax mode
         * @param status
         */

        public void setParallax(boolean status) {
            Log.d(TAG, "*** PARALLAX: "+status);
            isParallax=status;
        }

        /**
         * Sets the parallax memory mode. MODE_PRESCALE uses more memory but scrolls slightly smoother. MODE_POSTSCALE uses less memory but is more CPU-intensive.
         * @param mode
         */

        public void setParallaxMemoryMode(int mode) {
            mParallaxMode=mode;
            if (mCurrentBackground!=null) {
                mCurrentBackground.recycle();
                mCurrentBackground=null;
            }
        }

        /**
         * Seth the percentage of the parallax scroll. 0 Means totally left, 100 means totally right.
         * @param percentage The perc,
         */

        public void setPercent(float percentage) {
            if (percentage==mOffsetPercent) return;
            if (percentage>100) percentage=100;
            if (percentage<0) percentage=0;
            mOffsetPercent=percentage; 
            invalidate();
        }

        /**
         * Wether PArallax is active or not.
         * @return ditto.
         */

        public boolean isParallax() {
            return isParallax && (mCurrentBackground!=null);
        }

        /**
         * We override setBackgroundDrawable so we can set the background image as usual, like in a normal view.
         * If parallax is active, it will create the scaled bitmap that we use on onDraw(). If parallax is not
         * active, it will divert to super.setBackgroundDrawable() to draw the background normally.
         * If it is called with anything than a BitMapDrawable, it will clear the stored background and call super()
         */

        @Override
        public void setBackgroundDrawable (Drawable d) {

            Log.d(TAG,  "*** Set background has been called !!");

            if ((!isParallax) || (!(d instanceof BitmapDrawable))) {
                Log.d(TAG, "No parallax is active: Setting background normally.");
                if (mCurrentBackground!=null) {
                    mCurrentBackground.recycle(); // arguably here
                    mCurrentBackground=null;
                }
                super.setBackgroundDrawable(d);
                return;
            }

            switch (mParallaxMode) {

            case MODE_POSTSCALE:
                setBackgroundDrawable_postscale(d);
                break;

            case MODE_PRESCALE:
                setBackgroundDrawable_prescale(d);
                break;
            }

        }

        private void setBackgroundDrawable_prescale(Drawable incomingImage) {

            Bitmap original=((BitmapDrawable) incomingImage).getBitmap();
            Log.v(TAG, "Created bitmap for background : original: "+original.getByteCount()+", w="+original.getWidth()+", h="+original.getHeight());

            mCurrentBackground=Bitmap.createBitmap((int) (this.getWidth()*FACTOR), this.getHeight(), Config.ARGB_8888);
            Canvas canvas=new Canvas(mCurrentBackground);

            // we crop the original image up and down, as it has been expanded to FACTOR
            // you can play with the Adjustement value to crop top, center or bottom.
            // I only use center so its hardcoded.

            float scaledBitmapFinalHeight=original.getHeight()*mCurrentBackground.getWidth()/original.getWidth();
            int adjustment=0;

            if (scaledBitmapFinalHeight>mCurrentBackground.getHeight()) {
                // as expected, we have to crop up&down to maintain aspect ratio
                adjustment=(int)(scaledBitmapFinalHeight-mCurrentBackground.getHeight()) / 4;
            } 

            Rect srect=new Rect(0,adjustment,original.getWidth(), original.getHeight()-adjustment);
            Rect drect=new Rect(0,0,mCurrentBackground.getWidth(), mCurrentBackground.getHeight());

            canvas.drawBitmap(original, srect, drect, mPaint);

            Log.v(TAG, "Created bitmap for background : Size: "+mCurrentBackground.getByteCount()+", w="+mCurrentBackground.getWidth()+", h="+mCurrentBackground.getHeight());

            // precalc factor multiplier
            mCurrentFactorMultiplier=(FACTOR-1)*getWidth()/100;

            original.recycle();
            System.gc();

            invalidate();
        }



        private void setBackgroundDrawable_postscale (Drawable d) {

            mCurrentBackground=((BitmapDrawable) d).getBitmap();

            int currentBackgroundWidth=mCurrentBackground.getWidth(),
                currentBackgroundHeight=mCurrentBackground.getHeight(),
                currentFactorHeight=(int) (currentBackgroundHeight/FACTOR);

            mCurrentFactorWidth=(int) (currentBackgroundWidth/FACTOR);
            mCurrentFactorMultiplier=(FACTOR-1)*currentBackgroundWidth/100;
            mRectDestination=new Rect(0,0,getWidth(), getHeight());
            mRectSource=new Rect(0,0,mCurrentFactorWidth,currentFactorHeight);
            invalidate();
        }

        @Override
        public void onDraw(Canvas canvas) {
            if ((isParallax) && (mCurrentBackground!=null)) {
                if (mParallaxMode==MODE_POSTSCALE) onDraw_postscale(canvas); else onDraw_prescale(canvas);
            } else super.onDraw(canvas);
        }

        private void onDraw_prescale(Canvas canvas) {
            int oxb=(int) (mCurrentFactorMultiplier*mOffsetPercent);
            canvas.drawBitmap(mCurrentBackground, -oxb, 0, mPaint);
        }

        private void onDraw_postscale(Canvas canvas) {
            int oxb=(int) (mCurrentFactorMultiplier*mOffsetPercent);
            mRectSource.left=oxb;
            mRectSource.right=mCurrentFactorWidth+oxb;
            canvas.drawBitmap(mCurrentBackground,mRectSource,mRectDestination, mPaint);
        }

        private void construct(Context context) {
            mPaint=new Paint();
        }
    }

    //// EOF ParallaxBackground.java

注意:您可以通过编程方式或在 XML 中实例化 ParallaxBackground。只要确保它在 viewpager 后面即可。要在 XML 中实例化它，您不需要做特殊的事情:

<com.regaliz.gui.views.ParallaxBackground
    android:id="@+id/masterBackground"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

然后你可以像使用任何其他 View 一样使用该组件

ParallaxBackground back=findViewById(R.id.masterBackground);
back.setBackgroundDrawable(R.drawable.your_cool_drawable);

注意 2:如果您使用的是 Jelly Bean API，您会看到 SetBackgroundDrawable(Drawable d) 已被 setBackground(Drawable d) 取代。我目前还没有使用 JB api，但是您所要做的就是将 setBackgroundDrawable 重命名为 setBackground。 ** 这很重要 **

注意 3:ParallaxBackgroundView 有两种模式:MODE_PRESCALE 和 MODE_POSTSCALE。模式 PRESCALE 缩放位图并将其始终保存在内存中，因此 onDraw 应该更快。模式 POSTSCALE 不做任何预缩放，而是在 onDraw() 上完成缩放。这相当慢，但它可能适用于无法在内存中保存巨大位图的低内存设备。

希望对您有所帮助!

顺便说一下，我一直对优化我的代码很感兴趣，所以如果有人有很好的建议，特别是性能或内存相关的，或者增强此类的建议，请张贴!!!