资讯动态

第一行代码--初步学习--UI开发--ListView

发布时间:2026/8/18 15:11:58 来源:尧图企业网站定制
ListView绝对可以称得上是Android中最常用的控件之一几乎所有的应用程序都会用到它。由于手机屏幕空间都比较有限能够一次性在屏幕上显示的内容并不多当我们的程序中有大量的数据需要展示的时候就可以借助ListView来实现。ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内同时屏幕上原有的数据则会滚动出屏幕。相信你其实每天都在使用这个控件比如查看手机联系人列表翻阅微博的最新消息等等。核心组成四要素ListView列表容器负责滚动与布局数据集合List/ 数组等存放要展示的数据Item 布局单个列表项的 XML如纯文本、图文Adapter适配器“数据→视图” 的桥梁系统常用ArrayAdapter快速展示纯文本列表SimpleAdapter展示图文混合列表BaseAdapter自定义复杂布局最常用。ListView的简单用法XML布局?xml version1.0 encodingutf-8? androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto xmlns:toolshttp://schemas.android.com/tools android:idid/main android:layout_widthmatch_parent android:layout_heightmatch_parent tools:context.MainActivity ListView android:idid/list_view android:layout_widthmatch_parent android:layout_heightmatch_parent /ListView /androidx.constraintlayout.widget.ConstraintLayoutKtolin代码实现简单的滑动不过数组中的数据是无法直接传递给ListView的我们还需要借助适配器来完成。Android中提供了很多适配器的实现类其中我认为最好用的就是ArrayAdapter。它可以通过泛型来指定要适配的数据类型然后在构造函数中把要适配的数据传入即可。ArrayAdapter有多个构造函数的重载你应该根据实际情况选择最合适的一种。这里由于我们提供的数据都是字符串因此将ArrayAdapter的泛型指定为String然后在ArrayAdapter的构造函数中依次传入当前上下文、ListView子项布局的id以及要适配的数据。package com.example.learning import android.os.Bundle import android.widget.ArrayAdapter import android.widget.ListView import androidx.appcompat.app.AppCompatActivity import com.example.learning.R class MainActivity : AppCompatActivity() { // 数据源 private val data arrayOf( Apple, Banana, Orange, Watermelon, Pear, Grape, Pineapple, Strawberry, Cherry, Mango,1,1,3,4,5,1,1,3,4,5 ) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // 绑定布局这里会自动识别 activity_main setContentView(R.layout.activity_main) // 去掉你那部分报错的 window inset 代码如果不需要边缘到边缘效果 // enableEdgeToEdge() // ViewCompat.setOnApplyWindowInsetsListener(...) 这段暂时注释掉避免干扰 // 初始化 ListView 和 Adapter val listView: ListView findViewById(R.id.list_view) val adapter ArrayAdapter( this, android.R.layout.simple_list_item_1, // 系统自带的单行文本布局 data ) listView.adapter adapter // 可选添加点击事件 // listView.onItemClickListener { _, _, position, _ - // val selected data[position] // // 可以在这里弹出 Toast 或做其他操作 // // Toast.makeText(this, 你点击了: $selected, Toast.LENGTH_SHORT).show() // } } }既然ListView是用于展示大量数据的那我们就应该先将数据提供好。这些数据可以是从网上下载的也可以是从数据库中读取的应该视具体的应用程序场景来决定。定制ListView的界面首先需要准备好一组图片分别对应上面提供的每一种水果待会我们要让这些水果名称的旁边都有一个图样。1.定义实体类作为ListView适配器的适配类型 新建类fruitpackage com.example.learning // data class 自动生成 equals/hashCode/toString适合做列表数据 data class Fruit( val name: String, // 水果名称 val imageRes: Int // 图片资源IDdrawable/mipmap 里的图片 )2.接下来需要创建一个自定义的适配器这个适配器继承自ArrayAdapter并将泛型指定为Fruit类,新建类FruitAdapterpackage com.example.learning import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.BaseAdapter import android.widget.ImageView import android.widget.TextView class FruitAdapter(private val fruitList: ListFruit) : BaseAdapter() { // 返回数据总数 override fun getCount(): Int fruitList.size // 返回当前位置的数据对象 override fun getItem(position: Int): Fruit fruitList[position] // 返回当前位置的ID直接用 position 即可 override fun getItemId(position: Int): Long position.toLong() // 核心创建/复用 View 并绑定数据 override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View { val view: View val holder: ViewHolder // 1. 复用逻辑convertView 为空时才 inflate 新布局 if (convertView null) { view LayoutInflater.from(parent?.context) .inflate(R.layout.list_item, parent, false) holder ViewHolder(view) view.tag holder // 把 holder 存到 view.tag 里下次复用 } else { view convertView holder view.tag as ViewHolder // 从 tag 取出 holder避免 findViewById } // 2. 绑定数据到控件 val fruit fruitList[position] holder.tvName.text fruit.name holder.ivIcon.setImageResource(fruit.imageRes) return view }3.自定义 Item 布局list_item.xml?xml version1.0 encodingutf-8? LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/android android:layout_widthmatch_parent android:layout_heightwrap_content android:orientationhorizontal android:gravitycenter_vertical android:padding12dp !-- 图片 -- ImageView android:idid/ivIcon android:layout_width50dp android:layout_height50dp android:scaleTypecenterCrop/ !-- 文字 -- TextView android:idid/tvName android:layout_widthwrap_content android:layout_heightwrap_content android:textSize18sp android:layout_marginStart16dp/ /LinearLayout4.在MainActivity.kt中使用package com.example.learning import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.ListView class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val listView findViewByIdListView(R.id.listView) // 1. 准备测试数据图片用你自己 drawable 里的资源这里先用默认图标示例 val fruitList listOf( Fruit(苹果, R.mipmap.ic_launcher), Fruit(香蕉, R.mipmap.ic_launcher), Fruit(橙子, R.mipmap.ic_launcher), Fruit(西瓜, R.mipmap.ic_launcher), Fruit(草莓, R.mipmap.ic_launcher), Fruit(芒果, R.mipmap.ic_launcher) ) // 2. 创建适配器并设置给 ListView val adapter FruitAdapter(fruitList) listView.adapter adapter } }BaseAdapter 核心方法方法作用getCount()返回列表数据总数getItem()返回指定位置的数据对象getItemId()返回指定位置的唯一 IDgetView()核心方法创建 / 复用 Item 并绑定数据ListView的点击事件条目整体点击事件最常用在MainActivity里给 ListView 设置// listView 是你布局里的 ListView id listView.onItemClickListener object : AdapterView.OnItemClickListener { override fun onItemClick(parent: AdapterView*?, view: View?, position: Int, id: Long) { val item fruitList[position] Toast.makeText(thisMainActivity, 选中${item.name}, Toast.LENGTH_SHORT).show() }参数解释记住 4 个参数onItemClickListener { parent, view, position, id - }parentListView 本身view被点击的那一行 Item 布局position重点点击条目索引从 0 开始id条目 id条目内部控件点击比如点图片、点文字在FruitAdapter 的 getView里设置override fun getView(...) { // ...复用代码省略... val fruit fruitList[position] holder.tvName.text fruit.name holder.ivIcon.setImageResource(fruit.imageRes) // 单独给图片加点击 holder.ivIcon.setOnClickListener { Toast.makeText(parent?.context, 点击了图片${fruit.name}, Toast.LENGTH_SHORT).show() } // 单独给文字加点击 holder.tvName.setOnClickListener { Toast.makeText(parent?.context, 点击了文字${fruit.name}, Toast.LENGTH_SHORT).show() } return view }

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价