【Android视图效果】共享元素实现仿微信查看大图效果

在之前的文章中,我们通过动画实现了这个,具体可以查看【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 {
        public WxAdapter(List 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统一即可



    


当点击图片时,我们需要跳转至查看大图页面

  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 {
        public ImgAdapter(List 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_imgtransitionName 需要与之前保持一致,此处PhotoView支持手势放大,不需要的可以用ImageView代替




    


到这里,基本效果已经实现了,不过还有2个坑要填。
1.当我们运行时会发现,会出现Img2Activity出现是小图,而不是我们期望的大图。
这是因为,加载网络图片需要时间,如果过度动画执行太快,图片还没有加载出来,而glide缓存策略是按加载的尺寸+图片路径缓存,由于之前缓存过小图,所以当大图没有加载出来时,会显示小图。
所以我们刚进入界面时,需要延迟过度动画的执行

  // 延迟共享动画的执行
  postponeEnterTransition();

当图片加载完成时,才继续执行过度动画

  //图片加载完成的回调中,启动过渡动画
   startPostponedEnterTransition();

2.当我们滑动大图界面,然后返回时会发现,返回动画依然是进入大图界面的位置,所以我们需要判断,如果滑动过,就需要更新返回时的位置。
修改之前Img2Activityinitview方法如下:

    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();
       intent.putExtra(IMG_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 names, Map 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;
    }

最后献上源码 github

你可能感兴趣的:(【Android视图效果】共享元素实现仿微信查看大图效果)