六、SharedElementTransition之Fragme

如果你想在Fragment中使用transition，除了一小部分区别之外和activity大体一致：

1. Content的exit, enter, reenter, 和return transition需要调用fragment的相应方法来设置，或者通过fragment的xml属性来设置。

2. 共享元素的enter和return transition也n需要调用fragment的相应方法来设置，或者通过fragment的xml属性来设置。

3. 虽然在activity中transition是被startActivity()和finishAfterTransition()触发的，但是Fragment的transition却是在其被FragmentTransaction执行下列动作的时候自动发生的。added, removed, attached, detached, shown, ，hidden。

4. 在Fragment commit之前，共享元素需要通过调用addSharedElement(View, String)方法来成为FragmentTransaction的一部分。

以上摘抄自:
Activity和Fragment Transition介绍

---

下面来看一个小例子

GIFsharebetFrag.gif

//activity_share_elements_to_frg.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rootView"
    tools:context="com.gdut.dkmfromcg.transitionlearn.ShareElementsToFrgActivity">

</RelativeLayout>

//activity
public class ShareElementsToFrgActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_share_elements_to_frg);
        ShareFragment fragment=new ShareFragment();
        getSupportFragmentManager().beginTransaction().add(R.id.rootView,fragment).commit();
    }
}

---

ShareFragment

public class ShareFragment extends Fragment {

    View mView;
    ImageView imageView;
    TextView textView;
    Button btn;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        mView=inflater.inflate(R.layout.fragment_share, container, false);
        imageView=mView.findViewById(R.id.iv);
        textView=mView.findViewById(R.id.tv);
        btn=mView.findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TextFragment fragment=new TextFragment();
                fragment.setSharedElementEnterTransition(new ChangeBounds());
                fragment.setEnterTransition(new Slide(Gravity.RIGHT));
                getFragmentManager().beginTransaction()
                        .replace(R.id.rootView,fragment)
                        .addToBackStack(null)
                        .addSharedElement(imageView,"iv_share_to_frg")
                        .addSharedElement(textView,"tv_share_to_frg")
                        .commit();
            }
        });
        return mView;
    }
}

//fragment_share.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        app:srcCompat="@drawable/xunlu"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:transitionName="iv_share_to_frg"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="14dp"
        android:text="Hello World !!!"
        android:textSize="24sp"
        android:transitionName="tv_share_to_frg"/>


    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="ShareToFrg"
        android:layout_alignBottom="@+id/iv"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

---

TextFragment

public class TextFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_text, container, false);
    }

}

//fragment_text.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_green_light"
    tools:context="com.gdut.dkmfromcg.transitionlearn.fragment.TextFragment">

    <!-- TODO: Update blank fragment layout -->

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/xunlu"
        android:layout_marginStart="51dp"
        android:transitionName="iv_share_to_frg"
        android:layout_marginBottom="90dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/tv"
        android:textSize="24dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/iv"
        android:layout_marginStart="38dp"
        android:layout_marginTop="43dp"
        android:layout_toEndOf="@+id/iv"
        android:text="Hello World !!!"
        android:transitionName="tv_share_to_frg"/>

</RelativeLayout>

例子源码：animatedTransitionsLearn-master

Transition系列文章
一、初识Transition—实现两个场景的变换
二、番外篇 Transition之ViewOverlay
三、定义 界面指定元素 或界面间共享元素 的转场动画基础
四、Content Transition实现非共享元素转场
五、SharedElementTransition之Activity间的转场
六、SharedElementTransition之Fragment间的转场
七、番外篇- 自定义Visibility
八、5.0以下实现共享转场