问题
Does anyone know how can I achieve the new parallax scrolling effect - you can see the effect when you open an app on the PlayStore and try to scroll down, the content goes over the top image. How can I achieve that?
回答1:
Google has recently announced Design support library and with this it has support for implementing Collapsing Toolbar.
In addition to pinning a view, you can use
app:layout_collapseMode="parallax"
(and optionallyapp:layout_collapseParallaxMultiplier="0.7"
to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within theCollapsingToolbarLayout
)
Example:
<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>
回答2:
You could try this (FadingActionBar library):
https://github.com/ManuelPeinado/FadingActionBar
Try an example of this library on android: https://play.google.com/store/apps/details?id=com.manuelpeinado.fadingactionbar.demo
EDIT: Rather than third party library use this AppBarLayout and CollapsingToolbarLayout http://android-developers.blogspot.in/2015/05/android-design-support-library.html
回答3:
try the ObservableScrollView library
https://github.com/ksoichiro/Android-ObservableScrollView
demo application from play store
https://play.google.com/store/apps/details?id=com.github.ksoichiro.android.observablescrollview.samples2
sample demo,
回答4:
Actually few minutes after posting this question I bumped on two of libraries that do the effect I'm looking for and even more.
Here are links to them:
- Parallax Scrolls
- Paralloid
回答5:
There's a library called FadingActionBar
that does exactly what you're asking for. You can find the library on GitHub (click) and a Demo-Application in the Play Store (click).
Usage would be something like this:
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);
回答6:
You may custom the parallax animation by tracking the Recycler View Scrolling
Firstly in the image view layout. Set the parent layout is smaller than image view so that prevent the image outside the bound when set translationY
<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>
After that, track the recycler view scrolling effect and transitionY the image view.
*** I am using rxbinding and kotlin for implementation. You may use traditional listening method and java approach with the same idea.
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
}
}
}
}
来源:https://stackoverflow.com/questions/25461014/how-to-do-the-new-playstore-parallax-effect