Firebase Realtime DB-如何在图像视图上显示进度条,直到图像加载并成功加载图像后消失?

时间:2019-03-31 08:12:21

标签: android firebase firebase-realtime-database android-progressbar firebaseui

在我的Android应用中,我想在从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);

        }
    }
}

3 个答案:

答案 0 :(得分:0)

尝试一下,不确定是否可行。

  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();
    }

答案 1 :(得分:0)

您可以为此使用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);
     }
   });
}

答案 2 :(得分:0)

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