在兩個fragment中的recylerView使用ShareElements的簡單筆記

1：類似漸變的Fade()

2:忘了是Siled()還是explode()；

2:

總體描述一下這個動畫，這是兩個fragment，第一個framgent有一個recylerview，第二個framgnet是一個不同的頁面就一個圖片和textview。可以看到以一個頁面recylerview的item的界面和第二個界面的佈局類似，在數據傳遞的時候可以傳遞同一個對象數據，甚至是同一個view對象。這是我的理解。兩個界面切換的時候，把這兩個view當做共享元素。

第一步，在第二個xml佈局中加入共享名稱標籤，我這裏兩個界面用的同一個圖片，就在imageview中加入

android:transitionName="@string/transition"

第二部，在第一個界面的recyler的onCreateView中設置viewHold的transitionName

holder.getImageView().setTransitionName(position+"img");

或者

ViewCompat.setTransitionName(holder.getImageView(), String.valueOf(position) + "img")

這裏解釋下爲什麼要這樣設置，共享元素兩個界面的TransitionName必須一樣，如果是普通的兩個activity或者fragement直接在佈局寫死就好，但是因爲recylerview和listview的item佈局是複用，就要讓每一個item的setTransitionName不一樣，後面加的“img”可以是任何值，但不能和其他view的值相同

第三部，寫一個進行變換操作的類，這一部分我也不知道知道主要是什麼意思，後期慢慢研究吧，先備個份

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class DetailTransition extends TransitionSet {
    public DetailTransition() {
        init();
    }

    // 允許資源文件使用
    public DetailTransition(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setOrdering(ORDERING_TOGETHER);
        addTransition(new ChangeBounds()).
                addTransition(new ChangeTransform()).
                addTransition(new ChangeImageTransform());
    }
}

第四部在進行framgment事務之前加上操作

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                detailFragment.setSharedElementEnterTransition(new DetailTransition());
                setExitTransition(new Fade());
                detailFragment.setEnterTransition(new Fade());
                detailFragment.setSharedElementReturnTransition(new DetailTransition());
            }

共享元素貌似要棒棒糖後才生效

然後在事務中添加

.addSharedElement(holder.getImageView(), getResources().getString(R.string.transition))
                    

第一個參數，第一個界面共享元素的view，第二個參數第二個界面的transitionName，這裏可以不止是加一個view，也可以加多個

這樣就完成了共享元素的所有操作。

貼上我在fragment跳轉時的所有代碼

    private MyViewOnClickListener mListener = new MyViewOnClickListener() {
        @Override
        public void onClickedView(MyGridViewHolder holder, int position) {
            DetailFragment detailFragment = DetailFragment.newInstance(position);

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                detailFragment.setSharedElementEnterTransition(new DetailTransition());
                setExitTransition(new Fade());
//設置進入fragment和退出framgment的動畫 還有silde（），explode（）
                detailFragment.setEnterTransition(new Fade());
                detailFragment.setSharedElementReturnTransition(new DetailTransition());
            }
            Bundle bundle = new Bundle();
            bundle.putSerializable("val", new bean(mData.get(position).name,
                    mData.get(position).url));
            detailFragment.setArguments(bundle);
            getActivity().getSupportFragmentManager().beginTransaction()
                    .addSharedElement(holder.getImageView(), getResources().getString(R.string.image_transition))
                    .addSharedElement(holder.getTextView(), getResources().getString(R.string.tv_transition))
                    .replace(R.id.main_cl_container, detailFragment)
                    .addToBackStack(null)
                    .commit();
        }
    };

接下來研究下共享元素怎麼搭配路由跳轉

原創，歡迎討論和反饋