Android Glide 和 Firebase 存储:将连续图像从 Firebase 存储加载到 Imageview - 闪烁

Posted

技术标签:

【中文标题】Android Glide 和 Firebase 存储:将连续图像从 Firebase 存储加载到 Imageview - 闪烁【英文标题】:Android Glide and Firebase Storage: Load Consecutive Images from Firebase Storage to Imageview - Flickering 【发布时间】:2017-06-16 16:43:00 【问题描述】:

我正在尝试实现将图片从 firebase 存储连续下载到 android 应用程序中的 imageView 中。 到目前为止,我成功了,但结果或多或少很糟糕,因为更新图像会导致闪烁,即两个图像之间的空白图像。

我将最近的图片路径存储在节点“state/recentPicture”中的 Firebase 实时数据库中。每次更新时,我都会通过 ValueEventListener 在我的 android 应用程序中获取它,然后通过 glide 更新我的图像视图。图片的帧率为每秒 3 帧。 我的代码如下所示:

mFirebaseDatabase.child("state").child("recentPicture").addValueEventListener(new ValueEventListener() 
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) 
            Log.d("Picture Update:",dataSnapshot.toString());
            String imgPath = dataSnapshot.getValue(String.class);
            mStorageRef = FirebaseStorage.getInstance().getReference().child(imgPath);
            Glide.with(getContext())
                    .using(new FirebaseImageLoader())
                    .load(mStorageRef)
                    .fitCenter()
                    .crossFade()
                    .into(mImageView);
        

        @Override
        public void onCancelled(DatabaseError databaseError) 

        
    );

图片加载器类直接复制自firebaseUI的github页面: FirebaseImageLoader from FirebaseUI

我在想,在开始将它们放入我的图像视图的过程之前,我可能需要缓冲多个图像。

有没有更好的建议。从长远来看,我想通过静止图像“模拟视频流”。这些图像或多或少是实时图像。也许使用 firebase 数据库和 firebase 存储的整个方法是错误的。如果您有更好的建议,我会很高兴听到。

作为我想补充的附加信息,图像视图位于片段中。我也已经尝试省略交叉淡入淡出功能,也使用了 dontAnimate() 和 dontTransform(),但都没有任何改进。

【问题讨论】:

【参考方案1】:

找到了解决办法: 我正在使用资源就绪和 SimpleTarget。下载路径缓冲在 ArrayList 中。

值监听器如下所示。

  mFirebaseDatabase.child("state").child("recentPicture").addValueEventListener(new ValueEventListener() 
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) 
            Log.d("Picture Update:",dataSnapshot.toString());
            String imgPath = dataSnapshot.getValue(String.class);
            if (imgPath!= null) mPictures.add(imgPath);
            if (mPictures.size()==1)
                mStorageRef = FirebaseStorage.getInstance().getReference().child(imgPath);
                Glide.with(getContext())
                        .using(new FirebaseImageLoader())
                        .load(mStorageRef)
                        .asBitmap()
                        .fitCenter()
                        .into(target);
            
        

        @Override
        public void onCancelled(DatabaseError databaseError) 

        
    );

这样的简单目标:

    private SimpleTarget target = new SimpleTarget<Bitmap>() 

    @Override
    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) 
        mImageView.setImageBitmap(resource);

        if(mPictures.size()>=1)
            String imgPath = mPictures.get(0);
            Log.d("Printing picture:",imgPath);
            mPictures.remove(0);
            mStorageRef = FirebaseStorage.getInstance().getReference().child(imgPath);
            Glide.with(getContext())
                    .using(new FirebaseImageLoader())
                    .load(mStorageRef)
                    .asBitmap()
                    .fitCenter()
                    .into(target);
        

    
;

并且图像路径存储在私有字段中:

    private ArrayList<String> mPictures = new ArrayList<>();

【讨论】:

以上是关于Android Glide 和 Firebase 存储:将连续图像从 Firebase 存储加载到 Imageview - 闪烁的主要内容,如果未能解决你的问题,请参考以下文章

在最新的 Firebase 版本 (10.2.4) 中使用 Glide 和 FirebaseUI 加载图像

如何使用 Firebase 中的 Glide 仅加载部分图像?

从Firebase下载并解析XML文件

Android 【手撕Glide】--Glide缓存机制(面试)

Android实战——Glide的使用,加载图片只要一句话

Android之Glide获取图片Path和Glide获取图片Bitmap