使用Picasso从Firebase实时数据库检索图像并在图像幻灯片中显示

Question

我尝试从Firebase实时数据库中检索图像，并使用Picasso将这些图像作为图像滑块（幻灯片）显示回来。但是，这只允许我检索存储在Firebase中的最后一个图像。非常感谢您的任何帮助！

enter code here
public void update(View view) {

        DatabaseReference mDatabaseRef = FirebaseDatabase.getInstance().getReference().child("uploads");
        mDatabaseRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot snapshot) {

                // TODO Auto-generated method stub
                if(snapshot.exists()) {
                    for(DataSnapshot s:snapshot.getChildren()) {
                        //For Image1

                        StringBuilder img1=new StringBuilder();
                        Upload t = s.getValue(Upload.class);
                        img1.append(t.getImageUrl());
                        image1.setText(img1.toString());
                        String image1url=image1.getText().toString();
                        Picasso.get().load(image1url).into(imageView1);

                        StringBuilder img2=new StringBuilder();
                        Upload a = s.getValue(Upload.class);
                        img2.append(a.getImageUrl());
                        image2.setText(img1.toString());
                        String image2url=image2.getText().toString();
                        Picasso.get().load(image2url).into(imageView2);
}

这是我的数据库结构

Firebase-root
       |
       --- uploads
             |
             --- LZ6KO5TaHGaIthbhbnj
             |     |
                   --- imageUrl1: "https://..."
             |     |
                   --- name: "firstpic" 
             |
             --- LZ6NKm-zZg5EW1hvhvh
                   |
                   --- imageUrl2: "https://..."
                   |
                   --- name: "secondpic" 

- CoderGirl94

---

请添加您的数据库结构。 - Alex Mamo

@AlexMamo 已添加 - CoderGirl94

@AlexMamo 另外，FYI Upload.class 只是一个具有名称和 imgURLs 的 getter 和 setter 的对象。 - CoderGirl94

你想要第一个LZ6KO5TaHGaIthbhbnj显示在第一行的TextVIew/ImageView中，第二个LZ6NKm-zZg5EW1hvhvh显示在第二行的TextVIew/ImageView中，对吗？只有两项？ - Alex Mamo

Answer 1

这个解决方案实现了viewflipper、picasso和firebase数据库；如果要实现简单的图片滑动幻灯片，您可以使用viewflipper。

一）首先，您可以使用firebase数据库访问所有imageUrl，如下所示：

databaseReference.child("uploads")
            .addListenerForSingleValueEvent(new ValueEventListener() {
                @Override
                public void onDataChange(DataSnapshot dataSnapshot) {
                    if (dataSnapshot.exists()) {
                        slideLists.clear();    //slideLists is an ArrayList
                        for (DataSnapshot snapshot : dataSnapshot.getChildren()) {
                            SlideModel model = snapshot.getValue(SlideModel.class);

                            slideLists.add(model);
                        }
                        Toast.makeText(SlideShowActivity.this, "All data fetched", Toast.LENGTH_SHORT).show();
                        usingFirebaseImages(slideLists);    //this method is for calling viewflipper method
                    } else {
                        Toast.makeText(SlideShowActivity.this, "No images in firebase", Toast.LENGTH_SHORT).show();
                    }
                }

                @Override
                public void onCancelled(DatabaseError databaseError) {
                    Toast.makeText(SlideShowActivity.this, "NO images found \n" + databaseError.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });

II) 其次，通过Picasso将这些图片加载到imageView中：

Picasso.with(SlideShowActivity.this).load(imageUrl).into(imageView); 

三）按以下方式实现用于幻灯片动画的视图翻转器：

    ImageView imageView = new ImageView(this);
    Picasso.with(SlideShowActivity.this).load(imageUrl).into(imageView);

    viewFlipper.addView(imageView);

    viewFlipper.setFlipInterval(2500);
    viewFlipper.setAutoStart(true);

    viewFlipper.startFlipping();
    viewFlipper.setInAnimation(this, android.R.anim.slide_in_left);
    viewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);

最终的完整代码应该如下所示：

A）您的 XML 文件应包含以下内容：

<ViewFlipper
    android:id="@+id/viewFlipper_slide_show"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true" />

B) 你的活动类应包含以下内容：（比如SlideShowActivity.java）

public class SlideShowActivity extends AppCompatActivity {

private ViewFlipper viewFlipper;
private DatabaseReference databaseReference;
private List<SlideModel> slideLists;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_slide_show);

    initialize();

    databaseReference = FirebaseDatabase.getInstance().getReference();
    slideLists = new ArrayList<>();
}

@Override
protected void onStart() {
    super.onStart();
    usingFirebaseDatabase();
}

private void initialize() {
    viewFlipper = findViewById(R.id.viewFlipper_slide_show);
}

private void usingFirebaseDatabase() {
    databaseReference.child("uploads")
            .addListenerForSingleValueEvent(new ValueEventListener() {
                @Override
                public void onDataChange(DataSnapshot dataSnapshot) {
                    if (dataSnapshot.exists()) {
                        slideLists.clear();
                        for (DataSnapshot snapshot : dataSnapshot.getChildren()) {
                            SlideModel model = snapshot.getValue(SlideModel.class);

                            slideLists.add(model);
                        }
                        Toast.makeText(SlideShowActivity.this, "All data fetched", Toast.LENGTH_SHORT).show();
                        usingFirebaseImages(slideLists);
                    } else {
                        Toast.makeText(SlideShowActivity.this, "No images in firebase", Toast.LENGTH_SHORT).show();
                    }
                }

                @Override
                public void onCancelled(DatabaseError databaseError) {
                    Toast.makeText(SlideShowActivity.this, "NO images found \n" + databaseError.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
}

private void usingFirebaseImages(List<SlideModel> slideLists) {
    for (int i = 0; i < slideLists.size(); i++) {
        String downloadImageUrl = slideLists.get(i).getImageUrl();
        flipImages(downloadImageUrl);
    }
}

public void flipImages(String imageUrl) {
    ImageView imageView = new ImageView(this);
    Picasso.with(SlideShowActivity.this).load(imageUrl).into(imageView);

    viewFlipper.addView(imageView);

    viewFlipper.setFlipInterval(2500);
    viewFlipper.setAutoStart(true);

    viewFlipper.startFlipping();
    viewFlipper.setInAnimation(this, android.R.anim.slide_in_left);
    viewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);

}
}

C) 根据您的数据库结构，模型应该是：（比如SlideModel.java）

最初的回答：

public class SlideModel {
private String imageUrl, name;

public SlideModel() {
}

public SlideModel(String imageUrl, String name) {
    this.imageUrl = imageUrl;
    this.name = name;
}

public String getImageUrl() {
    return imageUrl;
}

public void setImageUrl(String imageUrl) {
    this.imageUrl = imageUrl;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}
}

Good luck!

- Ujjwal Jung Thapa

---

我发现你的Firebase数据库结构中，图片URL节点名称不同。请使用相同的名称，例如imageUrl1、imageUrl2，而不是不同的名称。在我的代码中，我假设节点名称为imageUrl。 - Ujjwal Jung Thapa