Android Activity 跳转使用共享动画加载网络的图片

使用textView 显示服务器返回html实现图文混排,并且显示html里的img标签图片,点击图片可查看大图,并且支持手势收缩,查看大图activity跳转使用共享动画 把需要做的功能点列出

  • 使用TextView显示html(使用Html.fromHtml)
  • 显示html里的图片(重写ImageGetter,Glide显示图片)
  • 点击图片可查看大图(重写TagHandler如果是img标签取得图片地址)
  • 支持手势收缩(采用开源photoView)
  • 跳转activity使用共享动画,效果类似微信朋友圈查看大图

     Intent intent = new Intent(context, PhotoViewActivity.class);
     intent.putExtra(Constants.IMGURL, netUrl);
     //这里判断下系统是否大于5.0       
     if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                context.startActivity(intent,  ActivityOptions.makeSceneTransitionAnimation(activity,shareView,"shareView").toBundle());
            }else {
                context.startActivity(intent);
            }

PhotoViewActivity:这个activity是kotlin文件

  url = intent.getStringExtra(Constants.IMGURL)?:""
  if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                ViewCompat.setTransitionName(photoView, "shareView")
            }

       Glide.with(this)
                    .load(url)
                    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                    .dontAnimate()
                    .into(photoView)
这里采用的是代码实现共享view效果,但这出现问题:

1点击图片后 图片位置没有显示在中间,但第二次点击显示到了中间,退出app进程重来又不行,无论怎么设置photoView都不行

2网络太慢可能有瞬间的黑屏,共享view效果不明显


这可能是因为点击之前和之后不是一张图片 加载了两次网络图片,为什么第二次点击正常可能是因为第一次点击后缓存了图片 那么第二次还是使用了现成的图片所以正常了

那么解决这个问题只要在点击之前把需要展示的图片保存到本地,展示直接显示本地的图片就可以了,这样点击后图片立即显示,没有网络的加载过程体验也更好

由于是用Glide显示的图片 他本身就有缓存图片的功能,那么展示的时候直接用它的缓存的图片就好了,省了自己去写下载图片到sd卡的代码

但是发现Glide没有提供获取缓存图片的方法,但是可以获取到加密的缓存路径,然后自己创建个文件夹将图片根据时间戳命名复制一份到文件夹下

  private class GetImageCacheTask extends AsyncTask<String, Void, File> {
        private View shareView;
        private String netUrl;
        public GetImageCacheTask(View shareView,String netUrl) {
            this.shareView = shareView;
            this.netUrl = netUrl;
        }

        @Override
        protected File doInBackground(String... params) {
            try {
                return Glide.with(context)
                        .load(netUrl)
                        .downloadOnly(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                        .get();
            } catch (Exception ex) {
                return null;
            }
        }

        @Override
        protected void onPostExecute(File result) {
            if (result == null) {
                Intent intent = new Intent(context, PhotoViewActivity.class);
                intent.putExtra(Constants.IMGURL, netUrl);
                context.startActivity(intent);
                return;
            }
            //此path就是对应文件的缓存路径
            String path = result.getPath();
            //将缓存文件copy, 命名为图片格式文件
            File fileDir = new File(context.getExternalCacheDir(), Constants.PHOTO_CACHE);
            if (!fileDir.exists()) {
                fileDir.mkdirs();
            }
            String newPath =fileDir.getPath()+ "/"+System.currentTimeMillis()+Constants.PHOTO;
            FilesUtil.copyFile(path,newPath);

            Intent intent = new Intent(context, PhotoViewActivity.class);
            intent.putExtra(Constants.IMGURL, newPath);
            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                context.startActivity(intent,  ActivityOptions.makeSceneTransitionAnimation(activity,shareView,"shareView").toBundle());
            }else {
                context.startActivity(intent);
            }

        }
    }

    /**
     * oldPath: 图片缓存的路径
     * newPath: 图片缓存copy的路径
     */
    public static void copyFile(String oldPath, String newPath) {
        try {
            int byteRead;
            File oldFile = new File(oldPath);
            if (oldFile.exists()) {
                InputStream inStream = new FileInputStream(oldPath);
                FileOutputStream fs = new FileOutputStream(newPath);
                byte[] buffer = new byte[1024];
                while ( (byteRead = inStream.read(buffer)) != -1) {
                    fs.write(buffer, 0, byteRead);
                }
                inStream.close();
            }
        }
        catch (Exception e) {
            System.out.println("复制文件操作出错");
            e.printStackTrace();
        }
    }

改变Glide加载网络图片为加载本地图片,可是发现图片还没有显示到中间,但是每次点击图片的位置不会变化了,难道还是是Glide的关系

 var file = File(url)
        if(file.exists()){
            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                ViewCompat.setTransitionName(photoView, "shareView")
            }
            photoView?.setImageBitmap(Bimp.getLoacalBitmap(url))

photoView改成用setImageBitmap方式显示正常了,上一张完成后的效果图

你可能感兴趣的:(Android Activity 跳转使用共享动画加载网络的图片)