這次要實作 Android 的下拉效果
其實只要把控制項丟到 SwipeRefreshLayout 這個 ViewGroup 中就可以了
比想像中的步驟要少
畫面內容的呈現使用之前常用的 RecyclerView 來顯示

前置作業

首先要在 build.gradle 中加入：

dependencies {
    
    ...

    implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
}

主畫面 layout

在 layout_main 中，將 RecyclerView 放在 SwipeRefreshLayout 中
設定如下：

<?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.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.v4.widget.SwipeRefreshLayout>


</android.support.constraint.ConstraintLayout>

RecyclerView.Adapter

這次如同之前使用 RecyclerView 一樣，首先定義每一個要顯示項目的 data item 類別

data class InfoItem(var name: String, var color: Int)

這邊傳入要顯示的名稱和圖案要顯示的顏色

因為後面要用上的 ImageView.setColorFilter 方法需要輸入Color.rgb 方法回傳的 Int 參數，所以這邊型別為 Int

這次與之前實作 RecyclerView.Adapter 不太一樣的地方是
我們會動態去變更資料內容
所以在我們自訂的 Adapter 中新增一個對外開放的方法，資料新增的 List 之後記得要呼叫 notifyDataSetChanged 方法通知畫面要更新

fun addListItem(color:Int){
    var size = list.size + 1
    this.list.add(InfoItem("Android ${size++}", color))
    this.notifyDataSetChanged()
}

SwipeRefreshLayout

回到主畫面這邊，主要動作為：初始化 ReclerView.Adapter、初始化

再來要設定 SwipeRefreshLayout
使用 setProgressViewOffset 設定滑下時，螢幕上旋轉的圖示
這個方法有三個參數

• 第一個布林值為圖示在下拉時會不會有從小變到大的特效
• 第二個參數為圖示出現的起點
• 第三個參數為圖示出現的終點

setSize 可以設定圖示的大小
setOnRefreshListener 這邊規定下拉之後要做的事情
使用 Thread.sleep 是為了模擬負載較重的狀況
然後呼叫我們在 Adapter 中所寫對外開放的方法 addListItem
最後設定 isRefreshing 讓刷新狀態停止

fun initSwipeRefreshLayout() {
    swipeRefreshLayout.setProgressViewOffset(true, 0, 100)
    swipeRefreshLayout.setSize(SwipeRefreshLayout.LARGE)

    swipeRefreshLayout.setOnRefreshListener {
        Thread.sleep(200)
        
        cusAdapter.addListItem(getRandomColor())

        swipeRefreshLayout.isRefreshing = false
    }

}

設定隨機顏色

使用以下方法獲得隨機的顏色數值

fun getRandomColor(): Int {
    val rnd = Random()
    return Color.rgb(
        rnd.nextInt(256),
        rnd.nextInt(256),
        rnd.nextInt(256)
    )
}

拿到顏色數值後，在建立新項目時就會帶到屬性之中
再回到 Adapter 這邊，建立自訂的 ViewHolder 我們會寫一個綁定方法
其中再使用 ImageView.setColorFilter 方法去設定顏色

setColorFilter 方法會把你的影像(此例為機器人)和設定的顏色圖層疊在一起後取交集做混和，達到替換顏色的效果

inner class CusViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    fun bind(position: Int) {
        itemView.textView.text = list[position].name
        itemView.imageView.setColorFilter(list[position].color)
    }
}