android - 使用 Glide 在 GridView 中显示图像
问题描述
如何在 GridView 中使用 Glide 图像加载?我有带有图像 URL、名称和描述的 Card 类。我想在 GridView 中显示它。在文档中是这样写的:
Glide.with(fragment)
.load(myUrl)
.into(imageView);
但是,如果我实际上不知道我将拥有多少图像视图,我该如何在这里定义 imageView?
下面是我的布局和片段类。
片段集合.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>
片段卡片.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>
集合片段.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
}
}
解决方案
如果有人会寻找使用 Glide 将图像和一些文本传递到 GridView 的适配器示例,这就是我根据此链接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
}
}
推荐阅读
- amazon-web-services - aws sqs 消息始终消失
- javascript - 如何打开另一个窗口或选项卡并在该窗口中触发一些特定查询并在执行后关闭该窗口
- c++ - 使用具有大量自定义依赖项的静态库 (C++)
- typescript - 如何从 Typescript 中的箭头函数访问另一个函数变量
- python - 附加两个具有多个字典 Python 的列表
- c# - Windows 窗体中的菜单条没有快速属性
- python - 返回“JsonResponse”时为ajax请求设置cookies
- r - 如何创建删除最后一个输入/行的操作按钮(通过单击输入),但能够继续在 R 中输入数据闪亮
- c# - 如何将多个元素添加到包装面板?
- python - Python如何通过知道列表中列表的第一个元素来获取列表中列表的索引?