Android 基礎可展開列表介面卡示例

什麼是 Android 中的基礎可展開列表介面卡？

Android 中的基礎可展開列表介面卡用於顯示巢狀列表檢視。我們將透過一個示例來理解巢狀列表檢視。我們需要顯示技術棧及其使用的程式語言。因此，我們可以顯示列表檢視中的技術棧，例如 Android 開發、iOS 開發和 Web 開發。每個技術棧都有其各自的程式語言列表，因此當用戶點選任何技術棧時，我們可以顯示程式語言列表。這樣，我們就可以實現巢狀列表檢視。為了實現巢狀列表檢視，我們將在 Android 應用程式中使用基礎可展開列表介面卡。

基礎可展開列表介面卡的實現

在本文中，我們將建立一個簡單的應用程式，在其中我們將顯示技術棧列表。當用戶點選任何技術棧時，我們將顯示可用於該特定技術棧的程式語言。我們將遵循分步指南在 Android 應用程式中實現吐司訊息。

步驟 1：在 Android Studio 中建立一個新專案

導航到 Android Studio，如下圖所示。在下面的螢幕中，點選“新建專案”以建立一個新的 Android Studio 專案。

點選“新建專案”後，您將看到下面的螢幕。

在這個螢幕中，我們只需選擇“空活動”，然後點選“下一步”。點選“下一步”後，您將看到下面的螢幕。

在這個螢幕中，我們只需指定專案名稱。然後包名將自動生成。

注意 – 確保選擇 Kotlin 作為語言。

指定所有詳細資訊後，點選“完成”以建立一個新的 Android Studio 專案。

專案建立完成後，我們將看到開啟的兩個檔案，即 activity_main.xml 和 MainActivity.kt 檔案。

步驟 2：使用 activity_main.xml

導航到 activity_main.xml。如果此檔案不可見，則要開啟此檔案，請在左側面板中導航到 app>res>layout>activity_main.xml 以開啟此檔案。開啟此檔案後，向其中新增以下程式碼。程式碼中添加了註釋以便詳細瞭解。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

   <!-- creating text view for name on below line-->
   <TextView
      android:id="@+id/idTVTitle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_margin="10dp"
      android:gravity="center"
      android:padding="4dp"
      android:text="Base Expandable List Adapter"
      android:textAlignment="center"
      android:textColor="@color/black"
      android:textSize="20sp"
      android:textStyle="bold" />

   <!-- creating an expandable list view on below line-->
   <ExpandableListView
      android:id="@+id/idExpandableListView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/idTVTitle" />

</RelativeLayout>

說明 – 在上面的程式碼中，我們將相對佈局作為根佈局。在這個相對佈局中，我們建立了一個簡單的文字檢視，用於顯示應用程式的標題。之後，我們建立了一個可展開列表檢視小部件，我們將使用它來顯示應用程式中的技術棧列表及其程式語言。

步驟 3：為 TechStackItem 建立一個新的模型類

現在，我們將為我們的技術棧專案建立一個新的模型類，它將包含兩個變數，一個用於技術棧名稱，一個用於我們必須在該技術棧中顯示的程式語言列表的陣列列表變數。要建立此類，請導航到 app>java>您的應用程式包名稱>右鍵單擊它>新建>Java/Kotlin 類，並將其命名為 TechStackItem，然後向其中新增以下程式碼。

package com.example.gptapp

data class TechStackItem(
   // on below line creating a string variable for tech stack/
   // creating an array list for programming languages within this to display programming languages.
   var techStack: String,
   var programmingLanguages: ArrayList<String>
)

步驟 4：為程式語言列表項建立一個新的佈局檔案。

由於我們將建立一個可展開列表檢視，因此我們必須建立一個單獨的專案檢視，我們必須將其顯示在我們的程式語言列表檢視中。要建立它，請導航到 app>res>layout>右鍵單擊它>新建>佈局資原始檔，並將其命名為 programming_lng_list_item，然後向其中新增以下程式碼。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- on below line creating a text view for displaying a programming language -->
   <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="3dp"
      android:id="@+id/idTVProgrammingLng"
      android:padding="4dp"
      android:text="Programming Language Item"
      android:textColor="#FF000000"
      android:textSize="15sp" />

</RelativeLayout>

說明：在上面的程式碼中，我們建立了一個簡單的文字檢視，我們將使用它來顯示程式語言列表檢視中的專案。

步驟 5：為技術棧列表項建立一個新的佈局檔案

當我們點選技術棧時，我們將顯示程式語言列表。為了顯示技術棧，我們將必須為此建立一個單獨的佈局檔案。要建立一個新的佈局檔案，請導航到 app>res>layout>右鍵單擊它>新建>佈局資原始檔，並將其命名為 tech_stack_list_item，然後向其中新增以下程式碼。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="40dp">

   <!-- on below line creating a text view for displaying a tech stack -->
   <TextView
      android:id="@+id/idTvTechStack"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="3dp"
      android:gravity="center"
      android:padding="4dp"
      android:text="Tech Stack List Item"
      android:textColor="#FF000000"
      android:textSize="16sp"
      android:textStyle="bold" />

</RelativeLayout>

說明 – 在上面的程式碼中，我們只是建立了一個文字檢視，我們將使用它來顯示技術棧的文字。我們將此佈局檔案用於技術棧列表檢視。

步驟 6：建立一個介面卡類來將資料設定為我們的佈局檔案

現在我們已經建立了用於顯示 UI 的佈局檔案。之後，我們必須設定我們必須在佈局檔案中顯示哪些資料。要設定此資料，我們必須建立一個介面卡類。要建立此介面卡類，請導航到 app>java>您的應用程式包名稱>右鍵單擊它>新建>Java/Kotlin 類，並將其命名為 CustomListViewAdapter，然後向其中新增以下程式碼。

package com.example.gptapp

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseExpandableListAdapter
import android.widget.TextView

// Creating a custom list view adapter on below line.
class CustomListViewAdapter(
   // creating a list for our tech stack on below line and passing tech stack item to it.
   private val techStackList: List<TechStackItem>,
) : BaseExpandableListAdapter() {

   // on below line we have to return the size of group in our case is tech stack for programming languages
   override fun getGroupCount(): Int {
      return techStackList.size
   }

   // below method is use to return size of child list in our case is language list
   override fun getChildrenCount(groupPosition: Int): Int {
      val lngList = techStackList.get(groupPosition).programmingLanguages
      return lngList.size
   }

   // on below line we are returning the group from our tech stack list.
   override fun getGroup(groupPosition: Int): Any {
      return techStackList.get(groupPosition)
   }

   // below method is use to return the item for our child list
   override fun getChild(groupPosition: Int, childPosition: Int): Any {
      // on below line we are getting our programming language list from tech stack list
      val programmingLanguageList = techStackList.get(groupPosition).programmingLanguages
      // on below line e are getting item from our programming language list which we are taking from tech stack list
      return programmingLanguageList.get(childPosition)
   }

   // below method is use to get group position
   override fun getGroupId(groupPosition: Int): Long {
      return groupPosition.toLong()
   }

   // below method is use to get child position.
   override fun getChildId(groupPosition: Int, childPosition: Int): Long {
      return childPosition.toLong()
   }

   // below method is use to return true for stable ids.
   override fun hasStableIds(): Boolean {
      return true
   }

   // below method is use to inflate layout file for our group items.
   override fun getGroupView(
      groupPosition: Int,
      isExpanded: Boolean,
      convertView: View?,
      parent: ViewGroup?
   ): View {
      // on below line we are getting our group from tech stack item
      val techStackItem: TechStackItem = getGroup(groupPosition) as TechStackItem
      // on below line we are creating a layout inflater variable to inflate our layout file.
      val inflater =
         parent!!.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
      // on below line we are inflating our layout file for our tech stack item.
      val view = inflater.inflate(R.layout.tech_stack_list_item, null) as View
      // on below line we are creating and initializing variable for our tech stack tv.
      val techStackTV: TextView = view.findViewById(R.id.idTvTechStack)
      // on below line we are setting text for our tech stack text view.
      techStackTV.text = techStackItem.techStack
      // on below line returning the view.
      return view
   }

   // below method is use to inflate layout file for our child view.
   override fun getChildView(
      groupPosition: Int,
      childPosition: Int,
      isLastChild: Boolean,
      convertView: View?,
      parent: ViewGroup?
   ): View {
      // on below line we are getting language from our group
      val language: String = getChild(groupPosition, childPosition) as String
      // on below line we are creating a variable for our inflater.
      val inflater =
         parent?.context!!.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
      // on below line we are inflating a layout file for programming language list item.
      val view = inflater.inflate(R.layout.programming_lng_list_item, null) as View
      // on below line we are creating and initializing our text view for programming language.
      val programmingLngTV: TextView = view.findViewById(R.id.idTVProgrammingLng)
      // on below line setting data for our text view.
      programmingLngTV.text = language
      // on below line returning the view.
      return view
   }

   // below method is use to specify weather the child item will be selectable or not
   // in our case we are specifying it as selectable.
   override fun isChildSelectable(groupPosition: Int, childPosition: Int): Boolean {
      return true
   }
}

說明 – 在上面的程式碼中，首先，我們將介面卡類擴充套件為 BaseExpandableListAdapter，並將我們的資料列表作為引數傳遞到其中。現在，在這個類中，我們正在重寫 BaseExpandableListAdapter 類的所有方法。這些方法如下：

• getGroupCount() – 在此方法中，我們必須返回技術棧列表的大小，這是我們的父列表。

• getChildrenCount() – 在此方法中，我們必須返回程式語言列表的大小，這是我們的子列表。

• getGroup() – 在此方法中，我們必須返回技術棧列表項的組，其中包含技術棧名稱和該技術棧中存在的程式語言。

• getChild() – 在此方法中，我們必須從每個技術棧的程式語言列表中返回程式語言專案。

• getGroupId() – 在此方法中，我們只需返回組位置。

• getChildId() – 在此方法中，我們只需返回子項位置。

• hasStableIds() – 在此方法中，我們只需返回 true，因為我們必須為列表檢視專案顯示穩定的 ID。

• getGroupView() – 在此方法中，我們正在為父列表檢視（在我們的例子中是技術棧）膨脹佈局檔案，因此我們將膨脹 tech_stack_list_item 佈局。

• getChildView() – 在此方法中，我們正在為子列表檢視（在我們的例子中是程式語言）膨脹佈局檔案，因此我們將膨脹 programming_lng_list_item 佈局。

• isChildSelectable() – 在此方法中，我們返回 true，因為我們必須為可展開列表檢視設定點選偵聽器。

步驟 7：使用 MainActivity.kt

導航到 MainActivity.kt。如果此檔案不可見，則要開啟此檔案，請在左側面板中導航到 app>java>您的應用程式包名稱>MainActivity.kt 以開啟此檔案。開啟此檔案後，向其中新增以下程式碼。程式碼中添加了註釋以便詳細瞭解。

package com.example.gptapp

import android.os.Bundle
import android.widget.ExpandableListView
import android.widget.ExpandableListView.OnChildClickListener
import android.widget.ExpandableListView.OnGroupClickListener
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {
   // creating variables on below line for array list, adapter and expandable list view.
   private val techStackList: ArrayList<TechStackItem> = ArrayList()
   lateinit var customListViewAdapter: CustomListViewAdapter
   lateinit var expandableLV: ExpandableListView

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      // initializing all variables with their ids on below line.
      expandableLV = findViewById(R.id.idExpandableListView)

      // on below line initializing our adapter and setting this adapter to expandable list view.
      customListViewAdapter = CustomListViewAdapter(techStackList)
      expandableLV.setAdapter(customListViewAdapter)

      // on below line creating an array list for first tech tack and passing it to our tech stack list with tech stack name
      val lng1: ArrayList<String> = ArrayList()
      lng1.add("Java")
      lng1.add("Kotlin")
      techStackList.add(TechStackItem("Android Development", lng1))

      // on below line creating an array list for second tech tack and passing it to our tech stack list with tech stack name
      val lng2: ArrayList<String> = ArrayList()
      lng2.add("Objective c")
      lng2.add("Swift")
      techStackList.add(TechStackItem("IOS Development", lng2))

      // on below line creating an array list for third tech tack and passing it to our tech stack list with tech stack name
      val lng3: ArrayList<String> = ArrayList()
      lng3.add("HTML")
      lng3.add("CSS")
      techStackList.add(TechStackItem("Web Development", lng3))

      // on below line notifying adapter that data has changed.
      customListViewAdapter.notifyDataSetChanged()

      // on below line adding child click listener for expandable list view.
      expandableLV.setOnChildClickListener(OnChildClickListener { parent, v, groupPosition, childPosition, id -> // get the group header
         // on below line we are getting tech stack item from our tech stack list
         val techStackItem: TechStackItem = techStackList.get(groupPosition)
         // on below line we are getting our programming language item from tech stack item.
         val programmingLanguageItem: String =
            techStackItem.programmingLanguages.get(childPosition)
         // on below line we are displaying toast message
         Toast.makeText(
            baseContext,
            techStackItem.techStack + "/" + programmingLanguageItem,
            Toast.LENGTH_LONG
         ).show()
         false
      })

      // on below line adding click listener for expandable list view.
      expandableLV.setOnGroupClickListener(OnGroupClickListener { parent, v, groupPosition, id -> // get the group header
         // on below line we are getting our tech stack item
         val techStackItem: TechStackItem = techStackList.get(groupPosition)
         // displaying toast message on below line.
         Toast.makeText(baseContext, techStackItem.techStack, Toast.LENGTH_LONG).show()
         false
      })
   }
}   

說明 > 在上面的程式碼中，首先，我們為技術棧列表建立變數以建立一個新的陣列列表，然後我們為介面卡建立一個新變數，之後我們為可展開列表檢視建立一個變數。建立變數後，我們在 onCreate 方法中初始化所有變數。我們將列表傳遞給介面卡，並將該介面卡設定為可展開列表檢視。

初始化變數後，我們將資料傳遞給它。之後，我們通知介面卡列表中的資料已更改。

將資料設定為可展開列表檢視後，我們為可展開列表檢視新增子項點選偵聽器和組點選偵聽器。在每個方法中，我們都顯示一個吐司訊息以顯示點選。

新增上述程式碼後，我們只需點選頂部的綠色圖示即可在移動裝置上執行我們的應用程式。

注意 - 確保已連線到您的真實裝置或模擬器。

結論

在本教程中，我們學習了什麼是基礎可展開列表介面卡，以及如何在 Android 應用程式中使用它來顯示 Android 應用程式中的可展開列表檢視。

Vaibhav Ahire

更新於：2023年3月14日

1K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習