使用語言

• Kotlin

使用元件

• ImageView
• TextView
• RecyclerView

Layout 準備

• 一個主 layout 包含一個 RecyclerView
• 一個 RecyclerView 子項目的 layout

Method

LayoutInflater

用來將 res/layout/ 下的 xml 佈局文件加載成 View

1. 先實例化 LayoutInflater

   四種實例化方式：

   • LayoutInflater.from(context)

     val inflater = LayoutInflater.from(context)
     

     獲取 context 提供的 LayoutInflater

   • getLayoutInflater()

     val inflater = getLayoutInflater()
     

     透過 Activity.getLayoutInflater() 呼叫 Window.getLayoutInflater()
     取得 Window 從 Context 中獲取的 LayoutInflater

   • Context.getSystemService(serviceClass: Class<T>

     val inflater = getSystemService(LayoutInflater::class.java) as LayoutInflater
     

     透過 Context 的 getSystemService 方法依指定 class 取得 LayoutInflater

   • Context.getSystemService(name: String )

     val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
     

     透過 Context 的 getSystemService 方法依指定 name 取得 LayoutInflater

2. 將 layout 載入生成 View

   inflate (resource: Int, root: ViewGroup, attachToRoot: Boolean)

   val view = inflater.inflate(R.layout.image, viewGroup, fasle)
   

   • resource：想實例化成 View 的 layout
   • root：作為 Parent 設置 layout 布局位置
   • attachToRoot：是否要將上述 root 做為新生成 View 的 root

RecyclerView

• 工作原理

• 工作流程

  
  (圖片截自上方影片)
  (影片來源為 Google 提供的免費課程)

Adapter

建立一個 class 繼承 RecyclerView.Adapter

class Adapter(val list: List<content>) : RecyclerView.Adapter<Adapter.ViewHolder>() {}
// 參數 list 為 Activity 傳入要綁定到 View 上的資料

Adapter 將負責 RecyclerView 中 View 的調用及呈現

Adapter 會創建多個 ViewHolder，個數會依畫面需求而不同（僅建立夠用的個數）
畫面滑動時，滑出畫面預備範圍外的 ViewHolder 將被暫存
進入畫面預備範圍內的新項目會以取用被暫存的 ViewHolder 綁定新資料的方式呈現

優點：ViewHolder 將被回收並重複使用，在滑動過程中不用一直重新建立 View

有三個必須 override 的 function

• onCreatViewHolder

  創建 ViewHolder 供 RecyclerView 使用

  override fun onCreateViewHolder(viewGroup: ViewGroup, position: Int): Adapter.ViewHolder {
      val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.image, viewGroup, false)
      return ViewHolder(view)
  }
  
  class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
      val imageView = itemView.imageView
      val textView = itemView.textView
  
      fun bind(content: content) {
          imageView.setImageResource(content.image)
          textView.setText(content.text)
      }
  }
  

  • 將子項目的 layout 實例化成 View，並做為 itemView 傳入 ViewHolder Class 建立 ViewHolder
  • itemView ：即 RecyclerView 中每個子項目呈現的 View
  • bind：將在之後的 onBindViewHolder 被調用，用來綁定 itemView 與資料

• onBindViewHolder

  綁定 ViewHolder 和資料

  override fun onBindViewHolder(holder: Adapter.ViewHolder, position: Int) {
      holder.bind(list[position])
  }
  

  在 ViewHolder 被使用的時候，調用 ViewHolder 中的 bind 方法綁定新資料

• getItemCount

  提供 Adapter 資料的總筆數

  override fun getItemCount() = this.contentList.count()
  

完成 Adapter 後將 Adapter 指定給 RecyclerView 做使用

recyclerView.adapter = Adapter(list)  
//此 recyclerView 為 layout 中 RecyclerView 的 id

LayoutManager

負責子項目的排列方式

LayoutManager有三種：

• LinearLayoutManager

  • LinearLayoutManager (context: Context)

  • LinearLayoutManager (context ：Context, orientation: Int, reverseLayout: Boolean)

    • context：當前的 context
    • orientation：LinearLayout 的方向，需為 HORIZONTAL 或 VERTICAL
    • reverseLayout：if true ，子項目載入順序將會反過來

      RecyclerView 的最後一個子項目會顯示在第一個
      第一個子項目會顯示在最後一個
      在載入時 RecyclerView 將會自動滑至最後一個從第一個子項目開始顯示

• GridLayoutManager

  表格排列，繼承 LinearLayoutManager，可設置水平或垂直方向

• StaggeredGridLayoutManager

  瀑布流式排列

指定 RecyclerView 的 LayoutManager

recyclerView.layoutManager = LinearLayoutManager(this)
//此 this 為 Activity (Context)

實作成果

（圖片來源：Android Studio Sample Data）

查看詳細 Code > GitHub

tags: RecyclerView Adapter LayoutManager LayoutInflater