web-dev-qa-db-ja.com

AndroidViewPagerの視差効果

フラグメントをスライドするときに視差効果をエミュレートしようとしています。beginFakeDragとfakeDragByについて読んだことがありますが、正直なところ、それが私の問題に対する最善のアプローチであるかどうかはわかりません。

誰かがViewPagerで同様のことをしたか、これにどのようにアプローチすべきかについてのヒントがありますか?

ありがとうございました

14
pdj

この質問は少し古いですが、まさにそれをやろうとしていたときに見つけました...

基本的にViewPagerを拡張し、onDrawをオーバーライドする独自のソリューションを実装しました。

簡単な例ですべてのコードを見つけることができます ここ

11
Matthieu

カスタムライブラリを使用せずにこれを行う簡単な方法は、ViewPager.PageTransformerを実装することです。

背景要素に同じidを使用するようにレイアウトを作成しました。私の例では、すべての背景画像はID backgroundを使用します

<ImageView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:id="@+id/background"
    Android:src="@drawable/img12"
    Android:scaleType="fitXY"/>

次に、ViewPager.PageTransformerを実装するときに、次のようにそのイメージを参照できます。

public class Transformer implements ViewPager.PageTransformer{
    @Override
    public void transformPage(View page, float position) {
        if(position >= -1 && position <= 1){
            page.findViewById(R.id.background).setTranslationX(-position * page.getWidth() / 2);
        } else {
            page.setAlpha(1);
        }
    }
}

最後に、ViewPager.PageTransformerViewPagerにそのように割り当てます。

ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setPageTransformer(false, new Transformer());
13
Chris Stillwell

私はそれが少し古いことを知っていますが、それを見てください https://github.com/xgc1986/ParallaxPagerLibrary

OnDrawメソッドをオーバーライドすることはなく、効果は画像だけでなく、あらゆる種類のビューで機能します。

mPager.setPageTransformer(false, new ParallaxTransformer(R.id.parallaxContent));

R.id.paraallaxContentは、この効果を持たせたいビューのIDです。

他の解決策がない限り、機能するために具体的な構造は必要なく、レイアウトに依存しません

デモ: youtube

6
xgc1986

このライブラリは、x方向とy方向に完全にカスタマイズ可能で、アルファ効果が含まれています。

https://github.com/prolificinteractive/ParallaxPager

インストール(v0.7以降、更新についてはREADME)を確認してください):

  1. GradleでMavenCentralの依存関係として追加

  2. レイアウトXMLではParallaxContainerの代わりにViewPagerを使用してください

  3. 各ページのレイアウトXMLファイルを作成します(x/y/alpha属性は、ページに出入りするオブジェクトごとに個別に設定できます)

  4. アクティビティのonCreateに追加するコピー/貼り付け行がいくつかあります

parallax planet animation

2
matt---

あなたはこれを見ることができます:

https://github.com/luxsypher/ParallaxViewPager

ビューの任意の要素に視差効果を適用して、すべての異なる速度を与えることができます

2
Damien Locque

多分このライブラリはあなたを助けることができます:

https://github.com/garrapeta/ParallaxViewPager

2
GaRRaPeTa

これは私が書いたViewPagerサブクラスで、非常に使いやすいです。何か違うことをする必要はありません。依存関係を含めて、標準のViewPagerとして使用するだけです。 GitHub で利用できます。

2
Andras K

たぶん、このライブラリは役に立つかもしれません: https://github.com/matrixxun/ProductTour

「ViewPager.PageTransformer」を使用して、内部の動きを変えます。

1