如何将图片从url加载到viewpager2中? [英] How to load images from url into viewpager2?

问题描述

我在我的应用程序中使用ViewPager2来显示一些图像，当我使用可绘制图像时，它运行良好，但是当我尝试从链接中加载图像时，它显示错误.我是新手，所以请帮助我如何从url加载它们.

I'm using ViewPager2 in my app to show some images it worked well when I used images from drawable but when i try to load images from links it shows error. I'm new to this so please help me how to load them from url.

在适配器类上将错误抛出为items.size();指null.

It throws error at the adapter class as items.size(); refers to null.

物品类别

public class ImageSlider1_Item {

    private String imageURL;

    public ImageSlider1_Item(String imageURL){
        this.imageURL = imageURL;
    }

    public String getImageURL (){
        return imageURL;
    }
}

适配器类

public class ImageSlider1_Adapter extends RecyclerView.Adapter<ImageSlider1_Adapter.ImageSlider1_ViewHolder>{

    private List<ImageSlider1_Item> items;
    private ViewPager2 viewPager2;

   public ImageSlider1_Adapter(List<ImageSlider1_Item> items, ViewPager2 viewPager2) {
        this.items = items;
        this.viewPager2 = viewPager2;
    }

    @NonNull
    @Override
    public ImageSlider1_ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new ImageSlider1_ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.image_slider_layout, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull ImageSlider1_ViewHolder holder, int position) {

        holder.setImageView(items.get(position));
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    class ImageSlider1_ViewHolder extends RecyclerView.ViewHolder{

        private RoundedImageView imageView;

        ImageSlider1_ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageSlide);
        }

        void setImageView(ImageSlider1_Item slider1Item){
            Glide.with(itemView.getContext())
                    .load(slider1Item.getImageURL())
                    .into(imageView);
        }
    }

}

主要活动

FirebaseFirestore firebaseFirestore = FirebaseFirestore.getInstance();
         firebaseFirestore.collection("Image Sliders").document("Whats New").get()
                 .addOnSuccessListener(documentSnapshot -> {
                     slider1_items = new ArrayList<>();
                     slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image1")));
                     slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image2")));
                     slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image3")));
                     slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image4")));
                     slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image5")));
                 });
       ViewPager2 viewPager2 = view.findViewById(R.id.imageSlider_1);
       viewPager2.setAdapter(new ImageSlider1_Adapter(slider1_items, viewPager2));

       viewPager2.setClipToPadding(false);
       viewPager2.setClipChildren(false);
       viewPager2.setOffscreenPageLimit(3);
       viewPager2.getChildAt(0).setOverScrollMode(RecyclerView.OVER_SCROLL_NEVER);
       CompositePageTransformer compositePageTransformer = new CompositePageTransformer();
       compositePageTransformer.addTransformer(new MarginPageTransformer(40));
       viewPager2.setPageTransformer(compositePageTransformer);

推荐答案

首先更改适配器，如下所示:

1st change your adapter like this :

public class ImageSlider1_Adapter extends RecyclerView.Adapter<ImageSlider1_Adapter.ImageSlider1_ViewHolder>{

private List<ImageSlider1_Item> items;
private Context context;

public ImageSlider1_Adapter(List<ImageSlider1_Item> items) {
    this.items = items;
}

public void setItems(List<ImageSlider1_Item> items) {
    this.items = items;
}


@NonNull
@Override
public ImageSlider1_ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    context = parent.getContext();
    return new ImageSlider1_ViewHolder(LayoutInflater.from(context).inflate(R.layout.image_slider_layout, parent, false));
}

@Override
public void onBindViewHolder(@NonNull ImageSlider1_ViewHolder holder, int position) {

    holder.setImageView(items.get(position));
}

@Override
public int getItemCount() {
    return items.size();
}

class ImageSlider1_ViewHolder extends RecyclerView.ViewHolder{

    private RoundedImageView imageView;

    ImageSlider1_ViewHolder(@NonNull View itemView) {
        super(itemView);
        imageView = itemView.findViewById(R.id.imageSlide);
    }

    void setImageView(ImageSlider1_Item slider1Item){
       //custom settings for fast loading image
       RequestOptions options = new RequestOptions()
            .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
            .centerCrop()
            .priority(Priority.HIGH)
            .format(DecodeFormat.PREFER_RGB_565);

       Glide.with(context)
            .applyDefaultRequestOptions(options)
            .load(slider1Item.getImageURL())
            .thumbnail(0.4f)
            .into(imageView);
    }
}

}

接下来的活动

//1st initialize list & adapter
 private List<ImageSlider1_Item> slider1_items = new ArrayList<>();
 private ImageSlider1_Adapter adapter;


 //2sd initialize views
  ViewPager2 viewPager2 = view.findViewById(R.id.imageSlider_1);
   viewPager2.setClipToPadding(false);
   viewPager2.setClipChildren(false);
   viewPager2.setOffscreenPageLimit(3);
   viewPager2.getChildAt(0).setOverScrollMode(RecyclerView.OVER_SCROLL_NEVER);
   CompositePageTransformer compositePageTransformer = new CompositePageTransformer();
   compositePageTransformer.addTransformer(new MarginPageTransformer(40));
   viewPager2.setPageTransformer(compositePageTransformer);

   //3d remove ViewPager2 from adapter constructor -  no need for that
   //and initialize new adapter without viewPager2

   adapter = new ImageSlider1_Adapter(slider1_items);

   //next set adapter to ViewPager2
   viewPager2.setAdapter(adapter);


   FirebaseFirestore firebaseFirestore = FirebaseFirestore.getInstance();
     firebaseFirestore.collection("Image Sliders").document("Whats New").get()
             .addOnSuccessListener(documentSnapshot -> {
                 slider1_items.clear();
                 slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image1")));
                 slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image2")));
                 slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image3")));
                 slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image4")));
                 slider1_items.add(new ImageSlider1_Item(documentSnapshot.getString("Image5")));
                 //next setList to adapter
                 adapter.setItems(slider1_items);
                 adapter.notifyDataSetChanged();

             });

这篇关于如何将图片从url加载到viewpager2中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！