Firebase 实时数据库 - 如何在图像视图上显示进度条，直到图像加载并在图像成功加载后消失

Question

在我的安卓应用程序中，我想在从Firebase relatime数据库加载图像期间，在每张图片上添加进度条。图像加载成功后，我需要使进度条不可见。

请帮助编写代码。

我开发了Android代码，使用回收器视图和卡片视图从Firebase relatime数据库中获取图像和文本。

.XML：

<ImageView
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:scaleType="centerCrop"
            android:id="@+id/post_image" />
        <ProgressBar
            android:layout_width="match_parent"
            android:layout_height="75dp"
            android:layout_marginTop="60dp"/>

主要活动.java

public class MainActivity extends AppCompatActivity {
    private RecyclerView mBloglist;
    private DatabaseReference mDatabase;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDatabase = FirebaseDatabase.getInstance().getReference().child("Industries");
        mDatabase.keepSynced(true);
        mBloglist = (RecyclerView)findViewById(R.id.myrecycleview);
        mBloglist.setHasFixedSize(true);
        mBloglist.setLayoutManager(new LinearLayoutManager(this));
    }
    @Override
    protected void onStart() {
        super.onStart();
        FirebaseRecyclerAdapter<Industry, BlogViewHolder> firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<Industry, BlogViewHolder>
                (Industry.class, R.layout.blog_row, BlogViewHolder.class, mDatabase) {
            @Override
            protected void populateViewHolder(BlogViewHolder viewHolder, Industry model, int position) {
                viewHolder.setTitle(model.getIndustryName());
                viewHolder.setDesc(model.getIndustryDesc());
                viewHolder.setImage(getApplicationContext(),model.getIndustryImage());
            }
        };
        mBloglist.setAdapter(firebaseRecyclerAdapter);
    }
    public static class BlogViewHolder extends RecyclerView.ViewHolder
    {
        View mView;
        public BlogViewHolder(View itemView)
        {
            super(itemView);
            mView=itemView;
        }
        public void setTitle(String title)
        {
            TextView post_title = (TextView)mView.findViewById(R.id.post_title);
            post_title.setText(title);
        }
        public void setDesc(String desc)
        {
            TextView post_desc = (TextView)mView.findViewById(R.id.post_desc);
            post_desc.setText(desc);
        }
        public void setImage(Context ctx, String image)
        {
           ImageView post_Image = (ImageView)mView.findViewById(R.id.post_image);
            Picasso.with(ctx).load(image).into(post_Image);
        }
    }
}

Answer 1

试试这个，不确定这是否有效。

1. 在 XML 格式的进度栏中添加一个 ID。对于一个实例，假设它的 ID 是 PROGRESSBar。

解决方案 1：使进度条全局并在 onCreate 方法中创建其实例。

 FirebaseRecyclerAdapter<Industry, BlogViewHolder> firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<Industry, BlogViewHolder>
            (Industry.class, R.layout.blog_row, BlogViewHolder.class, mDatabase) {
        @Override
        protected void populateViewHolder(BlogViewHolder viewHolder, Industry model, int position) {
            mProgressbar.show();
            viewHolder.setTitle(model.getIndustryName());
            viewHolder.setDesc(model.getIndustryDesc());
            viewHolder.setImage(getApplicationContext(),model.getIndustryImage());
            mProgressBar.dismiss();
        }
    };
    mBloglist.setAdapter(firebaseRecyclerAdapter);

解决方案 2：在BlogViewHolder中声明进度条 内部视图

public void setImage(Context ctx, String image)
    {
       mProgressbar.show();
       ImageView post_Image = (ImageView)mView.findViewById(R.id.post_image);
       Picasso.with(ctx).load(image).into(post_Image);
       mProgressbar.dismiss();
    }

Answer 2

您应该使用进度条的可见性属性。首先，将您的进度条添加到布局中，并使其可见性为"可见性.GONE"。然后，当您开始下载时，使可见性设置为"可见性.可见"。完成下载后，使可见性"可见性.GONE"。

Answer 3

您可以使用毕加索回调来实现此目的。在布局中的图像上添加进度条，然后修改setImage功能

public void setImage(Context ctx, String image)
{
   ProgressBar mProgress = (ProgressBar) mView.findViewById(R.id.imageProgress);
   mProgress.show();
   ImageView post_Image =(ImageView)mView.findViewById(R.id.post_image);
   Picasso.with(ctx).load(image).into(post_Image, new com.squareup.picasso.Callback() {
     @Override
     public void onSuccess() {
       //Image loaded successfully, now dismiss progress bar.
       mProgress.dismiss();
     }
     @Override
     public void onError() {
       //Image Not Loaded properly
       Picasso.with(ctx).load(errorImage).into(post_Image);
     }
   });
}