在之前的文章中，我们通过动画实现了这个，具体可以查看【Android 动画】动画详解之仿微信查看大图效果（四），这里，我们用过度动画来实现。
什么是共享元素？
它是Android 5.0新加入的一种过度动画，主要用于2个activity之间，可以共享某些控件，实现无缝转场的动画。
如何使用？
1.为共享元素指定统一的 transition name
2.启动 Activity 时带上共享元素参数
效果图
20181229_084519.gif
录制的gif 不是很流畅，实际效果还是很流畅的
首先，我们需要一个九宫格，9张图片
list = new ArrayList<>();
list.add("http://img1.imgtn.bdimg.com/it/u=4206294871,879077254&fm=26&gp=0.jpg");
list.add("http://img1.imgtn.bdimg.com/it/u=1901690610,3955011377&fm=200&gp=0.jpg");
list.add("http://img3.imgtn.bdimg.com/it/u=1546158593,2358526642&fm=200&gp=0.jpg");
list.add("http://img0.imgtn.bdimg.com/it/u=3792909229,2321547963&fm=200&gp=0.jpg");
list.add("http://img4.imgtn.bdimg.com/it/u=1621655683,865218969&fm=200&gp=0.jpg");
list.add("http://img5.imgtn.bdimg.com/it/u=4286838121,1364454560&fm=26&gp=0.jpg");
list.add("http://img5.imgtn.bdimg.com/it/u=551944592,1654216059&fm=26&gp=0.jpg");
list.add("http://img1.imgtn.bdimg.com/it/u=2550323596,2167297465&fm=200&gp=0.jpg");
list.add("http://img4.imgtn.bdimg.com/it/u=952962361,1269259737&fm=26&gp=0.jpg");
wxAdapter = new WxAdapter(list);
rvWx2.setLayoutManager(new GridLayoutManager(WX2Activity.this, 3));
rvWx2.setAdapter(wxAdapter);
wxAdapter.bindToRecyclerView(rvWx2);
WxAdapter，这里使用的是 BaseRecyclerViewAdapterHelper
class WxAdapter extends BaseQuickAdapter<String, BaseViewHolder> {
public WxAdapter(List<String> list) {
super(R.layout.item_wx2, list);
}
@Override
protected void convert(BaseViewHolder helper, String item) {
ImageView iv_img = helper.getView(R.id.iv_wx_img);
Glide.with(mContext).load(item).apply(new RequestOptions().centerCrop()).into(iv_img);
}
}
item_wx2.xml，请注意这里的指定了transitionName，这个可以自定义，只需和目标view统一即可
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/iv_wx_img"
android:layout_width="match_parent"
android:transitionName="share"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
</android.support.constraint.ConstraintLayout>
当点击图片时，我们需要跳转至查看大图页面
wxAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
@Override
public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
ImageView iv = view.findViewById(R.id.iv_wx_img);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
share(iv, position);
}
}
});
此处的share 需与之前布局保持一致
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private void share(View view, int position) {
Intent intent = new Intent(WX2Activity.this, Img2Activity.class);
intent.putStringArrayListExtra(Img2Activity.IMG_KEY, list);
intent.putExtra(Img2Activity.IMG_POSITION, position);
Bundle bundle = ActivityOptions.makeSceneTransitionAnimation(this, view, "share").toBundle();
startActivity(intent, bundle);
}
Img2Activity ，这里我们使用RecyclerView+PagerSnapHelper，关于PagerSnapHelper，在之前的文章中，已经说过，这里不再细述。具体可以查看【Android 进阶】仿抖音系列之翻页上下滑切换视频（四）
private void initView() {
imgList = getIntent().getStringArrayListExtra(IMG_KEY);
enterPosition = getIntent().getIntExtra(IMG_POSITION, 0);
snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(rvPreview);
imgAdapter = new ImgAdapter(imgList);
rvPreview.setLayoutManager(new LinearLayoutManager(Img2Activity.this, LinearLayoutManager.HORIZONTAL, false));
rvPreview.setAdapter(imgAdapter);
imgAdapter.bindToRecyclerView(rvPreview);
rvPreview.scrollToPosition(enterPosition);
}
这里，取出之前传递的值，并初始化
ImgAdapter
class ImgAdapter extends BaseQuickAdapter<String, BaseViewHolder> {
public ImgAdapter(List<String> list) {
super(R.layout.item_img, list);
}
@Override
protected void convert(BaseViewHolder helper, String item) {
ImageView iv_img = helper.getView(R.id.iv_img);
Glide.with(mContext).load(item).into(iv_img);
}
}
item_img，transitionName 需要与之前保持一致，此处PhotoView支持手势放大，不需要的可以用ImageView代替
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.ch.animdemo.phoneView.PhotoView
android:id="@+id/iv_img"
android:layout_width="0dp"
android:layout_height="0dp"
android:transitionName="share"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
到这里，基本效果已经实现了，不过还有2个坑要填。
1.当我们运行时会发现，会出现Img2Activity出现是小图，而不是我们期望的大图。
这是因为，加载网络图片需要时间，如果过度动画执行太快，图片还没有加载出来，而glide缓存策略是按加载的尺寸+图片路径缓存，由于之前缓存过小图，所以当大图没有加载出来时，会显示小图。
所以我们刚进入界面时，需要延迟过度动画的执行
// 延迟共享动画的执行
postponeEnterTransition();
当图片加载完成时，才继续执行过度动画
//图片加载完成的回调中，启动过渡动画
startPostponedEnterTransition();
2.当我们滑动大图界面，然后返回时会发现，返回动画依然是进入大图界面的位置，所以我们需要判断，如果滑动过，就需要更新返回时的位置。
修改之前Img2Activity的initview方法如下：
private void initView() {
// 延迟共享动画的执行
postponeEnterTransition();
imgList = getIntent().getStringArrayListExtra(IMG_KEY);
enterPosition = getIntent().getIntExtra(IMG_POSITION, 0);
currentPosition = enterPosition;
snapHelper = new PagerSnapHelper() {
@Override
public int findTargetSnapPosition(RecyclerView.LayoutManager layoutManager, int velocityX, int velocityY) {
currentPosition = super.findTargetSnapPosition(layoutManager, velocityX, velocityY);
return currentPosition;
}
};
snapHelper.attachToRecyclerView(rvPreview);
imgAdapter = new ImgAdapter(imgList);
rvPreview.setLayoutManager(new LinearLayoutManager(Img2Activity.this, LinearLayoutManager.HORIZONTAL, false));
rvPreview.setAdapter(imgAdapter);
imgAdapter.bindToRecyclerView(rvPreview);
rvPreview.scrollToPosition(enterPosition);
}
finishAfterTransition重写finishAfterTransition，传递最新的position
@Override
public void finishAfterTransition() {
Intent intent = new Intent();
if (enterPosition == currentPosition) {
//没有改变
intent.putExtra(IMG_CURRENT_POSITION, -1);
} else {
intent.putExtra(IMG_CURRENT_POSITION, currentPosition);
}
setResult(RESULT_OK, intent);
super.finishAfterTransition();
}
然后在WX2Activity中处理
@Override
public void onActivityReenter(int resultCode, Intent data) {
if (resultCode == RESULT_OK && data != null) {
int exitPos = data.getIntExtra(Img2Activity.IMG_CURRENT_POSITION, -1);
final View exitView = getExitView(exitPos);
if (exitView != null) {
ActivityCompat.setExitSharedElementCallback(this, new SharedElementCallback() {
@Override
public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) {
names.clear();
sharedElements.clear();
names.add(ViewCompat.getTransitionName(exitView));
sharedElements.put(Objects.requireNonNull(ViewCompat.getTransitionName(exitView)), exitView);
setExitSharedElementCallback(new SharedElementCallback() {
});
}
});
}
}
}
private View getExitView(int position) {
if (position == -1) {
return null;
}
if (wxAdapter != null) {
return wxAdapter.getViewByPosition(position, R.id.iv_wx_img);
}
return null;
}
网友评论