使用 Glide 在 GridView 中显示图像

Question

如何在 GridView 中使用 Glide 图片加载？我的卡片 class 带有图像 URL、名称和描述。我想在 GridView 中显示它。在文档中写着：

Glide.with(fragment)
    .load(myUrl)
    .into(imageView);

但是如果我实际上不知道我将拥有多少图像视图，我怎么能在这里定义 imageView 呢？

下面是我的布局和片段class。

fragment_collection.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.ui.collection.CollectionFragment">

    <LinearLayout
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        android:layout_margin="15dp"
        android:orientation = "vertical">
        <GridView
            android:id = "@+id/grid_cards"
            android:layout_width = "wrap_content"
            android:layout_height = "match_parent"
            android:columnWidth="120dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:stretchMode="columnWidth"
            android:gravity="center"
            android:divider = "#000"
            android:dividerHeight = "1dp"
            android:footerDividersEnabled = "false"
            android:headerDividersEnabled = "false"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

fragment_card.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/android_list_view_tutorial_with_example"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="7dp">

    <ImageView
        android:id="@+id/image_card"
        android:layout_width="100dp"
        android:layout_height="200dp"
        android:contentDescription="@string/app_name"
        android:padding="10dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="7dp">

        <TextView
            android:id="@+id/text_card_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/text_card_short_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="5dp"
            android:textSize="12sp" />
    </LinearLayout>
</LinearLayout>

CollectionFragment.kt

class CollectionFragment : Fragment() {

    private lateinit var collectionViewModel: CollectionViewModel

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        collectionViewModel =
            ViewModelProvider(this).get(CollectionViewModel::class.java)
        val root = inflater.inflate(R.layout.fragment_collection, container, false)

        var imageCard = mutableListOf<String>()
        var cardName = mutableListOf<String>()
        var cardShortDescription = mutableListOf<String>()
        collectionViewModel.getCards().observe(viewLifecycleOwner, Observer {
            for (card in it) {
                imageCard.add(card.url)
                cardName.add(card.name)
                cardShortDescription.add(card.description)
            }
        })

        val images: MutableList<HashMap<String, String?>> = ArrayList()

        for (i in 0..7) {
            val map = HashMap<String, String?>()
            map["image_card"] = imageCard[i].toString()
            map["text_card_name"] = cardName[i]
            map["text_card_short_description"] = cardShortDescription[i]
            images.add(map)
        }

        val from = arrayOf("image_card", "text_card_name", "text_card_short_description")
        val to = intArrayOf(
            R.id.image_card,
            R.id.text_card_name,
            R.id.text_card_short_description
        )

        val simpleAdapter =
            SimpleAdapter(this.context, images, R.layout.fragment_card, from, to)
        val androidListView: GridView = root.findViewById(R.id.grid_cards) as GridView
        androidListView.adapter = simpleAdapter
        return root
    }
}

Answer 1

如果有人想寻找使用 Glide 将图像和一些文本传递到 GridView 的适配器的示例，这就是我根据此 link https://www.homeandlearn.co.uk/android/grid_view_custom_adapter.html 中的教程得出的。

class CardAdapter constructor(private val context: Context, private val images: MutableList<HashMap<String, String?>>) :  BaseAdapter() {

    override fun getCount(): Int {
        return images.size
    }

    override fun getItem(position: Int): Any {
        return images[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        var view = convertView

        if(view == null) {
            val layoutInflater = LayoutInflater.from(context)
            view = layoutInflater.inflate(R.layout.fragment_card, parent, false)
        }

        val card = view!!.findViewById<ImageView>(R.id.image_card)
        val name : TextView = view.findViewById(R.id.text_card_name)
        val description : TextView = view.findViewById(R.id.text_card_short_description)

        Glide.with(context)
            .load(images[position]["image_card"])
            .into(card)

        name.text = images[position]["text_card_name"]
        description.text = images[position]["text_card_short_description"]

        return view
    }

}

使用 Glide 在 GridView 中显示图像

Display images in GridView with Glide

android

kotlin

android-glide