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

Question

在我的Android应用程序中，我想在firebase relatime数据库的图像加载期间在每个图像上添加进度条。一旦图像加载成功，我需要使进度条不可见。

请帮助代码。

我开发了Android代码，使用recyclerview和卡片视图从Firebase实时数据库中获取图像和文本。

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：在viewholder内的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

您应该使用进度条的可见性属性。首先将您的进度条添加到布局并使其可见性为“Visibility.GONE”。然后，当您开始下载时，可见性“Visibility.VISIBLE”。完成下载后，可以看到'Visibility.GONE'。

Answer 3

您可以使用Picasso Callback来实现此目的。在布局中的图像上添加进度条，然后修改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);
     }
   });
}