27

私が開発しているアプリは、画像のグリッドを表示します。画像をタップすると、詳細ビ​​ューに移動します。詳細ビューには、グリッド内のすべての画像間をスワイプできる ViewPager が含まれています。これは、パスのリスト (グリッド内のすべての画像を含む) と、タップされた画像のオフセットを渡すことによって行われるため、ViewPager はそのページを最初に表示するように設定できます。

ViewPager の現在のオフセット ページの Fragment 内で共有要素遷移を行う最良の方法は何ですか? グリッド (RecyclerView) 画像は、現在のページの全画面画像に展開されます。アクティビティの遷移を延期および再開する機能を確認したので、アプリは、画像がディスクから読み込まれるまで、共有要素の遷移の表示を待機します。しかし、ビューページャーで正しいページにアニメーション化し、ユーザーが戻ったときに現在のページに戻ることができるようにしたいと考えています (ページ間をスワイプできるため)。ここで別のページにスワイプすると、最初のページがアニメーションでグリッドに戻ります。

現在、ビューページャーのフラグメント内のすべての画像に、「image_[index]」形式の transitionName を割り当てています。詳細アクティビティを開始するときは、インデックスをオフセットとして同じ transitionName を使用します。

これに関連して、長押しで波紋を機能させる方法も考えていました。ビューのアクティブ化状態を変更すると、リップルがキャンセルされるようです。波紋が再び始まり、長押しが完了してアクティブ化状態をトリガーした後、すぐに終了する、Gmail に似た効果が必要です。

4

2 に答える 2

35

私が知る限り (間違っている場合は訂正してください)、達成しようとしているのは基本的に次のようなものMainActivityですDetailsActivity。は画像のMainActivityセットをグリッドにDetailsActivity表示し、 は同じ画像のセットを水平に表示しますViewPager。ユーザーが で画像を選択するとMainActivity、その画像はグリッド内の位置から 2 番目のアクティビティの 内の正しいページに遷移する必要がありますViewPager。

私たちが解決したい問題は、「ユーザーがページ内でページを切り替えたらどうなるかDetailsActivity」です。これが発生した場合、リターン遷移中に使用される共有イメージを変更したいと考えています。デフォルトでは、アクティビティ トランジション フレームワークは、エンター トランジション中に使用された共有要素を使用しますが、ビュー ページャーのページが変更されているため、明らかにこの動作をオーバーライドする必要があります。そのためにはSharedElementCallback、MainActivityとDetailsActivityのメソッドに a を設定し、次のようonCreate()にメソッドをオーバーライドする必要があります。onMapSharedElements()

private final SharedElementCallback mCallback = new SharedElementCallback() {
    @Override
    public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) {
        if (mCurrentImagePosition != mOriginalImagePosition) {
            View sharedView = getImageAtPosition(mCurrentImagePosition);
            names.clear();
            sharedElements.clear();
            names.add(sharedView.getTransitionName());
            sharedElements.put(sharedView.getTransitionName(), sharedView);
        }
    }

    /**
     * Returns the image of interest to be used as the entering/returning
     * shared element during the activity transition.
     */
    private View getImageAtPosition(int position) {
        // ...
    }
};

より完全な解決策として、この効果を実現するサンプル プロジェクトを GitHub に作成しました(1 つの StackOverflow 回答に投稿するにはコードが多すぎます)。

于 2014-12-05T17:04:56.090 に答える