webentwicklung-frage-antwort-db.com.de

So machen Sie den neuen Play Store-Parallax-Effekt

Weiß jemand, wie ich den neuen Parallax-Scrolling-Effekt erzielen kann - Sie können den Effekt sehen, wenn Sie eine App im PlayStore öffnen und versuchen, einen Bildlauf nach unten durchzuführen. Wie kann ich das erreichen?

enter image description here

androidandroid-layoutandroid-animationmaterial-designandroid-scroll
46
Darko Petkovski

Google hat kürzlich die Design-Support-Bibliothek angekündigt und unterstützt damit die Implementierung von Collapsing Toolbar.

Zusätzlich zum Festlegen einer Ansicht können Sie .__ verwenden. app:layout_collapseMode="parallax" (und optional app:layout_collapseParallaxMultiplier="0.7" zum Einstellen des Parallax -Vervielfachers) zum Implementieren des Parallax-Scrollens (etwa eines Geschwisters ImageView innerhalb der CollapsingToolbarLayout)

Beispiel:

<Android.support.design.widget.AppBarLayout
        Android:layout_height="192dp"
        Android:layout_width="match_parent">
    <Android.support.design.widget.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <Android.support.v7.widget.Toolbar
                Android:layout_height="?attr/actionBarSize"
                Android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>
        </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
60
Paresh Mayani

Sie können dies versuchen (FadingActionBar-Bibliothek): https://github.com/ManuelPeinado/FadingActionBar

Versuchen Sie ein Beispiel für diese Bibliothek unter Android: https://play.google.com/store/apps/details?id=com.manuelpeinado.fadingactionbar.demo </ strike>

EDIT: Verwenden Sie statt der Bibliothek von Drittanbietern dieses AppBarLayout und CollapsingToolbarLayout http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html

29
Yuraj

probieren Sie die Bibliothek ObservableScrollView aus

https://github.com/ksoichiro/Android-ObservableScrollView

demo-Anwendung aus dem Play Store

https://play.google.com/store/apps/details?id=com.github.ksoichiro.Android.observablescrollview.samples2

beispieldemo,

enter image description here

18
Ranjith Kumar

Es gibt eine Bibliothek namens FadingActionBar, die genau das tut, wonach Sie fragen. Sie finden die Bibliothek auf GitHub (click) und eine Demo-Anwendung im Play Store (click) .

Die Nutzung wäre etwa so:

FadingActionBarHelper helper = new FadingActionBarHelper()
    // Set the ActionBar drawable - basically the color
    .actionBarBackground(R.drawable.ab_background)
    // Set the Header - usually an image
    .headerLayout(R.layout.header)
    // Set the main layout
    .contentLayout(R.layout.activity_scrollview);
setContentView(helper.createView(this));
helper.initActionBar(this);
4
reVerse

Wenige Minuten nachdem ich diese Frage gestellt hatte, stieß ich auf zwei Bibliotheken, die den Effekt haben, den ich suche, und noch mehr.

Hier sind Links zu ihnen:

4
Darko Petkovski

Sie können die Parallax-Animation anpassen, indem Sie den Bildlauf der Recycler-Ansicht verfolgen

Erstens im Layout der Bildansicht. Legen Sie fest, dass das übergeordnete Layout kleiner als die Bildansicht ist, sodass das Bild außerhalb der Begrenzung angezeigt wird, wenn translationY festgelegt wird

<Android.support.percent.PercentRelativeLayout
        Android:id="@+id/index_level6_image_section"
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:clipChildren="false">

        <ImageView
            Android:id="@+id/index_level6_parallaxImage"
            Android:layout_width="match_parent"
            Android:layout_height="240dp"
            Android:layout_centerInParent="true"
            Android:background="@color/timberwolf"
            Android:layout_marginTop="-20"
            Android:layout_marginBottom="-20"
            Android:scaleType="centerCrop"
            app:imageUrl="@{level6CellViewModel.level6ImageUrl}" />

    </Android.support.percent.PercentRelativeLayout>

Verfolgen Sie anschließend den Bildlaufeffekt der Recycler-Ansicht und wechseln Sie in die Bildansicht. 

*** Ich verwende für die Implementierung Rxbinding und Kotlin. Sie können die traditionelle Hörmethode und den Java-Ansatz mit derselben Idee verwenden.

RxRecyclerView.scrollEvents(recyclerView)
                    .subscribe { event ->
                        // get the visible cell items of the recycler view
                        val firstVisible = layoutManager.findFirstVisibleItemPosition()
                        val visibleCount = Math.abs(firstVisible - layoutManager.findLastVisibleItemPosition())

                        /** loop the visible cell items from the recycler view */
                        for (i in firstVisible..firstVisible + visibleCount) {
                            event.view().layoutManager?.findViewByPosition(i)?.let { cellItem ->
                                /** only for index cell level 6 parallax image */
                                cellItem.findViewById(R.id.index_level6_parallaxImage)?.let { imageView ->
                                    /** setting the parallax effect */
                                    val translationY = (cellItem.top - cellItem.height) / level6ParallaxRate
                                    imageView.translationY = -translationY
                                }
                            }
                        }
                    }
0
Kit