Bildansicht parallax-Effekt beim scrollen

Gibt es ein paar Bibliotheken, die zu einem Parallaxe-Effekt, es hängt von Ihrem app-wenn Sie nützlich sind für Ihren speziellen Fall, zum Beispiel:

• ParallaxScroll
• Paralloid

Google ist dein Freund, Kamerad 😉 wenn keine der Ihren Bedürfnissen entspricht, dann müssen Sie erstellen Sie eine benutzerdefinierte ScrollView aber das ist eine längere Geschichte, zuerst geben Sie Ihnen einen Versuch und poste deine Ergebnisse.

Bearbeiten

Wenn keiner von diesen passen Sie Ihr abgestimmt, dann ist dies, was Sie zu tun haben:

Ersten, erstellen Sie eine benutzerdefinierte ScrollView so dass Sie hören können, um zu Blättern verpasst.

public class ObservableScrollView extends ScrollView {

    public interface OnScrollChangedListener {
        public void onScrollChanged(int deltaX, int deltaY);
    }

    private OnScrollChangedListener mOnScrollChangedListener;

    public ObservableScrollView(Context context) {
        super(context);
    }

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

    public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(mOnScrollChangedListener != null) {
            mOnScrollChangedListener.onScrollChanged(l - oldl, t - oldt);
        }
    }

    public void setOnScrollChangedListener(OnScrollChangedListener listener) {
        mOnScrollChangedListener = listener;
    }
}

Natürlich müssen Sie diese in Ihr layout anstelle des Standard -ScrollView:

<your.app.package.ObservableScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

Werden Sie brauchen, um wickeln Sie Ihre Bildansicht in einem container, um die Parallaxe Arbeit:

<FrameLayout
    android:id="@+id/img_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />
</FrameLayout>

Endlich Ihre Activity als listener für Ihr neues ObservableScrollView und lassen Sie die Parallaxe beginnen:

public class MyActivity extends Activity implements ObservableScrollView.OnScrollChangedListener {
    private ObservableScrollView mScrollView;
    private View imgContainer;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        //Init your layout and set your listener
        mScrollView = (ObservableScrollView)findViewById(R.id.scroll_view);
        mScrollView.setOnScrollChangedListener(this);
        //Store the reference of your image container
        imgContainer = findViewById(R.id.img_container);
    }

     @Override
    public void onScrollChanged(int deltaX, int deltaY) {
        int scrollY = mScrollView.getScrollY();
        //Add parallax effect
        imgContainer.setTranslationY(scrollY * 0.5f);
    }
}

Können Sie ändern den Wert 0.5, je nachdem, wie viel Parallaxe, die Sie wollen.

Bearbeiten

Die obige Antwort funktioniert gut, wenn Ihr Bildansicht ist in der Spitze der Aktivität. Ich bin Entsendung einige Beispielcode zum hinzufügen von Funktionalität, um die Bildansicht überall in der Aktivität layout, die ich erfolgreich zum laufen gebracht. Dies sind die generischen Berechnungen (haben vielleicht ein paar Fehler) und mit einem kleinen kniff haben, können Sie die arbeiten für Ihren eigenen Fall.

Für dieses Beispiel habe ich eine fix-Höhe für das Bild container 200dp und für das Bild 240dp. Der Hauptzweck ist es, wenn der Bild-container in der Mitte des Bildschirms haben keine Parallaxe-Effekt und der Benutzer einen Bildlauf nach oben oder unten, um den Effekt anzuwenden. So wie die Bild-container näher an der Spitze der Bildschirm oder näher am unteren Rand des Bildschirms, die mehr von der parallax-Effekt angewendet wird. Die folgenden Berechnungen sind ein wenig schwer zu verstehen, Sie zu Lesen, so versuchen Sie zu machen ein Beispiel mit reellen zahlen in dem Papier.

public class MyActivity extends Activity implements ObservableScrollView.OnScrollChangedListener {
    private ObservableScrollView mScrollView;
    private View imgContainer;
    private ImageView mImageView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        //Init your layout and set your listener
        mScrollView = (ObservableScrollView)findViewById(R.id.scroll_view);
        mScrollView.setOnScrollChangedListener(this);
        //Store the reference of your image container
        imgContainer = findViewById(R.id.img_container);
        //Store the reference of your image
        mImageView =  findViewById(R.id.img);
    }

     @Override
    public void onScrollChanged(int deltaX, int deltaY) {
        //Get scroll view screen bound
        Rect scrollBounds = new Rect();
        mScrollView.getHitRect(scrollBounds);

        //Check if image container is visible in the screen
        //so to apply the translation only when the container is visible to the user
        if (imgContainer.getLocalVisibleRect(scrollBounds)) {
            Display display = getWindowManager().getDefaultDisplay();
            DisplayMetrics outMetrics = new DisplayMetrics ();
            display.getMetrics(outMetrics);
            //Get screen density
            float density  = getResources().getDisplayMetrics().density;

            //Get screen height in pixels            
            float dpHeight = outMetrics.heightPixels / density;
            int screen_height_pixels = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpHeight, getResources().getDisplayMetrics());
            int half_screen_height = screen_height_pixels/2;

            //Get image container height in pixels
            int container_height_pixels = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200, getResources().getDisplayMetrics());

            //Get the location that consider a vertical center for the image (where the translation should be zero)
            int center = half_screen_height - (container_height_pixels/2);

            //get the location (x,y) of the image container in pixels
            int[] loc_screen = {0,0};
            imgContainer.getLocationOnScreen(loc_screen);

            //trying to transform the current image container location into percentage
            //so when the image container is exaclty in the middle of the screen percentage should be zero
            //and as the image container getting closer to the edges of the screen should increase to 100%
            int final_loc = ((loc_screen[1]-center)*100)/half_screen_height;

            //translate the inner image taking consideration also the density of the screen
            mImageView.setTranslationY(-final_loc * 0.4f * density);
        }
    }
}

Ich hoffe, es kann jemand helfen, suchen für eine ähnliche Funktionalität.

InformationsquelleAutor peguerosdc

@Override
     public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,int totalItemCount)                                                                                             
              {
                if (listView.getFirstVisiblePosition() == 0) {
                View firstChild = listView.getChildAt(0);
                int topY = 0;
                if (firstChild != null) {
                    topY = firstChild.getTop();
                }

                int heroTopY = stickyViewSpacer.getTop();
                stickyView.setY(Math.max(0, heroTopY + topY));
                imageView.setY(topY * 0.5f);
            }
        }
    });

weitere Referenz, klicken Sie hier http://androiddhina.blogspot.in/2015/08/listview-header-parallax-with-sticky-view-in-android.html

InformationsquelleAutor Dhina k