共享元素

情景

推出“材料设计”同时5.0附带的“廉价”Android动画，让页面的跳转对用户更加指引性，也让页面的跳转通过“Shared Element”联系起来。

效果

使用

一、跳转前的RecyclerView的item布局如下。
重点在：transitionName，后面的String全局唯一

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="10dp">

    <ImageView
        android:id="@+id/img"
        android:transitionName="SharedImage"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="SharedTitle"
        android:ellipsize="end"
        android:paddingVertical="16dp"
        android:singleLine="true"
        android:textColor="#383838"
        android:textSize="16sp"
        tools:text="多数发达的萨芬" />
</LinearLayout>

二、跳转代码，将共享元素传给下个界面

Intent intent = DetailsActivity.call2DetailsActivity(mContext, bean);
// 这里两个SharedElement,一个TextView 一个Imageview
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
        (Activity) mContext,
        new Pair<View, String>(viewHolder.img, "SharedImage"),
        new Pair<View, String>(viewHolder.tv, "SharedTitle"));
mContext.startActivity(intent, options.toBundle());

三、跳转后Activity布局，重点transitionName，与前面保持一致

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".DetailsActivity">

    <ImageView
        android:id="@+id/img_detail"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:transitionName="SharedImage"
        android:scaleType="fitXY"
        tools:src="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="SharedTitle"
        android:padding="10dp"
        android:textColor="#383838"
        android:textSize="20sp"
        android:textStyle="bold"
        tools:text="图片" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp"
        android:text="假装这里有很多数据的样子。" />
</LinearLayout>

四、跳转后Activity。
重点在：延迟动画postponeEnterTransition();
结束页面调用supportFinishAfterTransition()

public class DetailsActivity extends AppCompatActivity {

    private static String INTENT_ELEMENT = "intent_element";

    private ImageView mImgDetail;
    private TextView mTvTitle;
    private ElementBean mElement;

    public static Intent call2DetailsActivity(Context context, ElementBean bean) {
        Intent intent = new Intent(context, DetailsActivity.class);
        intent.putExtra(INTENT_ELEMENT, bean);
        return intent;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_details);
        // 延迟共享动画的执行
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            postponeEnterTransition();
        }

        mElement = (ElementBean) getIntent().getParcelableExtra(INTENT_ELEMENT);

        mImgDetail = (ImageView) findViewById(R.id.img_detail);
        mTvTitle = (TextView) findViewById(R.id.tv_title);

        mTvTitle.setText(mElement.getTitle());

        // 模拟网络请求转圈
        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        Glide.with(this)
                .load(mElement.getUrl())
                .into(new DrawableImageViewTarget(mImgDetail) {
                    @Override
                    protected void setResource(@Nullable Drawable resource) {
                        super.setResource(resource);
                        //图片加载完成的回调中，启动过渡动画
                        supportStartPostponedEnterTransition();
                    }
                });
    }

    @Override
    public void onBackPressed() {
        // 不使用finish()
            supportFinishAfterTransition();
    }
}

以上，共享元素简单使用。