我无法将从 Firebase 检索到的图像加载到 viewpager

Question

我已经使用 android 应用程序将一些图像上传到 Firebase 存储，现在我希望能够在同一个应用程序的 ViewPager 中显示这些图像。 我遵循了一个教程，他们在 RecycleView 中做了同样的事情，并尝试在我的代码中应用同样的事情。 现在我运行代码时似乎没有错误，但是我无法查看 imageView 中的图像。 我需要 ViewPagerAdapter 代码方面的帮助，实例化方法中缺少某些内容，我不知道它是什么。

这是我的活动代码：

public class menuSliderActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TextView textView;
    private DatabaseReference mDatabaseRef;
    List<SliderUtils> sliderImg;
    ViewPagerAdapter viewPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menu_slider);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        textView = (TextView) findViewById(R.id.textView);
        sliderImg = new ArrayList<>();
        mDatabaseRef= FirebaseDatabase.getInstance().getReference("Images");
        mDatabaseRef.addValueEventListener(new ValueEventListener() {

        @Override
        public void onDataChange( DataSnapshot dataSnapshot) {
            for(DataSnapshot postSnapshot : dataSnapshot.getChildren()){
                SliderUtils sliderUtils = postSnapshot.getValue(SliderUtils.class);
                sliderImg.add(sliderUtils);
            }

            viewPagerAdapter = new ViewPagerAdapter(sliderImg, menuSliderActivity.this);
            viewPager.setAdapter(viewPagerAdapter);
       }

       @Override
       public void onCancelled( DatabaseError databaseError) {
           Toast.makeText(menuSliderActivity.this, databaseError.getMessage(), Toast.LENGTH_SHORT).show();

       }
   });



    Timer timer = new Timer();
    timer.scheduleAtFixedRate(new MyTimerTask(),2000,2000);}

public class MyTimerTask extends TimerTask{
    @Override
    public void run() {
        menuSliderActivity.this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if(viewPager.getCurrentItem()==0){
                    viewPager.setCurrentItem(1);
                } else if (viewPager.getCurrentItem()==1){
                    viewPager.setCurrentItem(2);
                } else {
                    viewPager.setCurrentItem(0);
                }
            }
        });
    }


}

}

这是我需要帮助的 ViewPager 的适配器代码：

public class ViewPagerAdapter extends PagerAdapter {

    private Context context;
    private LayoutInflater layoutInflater;
    private List<SliderUtils> sliderImg;
    private ImageLoader imageLoader;
    private DatabaseReference mDatabaseRef;
    private ViewPager viewPager;
    private ImageView imageView;

    public ViewPagerAdapter(List<SliderUtils> sliderImg, Context context){

        this.sliderImg = sliderImg;
        this.context = context;
}


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

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

    @Override
    public Object instantiateItem( ViewGroup container, int position) {
        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater.inflate(R.layout.custom_layout, null);
        SliderUtils utils = sliderImg.get(position);
        ImageView imageView =  view.findViewById(R.id.imageView);
        //ADDED THIS HERE.                  
        Glide.with(context).load(utils.getImageUrl()).into(imageView);
        container.addView(view);
        return view;
}

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

}

我仍然无法将图像加载到我的 viewpager 中，我得到了一个我确定的工作 url，但图像没有被删除，我只能看到我设置的 viewpager 的背景。

Answer 1

您可以使用Glide 加载图像。现在，您没有将图像加载到 image view 这就是为什么它在这里不起作用的原因是代码......

  @Override
public Object instantiateItem( ViewGroup container, int position) {
    layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = layoutInflater.inflate(R.layout.custom_layout, container, false);
    SliderUtils utils = sliderImg.get(position);
    ImageView imageView =  view.findViewById(R.id.imageView);

    // FIXED USING THIS
    Glide.with(context).load(**utils.getImageUrl**).into(imageView);
    container.addView(view);
    return view;
     }

编辑

另外，您需要将依赖项添加到您的 gradle 文件中

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.9.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

Answer 2

我在没有滑行的情况下完成了它，并使用了图像字节而不是 URL（图像也在 FirebaseStorage 上存储为字节）。 在构造函数中，我传递了包含图像在 Firebase 存储中的路径的 ArrayList。

// Constructor    
public ViewPageAdapter(Context context, ArrayList<String> images) {
        this.context = context;
        this.images = images;
        mLayoutInFlater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

这是我从 Firebase 调用图像的 instantiateItem() 并在收到成功后将位图设置为 imageView

public Object instantiateItem(@NonNull ViewGroup container, int position) {

    //Inflating the image in XML
    View itemView = mLayoutInFlater.inflate(R.layout.pager_image_item, container, false);
    //Referencing to ImageView
    ImageView imageView = itemView.findViewById(R.id.pagerImageViewMain);
    //Get Image from Firebase
    StorageReference photoReference= storageReference.child(String.valueOf(images.get(position)));
    Log.d("TAGS", images.get(position));
    photoReference.getBytes(ONE_MEGABYTE).addOnSuccessListener(new OnSuccessListener<byte[]>() {
        @Override
        public void onSuccess(byte[] bytes) {
            Log.d("TAGS", "Got image :" + position);
            //Set Bitmap Image to View
            Bitmap bitmap = BitmapFactory.decodeByteArray(bytes,0, bytes.length);
            imageView.setImageBitmap(bitmap);
            
        }

    }).addOnFailureListener(new OnFailureListener() {
        @Override
        public void onFailure(@NonNull Exception e) {
            Toast.makeText(context.getApplicationContext(), e.toString(), Toast.LENGTH_SHORT).show();
        }
    });

    //Adding the View
    Objects.requireNonNull(container).addView(itemView);
    return itemView;
}

这是我在 StackOverflow 上的第一个答案，希望对某人有所帮助