web-dev-qa-db-ja.com

新しいPlayストアの視差効果の実行方法

新しい視差スクロール効果を達成する方法を誰もが知っていますか？PlayStoreでアプリを開いて下にスクロールしようとすると、効果が表示され、コンテンツがトップ画像の上に表示されます。どうすればそれを達成できますか？

enter image description here

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

Googleは最近 デザインサポートライブラリ を発表しました。これにより、実装ツールバーの折りたたみツールバーがサポートされます。

ビューを固定することに加えて、app:layout_collapseMode="parallax"（およびオプションでapp:layout_collapseParallaxMultiplier="0.7"視差乗数を設定するため）視差スクロールを実装する（CollapsingToolbarLayout内の兄弟ImageViewなど）

例：

<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>
61
Paresh Mayani

これを試すことができます（FadingActionBarライブラリ）： https://github.com/ManuelPeinado/FadingActionBar

Androidでこのライブラリの例を試してください。 https://play.google.com/store/apps/details?id=com.manuelpeinado.fadingactionbar.demo

EDIT：サードパーティのライブラリではなく、このAppBarLayoutとCollapsingToolbarLayoutを使用します http://Android-developers.blogspot.in/2015/05/ Android-design-support-library.html

29
Yuraj

ObservableScrollViewライブラリを試してください

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

playストアのデモアプリケーション

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

サンプルデモ、

enter image description here

18
Ranjith Kumar

FadingActionBarというライブラリがあり、まさにあなたが求めていることをします。ライブラリは GitHub（クリック） にあり、デモアプリケーションは Playストア（クリック） にあります。

使用方法は次のようになります。

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

実際、この質問を投稿してから数分後に、私が探している効果を発揮する2つ以上のライブラリに出会いました。

それらへのリンクは次のとおりです。

4
Darko Petkovski

ごみ箱ビューのスクロールを追跡することにより、視差アニメーションをカスタマイズできます。

まず、画像ビューのレイアウト。 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>

その後、リサイクラビューのスクロール効果を追跡し、イメージビューを移行します。

***実装にrxbindingとkotlinを使用しています。従来のリスニング方法とJavaアプローチを同じ考え方で使用できます。

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