Как и в LinkedIn на первых трех экранах
- Всплеск
- Кнопки входа/регистрации
- Форма входа/регистрации
все имеют одинаковое изображение в качестве фона, но при переходе от одной активности к другой фоновое изображение прокручивается влево справа.
Я мог бы попробовать только overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);
Но это не то, на что похоже.
Это называется прокруткой параллакса, и я реализовал его, используя 2 слоя: один для контента и другой для фона. Содержимое, вы размещаете его на ViewPager без фона. Обратите внимание: вместо действий вы будете использовать Фрагменты (каждая страница будет фрагментом), который будет анимироваться с помощью viewpager. (См. FragmentStatePagerAdapter)
Фон переходит на фоновый слой, очевидно за панель зрения и независимый от него. Это может быть изображение внутри scrollview или изображение, область отсечения которого вы будете перемещать, или изображение, которое вы визуализируете с помощью drawBitmap (x, y). Пожалуйста, см. Прилагаемый источник для моего решения, который расширяет представление, чей фон можно прокручивать, просто вызывая метод "setPercent"
Затем вы переопределяете
viewPager.setOnPageChangeListener(new OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float percent, int pixoffset) {
// this is called while user 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. Я размещаю здесь полную рабочую версию своего собственного 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
Примечание. Вы можете создавать ParallaxBackground либо программно, либо в формате XML. Просто убедитесь, что он находится за зрителем. Например, в XML вам не нужно делать специальные вещи:
<com.regaliz.gui.views.ParallaxBackground
android:id="@+id/masterBackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
Затем вы можете использовать компонент так же, как и любой другой вид
ParallaxBackground back=findViewById(R.id.masterBackground);
back.setBackgroundDrawable(R.drawable.your_cool_drawable);
Примечание 2: Если вы используете API Jelly Bean, вы увидите, что SetBackgroundDrawable (Drawable d) был заменен на setBackground (Drawable d). Я пока не использую JB api, но все, что вам нужно сделать, это переименовать setBackgroundDrawable в setBackground. ** Это важно **
Примечание 3: ParallaxBackgroundView имеет 2 режима: MODE_PRESCALE и MODE_POSTSCALE. Режим PRESCALE масштабирует растровое изображение и сохраняет его всегда в памяти, поэтому onDraw должен быть быстрее. Режим POSTSCALE не выполняет никакого предварительного масштабирования, вместо этого масштабирование выполняется на onDraw(). Это довольно медленно, но может быть полезно для устройств с малой памятью, которые не могут позволить себе хранить огромные растровые изображения в памяти.
Надеюсь, это поможет!
Кстати, я всегда заинтересован в оптимизации моего кода, поэтому, если у кого-то есть большое предложение, особенно производительность или память, или улучшает этот класс, пожалуйста, отправьте его!!!
Один из способов сделать это - расширить ViewPager. Это уже сделано кем-то, и вы можете проверить код на github.