圆形进度条作为 Glide Placeholder

Question

我正在使用 glide 显示来自服务器的图像。我想显示一个圆形进度条作为占位符。我从尝试过这种方法，但它不起作用。我错过了什么？

我在 activity 中展示了一个 recyclerview。当用户单击 onItem 时，图像会在包含 Viewpager 的片段中打开。我正在使用 glide 在 viewpager 中加载图像。

适配器Class -

public class MyViewPagerAdapter extends PagerAdapter {
private ArrayList<Object> imagesList = new ArrayList<>();
public MyViewPagerAdapter(ArrayList<Object> images) {
    this.imagesList = images;
}

@NonNull
@SuppressLint("ClickableViewAccessibility")
@Override
public Object instantiateItem(@NonNull final ViewGroup container, int position) {
    Object recyclerViewItem = imagesList.get(position);
    final View view = LayoutInflater.from(container.getContext()).inflate(R.layout.util_image_fullscreen_preview, container, false);
    final TouchImageView imageViewPreview = view.findViewById(R.id.image_preview);
   CircularProgressDrawable circularProgressDrawable = 
                new CircularProgressDrawable(container.getContext());
circularProgressDrawable.start();

        Photos image = (Photos) imagesList.get(position);
        GlideApp
            .with(container.getContext())
            .asBitmap()
            .load(advertiser.getUrl())
            .placeholder(circularProgressDrawable)
            .fitCenter().diskCacheStrategy(DiskCacheStrategy.ALL)
            .into(imageViewPreview);


    container.addView(view);
    return view;

}

@Override
public int getCount() {
    return imagesList.size();

}


@Override
public boolean isViewFromObject(View view, Object obj) {
    return view.equals(obj);
}


@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((View) object);
}

}

Answer 1

试试这个方法，

在layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<ProgressBar
    android:id="@+id/progrss"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" />

</RelativeLayout>

现在你在哪里加载图片，

prgress = (ProgressBar)findViewById(R.id.progress);
progress.setVisibility(View.VISIBLE);
Glide.with(mContext)
            .load(imageUrl)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .into(new SimpleTarget<GlideDrawable>() {
                @Override
                public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {

                    progress.setVisibility(View.GONE);    
                    imageViewPriview.setImageDrawable(resource);
                }

                @Override
                public void onLoadFailed(Exception e, Drawable errorDrawable) {
                     progress.setVisibility(View.GONE);
                }
            });

Answer 2

试试这个解决方案

在你的xml.文件中添加进度条

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

</RelativeLayout>

为 Glide

导入 gradle

compile 'com.github.bumptech.glide:glide:3.7.0'

然后

 final ProgressBar progressBar = (ProgressBar) 
     findViewById(R.id.progress);
    progressBar.setVisibility(View.VISIBLE);
       Glide.with(contexthere).load(advertiser.getUrl())
                            .diskCacheStrategy(DiskCacheStrategy.ALL)
                            .into(new SimpleTarget<GlideDrawable>() {
                                @Override
                                public void onResourceReady(GlideDrawable glideDrawable, GlideAnimation<? super GlideDrawable> glideAnimation) {
                                   progressBar.setVisibility(View.GONE);
                                    imageViewPreview.setImageDrawable(glideDrawable);
                                }
                            });

Note :- Pass correct context ie Use getActivity() in fragment class and Use ActivityName.this in activity class

Answer 3

在视图分页器中，您可以在实例化方法中使用以下方法。第一种方法是加载gif图片，第二种方法是简单的带进度条的图片加载。

////  for loading gif images 
RequestOptions requestOptions = new RequestOptions();
        requestOptions.diskCacheStrategy(DiskCacheStrategy.ALL);
        requestOptions.placeholder(R.drawable.itemes_bg);
        requestOptions.error(R.drawable.itemes_bg);


 Glide.with(context).applyDefaultRequestOptions(requestOptions).asGif().load(gifList.get(position)).listener(new RequestListener<GifDrawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<GifDrawable> target, boolean isFirstResource) {
                     
                        Toast.makeText(context, "No Internet Connection...", Toast.LENGTH_SHORT).show();
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(GifDrawable resource, Object model, Target<GifDrawable> target, DataSource dataSource, boolean isFirstResource) {

                        return false;
                    }
                }).into(holder.imageView);

////  for loading simple images

 RequestOptions requestOptions = new RequestOptions();
        requestOptions.diskCacheStrategy(DiskCacheStrategy.ALL);
        requestOptions.placeholder(R.drawable.progress);

        Glide.with(activity).applyDefaultRequestOptions(requestOptions).load(imageList.get(position).getImgUrl().trim()).listener(new RequestListener<Drawable>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                progressBar.setVisibility(View.GONE);
                Toast.makeText(activity, "No Internet Connection", Toast.LENGTH_SHORT).show();
                return false;
            }

            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                progressBar.setVisibility(View.GONE);
                return false;
            }
        }).into(imageView);

请记住，您必须在 xml

中添加以下代码

<ProgressBar
        android:id="@+id/progBar"
        android:padding="150dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />

圆形进度条作为 Glide Placeholder

Circular progress bar as Glide Placeholder

xml

android

android-imageview

progress-bar

android-glide