最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day 7 ImageList

XAMPP下载 admin 735浏览 0评论

RecyclerView的使用

QQ截图20181031163400

 比起 ListView,RecyclerView 有更好的記憶體管理,也可以方便的連結 layout

目標項目:

前置作業
設定圖片來源
Adapter 的處理
綁定資料
前置作業
首先在 gradle 中加入

dependencies {

implementation ‘com.android.support:recyclerview-v7:28.0.0’
}
接著在 activity_mail 中就可以加入 RecyclerView

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.constraint.ConstraintLayout 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”>

<android.support.v7.widget.RecyclerView
android:id=”@+id/recyclerView”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”8dp”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent” />

</android.support.constraint.ConstraintLayout>
對於要顯示每一組資料,我們需要自訂一個類別來儲存它,基本上這邊會對應到我們的 itemView 上;以這個範例來說,表示我們畫面上會有一個 image 和 一段字,image 的話只要記錄 ResourceId 就可以了

package com.example.river.imagelist

data class ImageModel(val imgId: Int, val memo: String)
在 kotlin 中要表示數據類的 class 可以在前面加上 data 關鍵字
且要建立一簡易類別可以直接寫在簽名列中一行完成,十分方便

回到 MainActivity.kt,RecyclerView 需要設定 layoutManager
並且需要建立一個 adapter 指定給它

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

recyclerView.layoutManager = LinearLayoutManager(this)
var adapter = Adapter(this, getDataList())
recyclerView.adapter = adapter
}
設定圖片來源
要建立 Adapter 之前,我們需要準備好我們的資料來源
以便在建構 Adapter 的時候當作參數傳進去
首先要把我們準備好的圖片拉進去 drawable 資料夾

QQ截图20181031163414

因為我們的檔名是有規律的,所以可以使用 for 迴圈去組出我們要的檔名,且利用檔名可以從 resources 中得到圖片的 resourcesId;接著做成 ImageModel,放到 list 之中

fun getDataList(): MutableList<ImageModel> {
val list = arrayListOf<ImageModel>()
for (i in 0..5) {
val str = “img${String.format(“%02d”, i+1)}”
list.add(ImageModel(findResourceIdByString(str), str))
}
return list
}

fun findResourceIdByString(str: String): Int {
return this.resources.getIdentifier(str, “drawable”, this.packageName)
}
建立 Adapter
資料準備好了,下一步是建立 RecyclerView 所需的 Adapter
Adapter 是用來將資料連結介面的類別,以下是完整的 Adapter

class Adapter : RecyclerView.Adapter<Adapter.MyViewHolder> {

var context: Context
var dataList: MutableList<ImageModel>

constructor(context: Context, dataList: MutableList<ImageModel>) : super() {
this.context = context
this.dataList = dataList
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {

}

override fun getItemCount(): Int {

}

override fun onBindViewHolder(holder: MyViewHolder, position: Int) {

}

class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {
var memo = view.memo
var imageView = view.imageView
}
}
我們自訂的 Adapter 需要覆寫 3 個方法:

onCreateViewHolder
getItemCount
onBindViewHolder
onCreateViewHolder
裡面要回傳 RecyclerView.ViewHolder,可以把它想成是處理每一個 item view 的人;所以這邊首先要建立每個項目所要使用的 layout 檔

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.constraint.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android


xmlns:app=”http://schemas.android.com/apk/res-auto


android:layout_width=”match_parent”

     android:layout_height=”wrap_content”>

<ImageView
android:id=”@+id/imageView”
android:layout_width=”match_parent”
android:layout_height=”200dp”
android:scaleType=”centerCrop”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent” />

<TextView
android:id=”@+id/memo”
android:layout_width=”match_parent”
android:layout_height=”50dp”
android:gravity=”center”
android:text=”TextView”
android:textSize=”30sp”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/imageView” />

</android.support.constraint.ConstraintLayout>
並自訂我們的 ViewHolder 去增加我們要的屬性,用意是連結到我們 layout 上的 id

inner class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {
var memo = view.memo
var imageView = view.imageView
}
接著就可以在 onCreateViewHolder 中使用 LayoutInflater 得到我們的 item View,然後再當作參數建立出 ViewHolder 回傳

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item, parent, false)
return MyViewHolder(view)
}
getItemCount
這裡是單純告訴 adapter 我們用幾個項目,所以回傳資料來源的 size

override fun getItemCount(): Int {
return dataList.size
}
onBindViewHolder
最後的 onBindViewHolder 作用是將”值”對應給介面,藉由傳入的 position 變數,我們可以知道這是第幾個項目

override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
holder.imageView.setImageResource(dataList[position].imgId)
holder.memo.text = dataList[position].memo
}
Adapter 完成後,就可以在 MainActivity 使用了

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

recyclerView.layoutManager = LinearLayoutManager(this)
var adapter = Adapter(this, getDataList())
recyclerView.adapter = adapter
}

转载请注明:XAMPP中文组官网 » Day 7 ImageList

您必须 登录 才能发表评论!