Android入門教程之ListView的具體使用詳解

更新時(shí)間：2021年10月09日 09:48:20 作者：低吟不作語(yǔ)

列表作為最常用的控件之一，還是有必要好好學(xué)習(xí)的，本章以一個(gè)初學(xué)者的角度來(lái)學(xué)習(xí) ListView，ListView的屬性，以及BaseAdapter簡(jiǎn)單定義，至于ListView優(yōu)化這些，我們一步步來(lái)

ListView 的簡(jiǎn)單用法

在布局中加入 ListView 控件還算簡(jiǎn)單，先為 ListView 指定一個(gè) id，然后將寬度和高度都設(shè)置為 match_parent，這樣 ListView 就占滿了整個(gè)布局的空間

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

接下來(lái)修改 MainActivity 中的代碼

class MainActivity : AppCompatActivity() {

    private val data = listOf("Apple", "Banana", "Orange", "Watermelon",
        "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango",
        "Apple", "Banana", "Orange", "Watermelon", "Pear", "Grape",
        "Pineapple", "Strawberry", "Cherry", "Mango")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data)
        listView.adapter = adapter
    }
}

先將數(shù)據(jù)準(zhǔn)備好，然后借助適配器將數(shù)據(jù)傳遞給 ListView。ArrayAdapter 是 Android 提供的一種適配器的實(shí)現(xiàn)類，可以通過(guò)泛型來(lái)指定要適配的數(shù)據(jù)類型，然后在構(gòu)造函數(shù)中把要適配的數(shù)據(jù)傳入。在 ArrayAdapter 的構(gòu)造函數(shù)中依次傳入 Activity 的實(shí)例、ListView 子項(xiàng)布局的 id、數(shù)據(jù)源，這里我們使用了 android.R.layout.simple_list_item_1 作為 ListView 子項(xiàng)布局的 id，這是一個(gè) Android 內(nèi)置的布局文件，里面只有一個(gè) TextView，可用于簡(jiǎn)單地顯式一段文本。最后，調(diào)用 ListView 的 setAdapter() 方法，將構(gòu)建好的適配器對(duì)象傳遞進(jìn)去，這樣 ListView 和數(shù)據(jù)之間的關(guān)聯(lián)就建立完成了

在這里插入圖片描述

定制 ListView 的界面

只能顯示一段文本的 ListView 實(shí)在太單調(diào)了，我們現(xiàn)在希望定制 ListView 的界面，讓它能顯示文本和圖片

在需要 ListView 的子項(xiàng)指定一個(gè)我們自定義的布局，在 layout 目錄下新建 fruit_item.xml

<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="60dp">

    <ImageView
        android:id="@+id/fruitImage"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        tools:ignore="ContentDescription,RtlHardcoded" />

    <TextView
        android:id="@+id/fruitName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        tools:ignore="RtlHardcoded" />

</LinearLayout>

定義一個(gè)實(shí)體類，作為 ListView 適配器的適配類型

class FruitAdapter(activity: Activity, val resourceId: Int, data: List<Fruit>) :
    ArrayAdapter<Fruit>(activity, resourceId, data) {

    @SuppressLint("ViewHolder")
    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)
        if (fruit != null) {
            fruitImage.setImageResource(fruit.imageId)
            fruitName.text = fruit.name
        }
        return view
    }
}

FruitAdapter 類繼承自 ArrayAdapter，并泛型指定為 Fruit 類，重寫(xiě) getView() 方法。在 getView() 方法中，首先使用 LayoutInflater 來(lái)為這個(gè)子項(xiàng)加載我們傳入的布局，再調(diào)用 View 的 findViewById() 方法分別獲取 ImageView 和 TextView，然后通過(guò) getItem() 方法得到當(dāng)前項(xiàng)的 Fruit 實(shí)例，設(shè)置顯示的圖片和文字，最后將布局返回

最后修改 MainActivity 中的代碼

class MainActivity : AppCompatActivity() {

    private val fruitList = ArrayList<Fruit>()

    private val data = listOf("Apple", "Banana", "Orange", "Watermelon",
        "Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango",
        "Apple", "Banana", "Orange", "Watermelon", "Pear", "Grape",
        "Pineapple", "Strawberry", "Cherry", "Mango")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initFruits()
        val adapter = FruitAdapter(this, R.layout.fruit_item, fruitList)
        listView.adapter = adapter
    }

    private fun initFruits() {
        repeat(2) {
            fruitList.add(Fruit("Apple", R.drawable.apple_pic))
            fruitList.add(Fruit("Banana", R.drawable.banana_pic))
            fruitList.add(Fruit("Orange", R.drawable.orange_pic))
            fruitList.add(Fruit("Watermelon", R.drawable.watermelon_pic))
            fruitList.add(Fruit("Pear", R.drawable.pear_pic))
            fruitList.add(Fruit("Grape", R.drawable.grape_pic))
            fruitList.add(Fruit("Pineapple", R.drawable.pineapple_pic))
            fruitList.add(Fruit("Strawberry", R.drawable.strawberry_pic))
            fruitList.add(Fruit("Cherry", R.drawable.cherry_pic))
            fruitList.add(Fruit("Mango", R.drawable.mango_pic))
        }
    }
}

在這里插入圖片描述

提升 ListView 的運(yùn)行效率

getView() 方法中還有一個(gè) convertView 參數(shù)，這個(gè)參數(shù)用于將之前加載好的布局進(jìn)行緩存，以便之后進(jìn)行重用，我們可以借助這個(gè)參數(shù)進(jìn)行性能優(yōu)化

class FruitAdapter(activity: Activity, val resourceId: Int, data: List<Fruit>) :
    ArrayAdapter<Fruit>(activity, resourceId, data) {

    @SuppressLint("ViewHolder")
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view: View
        if (convertView == null) {
            view = LayoutInflater.from(context).inflate(resourceId, parent, false)
        } else {
            view = convertView
        }
        val fruitImage: ImageView = view.findViewById(R.id.fruitImage)
        val fruitName: TextView = view.findViewById(R.id.fruitName)
        val fruit = getItem(position)
        if (fruit != null) {
            fruitImage.setImageResource(fruit.imageId)
            fruitName.text = fruit.name
        }
        return view
    }
}

我們?cè)?getView() 方法中進(jìn)行了判斷：如果 convertView 為 null，則使用 LayoutInflater 去加載布局；如果不為 null，則直接對(duì) convertView 進(jìn)行重用

目前代碼還可以繼續(xù)優(yōu)化，每次在 getView() 方法中仍然會(huì)調(diào)用 View 的 findViewById 方法去獲取一次控件的實(shí)例，我們可以借助一個(gè) ViewHolder 來(lái)對(duì)這部分性能進(jìn)行優(yōu)化，修改 FruitAdapter 中的代碼

class FruitAdapter(activity: Activity, val resourceId: Int, data: List<Fruit>) :
    ArrayAdapter<Fruit>(activity, resourceId, data) {

    inner class ViewHolder(val fruitImage: ImageView, val fruitName: TextView)

    @SuppressLint("ViewHolder")
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view: View
        val viewHolder: ViewHolder
        if (convertView == null) {
            view = LayoutInflater.from(context).inflate(resourceId, parent, false)
            val fruitImage: ImageView = view.findViewById(R.id.fruitImage)
            val fruitName: TextView = view.findViewById(R.id.fruitName)
            viewHolder = ViewHolder(fruitImage, fruitName)
            view.tag = viewHolder
        } else {
            view = convertView
            viewHolder = view.tag as ViewHolder
        }
        val fruit = getItem(position)
        if (fruit != null) {
            viewHolder.fruitImage.setImageResource(fruit.imageId)
            viewHolder.fruitName.text = fruit.name
        }
        return view
    }
}

我們新增一個(gè)內(nèi)部類 ViewHolder，用于對(duì) ImageView 和 TextView 的控件實(shí)例進(jìn)行緩存。當(dāng) convertView 為 null 時(shí)，創(chuàng)建一個(gè) ViewHolder 對(duì)象，并將控件的實(shí)例存放在 ViewHolder 里，然后調(diào)用 View 的 setTag() 方法，將 ViewHolder 對(duì)象存儲(chǔ)在 View 中

ListView 的點(diǎn)擊事件

ListView 的滾動(dòng)畢竟只是滿足我們視覺(jué)上的效果，因此本節(jié)學(xué)習(xí) ListView 如何才能響應(yīng)用戶的點(diǎn)擊事件

class MainActivity : AppCompatActivity() {

    private val fruitList = ArrayList<Fruit>()

    ...

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initFruits()
        val adapter = FruitAdapter(this, R.layout.fruit_item, fruitList)
        listView.adapter = adapter
        /*val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data)*/
        /*listView.adapter = adapter*/
        listView.setOnItemClickListener {parent, view, position, id ->
            val fruit = fruitList[position]
            Toast.makeText(this, fruit.name, Toast.LENGTH_SHORT).show()
        }
    }
}

到此這篇關(guān)于Android入門教程之ListView的具體使用詳解的文章就介紹到這了,更多相關(guān)Android ListView內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: