情景
推出“材料设计”同时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();
}
}
以上,共享元素简单使用。