13

私のアプリケーションのメイン画面には、画像のグリッド ビューが含まれています。ユーザーが画像を選択すると、選択したグリッド画像を詳細アクティビティの CardView にあるペアの画像にアニメーション化する共有要素遷移を使用して、詳細アクティビティが開始されます。

CoordinatorLayout と CollapsingToolbarLayout を含むように詳細ビューの XML レイアウトをアップグレードした後、共有要素のトランジションによって画像ビューが詳細アクティビティ (「入力」アクティビティ) の間違った場所に移動します。フレームワークは、AppBarLayout 全体と内部の CollapsingToobarLayout のオフセットを無視しているように見え、ターゲット イメージ ビューを含む CardView の上に CollapsingToolBarLayout がない場合のイメージのおおよその位置にアニメーション化します。

この問題は、Activity_detail.xml の 3 つの CardViews のいずれかに ImageView (transitionName を使用) を追加することで、Chris Banes のCheesesquare サンプル アプリで再現できます。

<ImageView
 android:id="@+id/imageView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@mipmap/ic_launcher"
 android:transitionName="sharedImage" />

次に、CheeseListFragment.java の onBindViewHolder で共有要素遷移を次のように設定します。

@Override
public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.mBoundString = mValues.get(position);
        holder.mTextView.setText(mValues.get(position));

        holder.mView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Context context = v.getContext();
                Intent intent = new Intent(context, CheeseDetailActivity.class);
                intent.putExtra(CheeseDetailActivity.EXTRA_NAME, holder.mBoundString);

                holder.mImageView.setTransitionName("sharedImage");                        
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(
                                getActivity(v.getContext()),
                                            holder.mImageView,                     
                                            "sharedImage");
                ActivityCompat.StartActivity((MyActivity) context, intent, options.toBundle());
            }
        });

        Glide.with(holder.mImageView.getContext())
                .load(Cheeses.getRandomCheeseDrawable())
                .fitCenter()
                .into(holder.mImageView);
    }

アプリケーションを実行し、チーズ リストの項目をクリックすると、トランジション アニメーションが画像を目的のアクティビティ ビューの不適切な (高すぎる) オフセットに移動する様子がわかります。アニメーションが完了すると、画像が正しい位置に「ワープ」したように見えます。

可能な回避策についての考えは大歓迎です。

4

2 に答える 2