从 firebase 实时数据库中检索图像并使用 picasso 在图像滑块中显示

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" 

Answer 1

该方案实现了viewflipper、picasso和firebase数据库；

如果要实现简单的图像滑块（幻灯片），那么您可以使用viewflipper。

I）首先你可以使用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); 

III) 实现图像幻灯片动画的viewflipper：

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

祝你好运！