如何在 Android 中實時檢索 Firebase 中的圖像？

Question

我有這個代碼只檢索一個圖像。 我如何編輯它以檢索更多圖像？

以及如何將 URL 與圖像附加在一起，以便如果用戶單擊圖像 URL 將打開？

public class MainActivity extends AppCompatActivity {
    
    ImageView rImage;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        rImage = findViewById(R.id.rImage);

        FirebaseDatabase firebaseDatabase = FirebaseDatabase.getInstance();

        DatabaseReference databaseReference = firebaseDatabase.getReference();

        DatabaseReference getImage = databaseReference.child("image");

        getImage.addListenerForSingleValueEvent(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
                
                String link = dataSnapshot.getValue(String.class);

                Picasso.get().load(link).into(rImage);
            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
                // we are showing that error message in toast
                Toast.makeText(MainActivity.this, "Error Loading Image", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

這是 XML 代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- we are using ImageView for displaying image-->
    <ImageView
        android:id="@+id/rImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" />

</LinearLayout>

Answer 1

首先在xml中添加一個按鈕。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- we are using ImageView for displaying image-->
    <ImageView
        android:id="@+id/rImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" />
<Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</LinearLayout>

現在通過該按鈕onclick您將獲得您的圖像。

public class MainActivity extends AppCompatActivity {
    
    ImageView rImage;
    Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        rImage = findViewById(R.id.rImage);
        //button reference
        btn= findViewById(R.id.btn);
        FirebaseDatabase firebaseDatabase = FirebaseDatabase.getInstance();

        DatabaseReference databaseReference = firebaseDatabase.getReference();

        DatabaseReference getImage = databaseReference.child("image");
        
        //setting onclick.
        btn.setOnClickListener(v -> {
             getImage.addListenerForSingleValueEvent(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
                
                String link = dataSnapshot.getValue(String.class);

                Picasso.get().load(link).into(rImage);
            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
                // we are showing that error message in toast
                Toast.makeText(MainActivity.this, "Error Loading Image", Toast.LENGTH_SHORT).show();
            }
        });
        });
       
    }
}

Answer 2

也許您可以嘗試將ImageView更改為ImageButton ，這樣您就可以擁有 ClickListener 和圖像