如何定制化 ListView 界面

昨天 745阅读

😄作者简介：小曾同学.com,一个致力于测试开发的博主⛽️，主要职责：测试开发、CI/CD

如果文章知识点有错误的地方，还请大家指正，让我们一起学习，一起进步。

😊 座右铭：不想当开发的测试，不是一个好测试✌️。

如果感觉博主的文章还不错的话，还请点赞、评论、收藏哦！👍

在上一篇文章中，我们介绍了 ListView的简单使用，只是简单的展示一段文本，现在我们开始对 ListView 界面进行定制。和网上其他案例类似，也是以水果图片为例，但本篇文章更加详细。

主要代码文件：

MainActivity 我们定义为 DIYListViewActivity，对应的 layout 布局文件为 activity_diylist_view.xml;
Fruit 实体类：用于描述水果的属性信息，对应的 layput 布局文件为 fruit_item.xml
FruitAdapter：自定义适配器

因为适配器是连接数据和视图的桥梁，视图是 ListView、而水果数据是数据，我们先定义一个实体类 Fruit ，作为 ListView 适配器的适配类型。

Fruit 类中有两个字段：
- name：水果名字
- imageId ：水果图片id
```
class Fruit(val name:String,val imageId:Int)
```
  在 ListView 文章中，ListView 的子项是一段文本，我们采用的是 Android 内置的布局文件，而我们定制化 ListView 界面的话，在本篇文章中 ListView 的子项水果数据，所以我们要新增一个布局文件，用于水果数据的具体展示（fruit_item.xml）。
```
    
    
```
  我们还需要自定义一个适配器 FruitAdapter ，用于在 ListView 中显示水鬼，这个适配器继承 ArrayAdapter，并将范型指定为 Fruit 类，（范型：允许我们编写可以处理多种类型的代码，而不需要为每种类型编写重复的代码）
  
  自定义适配器方法：继承现有适配器的实现类，例如 ArrayAdapter，重写 getView() 方法,在 getView() 方法中，创建一个 itemView，它是每个列表项的根视图。然后，我们通过调用 findViewById 来获取到自定义布局中的 ImageView、TextView 控件，然后，从数据源中获取对应位置的水果对象，并将水果对象的图片和名称设置给对应的视图控件，最后，返回 itemView。
```
class FruitAdapter (activity: Activity,val resourceId: Int,data:List):ArrayAdapter(activity,resourceId,data) {
    override fun getView(position: Int,convertView: View?,parent:ViewGroup):View{
        val view = LayoutInflater.from(context).inflate(resourceId,parent,false)
        val fruitImage:ImageView = view.findViewById(R.id.fruitImage)
        val fruitName:TextView = view.findViewById(R.id.fruitName)
        val fruit = getItem(position) //获取当前项的Fruit实例
        if(fruit != null){
            fruitImage.setImageResource(fruit.imageId)
            fruitName.text = fruit.name
        }
        return  view
    }
}
```
  详解：
  1. FruitAdapter 定义了一个主构造函数，用于将 Activity 的实例，ListView子项布局和 id 和数据源传递进来。
```
class FruitAdapter (activity: Activity,val resourceId: Int,data:List):ArrayAdapter(activity,resourceId,data) 
```
  - activity: Activity 是构造函数的参数，表示当前的Activity
  - val resourceId: Int 是构造函数的参数，表示列表项的布局资源 id
  - data:List 是构造函数的参数，闭表示要显示的水果数据列表
    
    这里说的构造函数是 FruitAdapter 类的构造函数，在构造函数中，activity: Activity 参数用于接收传入的 Activity 对象，并将其传递给父类 ArrayAdapter 的构造函数。通过这种方式，FruitAdapter 类可以使用传入的 Activity 对象来执行一些与 UI 相关的操作，例如使用 LayoutInflater 创建视图、获取资源等。
    1. 重写 getView() 方法，用于获取指定位置上的列表项的视图。
```
override fun getView(position: Int,convertView: View?,parent:ViewGroup):View{
    val view = LayoutInflater.from(context).inflate(resourceId,parent,false)
    val fruitImage:ImageView = view.findViewById(R.id.fruitImage)
    val fruitName:TextView = view.findViewById(R.id.fruitName)
    val fruit = getItem(position) //获取当前项的Fruit实例
    if(fruit != null){
        fruitImage.setImageResource(fruit.imageId)
        fruitName.text = fruit.name
    }
```
    - LayoutInflater.from(context) 创建 LayoutInflater 对象，用于将布局资源转换为视图；
    - inflate(resourceId,parent,false) 从指定的布局资源 ID 创建视图，parent 是父视图，false 表示不将视图附加到父视图上，即只让在父布局中声明的 layput 属性生效。
    - view.findViewById() 获取视图中的 fruitImage、fruitName
    - getItem(position) 方法从数据源中获取指定位置的水果对象，即获取当前项的 Fruit 实例。
      if(fruit != null) 如果水果对象不为空，调用 setImageResource() 和 setText() 方法设置显示的图片和文字
      1. 最后，返回设置好数据的视图 return view 。
      好了，自定义适配器我们已经准备好了，接下来，我们写MainActivity中的逻辑代码
```
class DIYListViewActivity : AppCompatActivity() {
    private val fruitList = ArrayList()
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_diylist_view)
        initFruits() //初始化水果数据
        var listView: ListView = findViewById(R.id.listView)
        val adapter = FruitAdapter(this,R.layout.fruit_item,fruitList)
        listView.adapter = adapter
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.listView)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    }
    // 初始化水果数据，
    private fun initFruits() {
        repeat(10){
            fruitList.add(Fruit("apple", R.drawable.apple_pic))
            fruitList.add(Fruit("banana", R.drawable.banana_pic))
        }
    }
}
// repeat函数是kotlin中常用标准函数，
```
      Demo 展示
      
      
      至此，定制化 ListView 界面我们已经完成啦，赶快动手实践下吧。

VPS购买请点击我

如何定制化 ListView 界面

相关阅读

Mac可以读取NTFS吗 Mac NTFS软件哪个好 mac ntfs读写工具免费

【Linux】服务器被work32病毒入侵CPU占用99%

如何定制化 ListView 界面

Leetcdoe-Day20-代码随想录-栈与队列-239-347

目录[+]