【從零開始擼一個App】RecyclerView的使用-有解無憂

目標

前段時間打造了一款簡單易用功能全面的圖片上傳組件，現在就來將上傳的圖片以圖片集的形式展現到App上，出于用戶體驗考慮，加載新圖片采用[無限]滾動模式，Android平臺上我們優選RecyclerView組件，

顯示圖片，用的自然是ImageView，然而它并不支持直接加載網路圖片，需要先通過其它網路組件（如HttpURLConnection、okhttp3等）將圖片獲取到本地，得到BitMap資料，然后通過setImageBitmap()加載，
ImageView也有setImageURI(Uri uri)方法，這里uri的命名容易讓人產生錯覺，其實只能是本地檔案路徑，

所幸，一些開源組件封裝了繁瑣的網路操作和快取策略，提供了易用的API，這里我選擇了Glide，

實作

加載更多

項布局

有兩個，一個用于串列中各個圖片顯示，一個顯示加載更多/已全部加載放置在串列最末提示用戶，

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

    <ImageView
        android:id="@+id/thumbnail_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>
</LinearLayout>

<!--loadmore-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <TextView
        android:id="@+id/tv_load_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="正在加載更多" />
</LinearLayout>

RecyclerView.Adapter

RecyclerView的設計模式網上資料很多，此處不再贅述，先實作RecyclerView.Adapter，

class ThumbnailListAdapter(
    private val thumbnails: List<Thumbnail>,
    private val totalCount: Long,
    private val context: Context
) :
    RecyclerView.Adapter<ThumbnailListAdapter.ThumbnailViewHolder>() {

    // 呼叫若干次
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ThumbnailViewHolder {
        // viewType就是通過getItemViewType得到的
        val itemView = LayoutInflater.from(context).inflate(viewType, parent, false)
        return ThumbnailViewHolder(itemView)
    }

    // 搞分頁/瀑布加載的同學不要把這個和資料庫的總數量搞混，這里的itemCount表示現在記憶體中資料量
    // 我們可以[從后端]獲取新資料添加到資料集，以實作loadmore功能
    override fun getItemCount(): Int {
        return if (thumbnails.isNotEmpty())
            thumbnails.size + 1 // +1 是因為除了thumbnails資料集之外，還有個寫死的loadmore項
        else
            0
    }

    // R.layout.xxx 是Int型別，可以直接回傳
    override fun getItemViewType(position: Int): Int {
        return if (position < thumbnails.size)
            R.layout.list_thumbnail_image // 正常圖片顯示
        else
            R.layout.list_loadmore_footer // 末尾loadmore
    }

    // 有螢屏外item進入螢屏時就會呼叫
    override fun onBindViewHolder(holder: ThumbnailViewHolder, position: Int) {
        if (position < thumbnails.size) {
            Glide.with(context)
                .load(thumbnails[position].uri)
                .into(holder.itemView.thumbnail_view)
        } else {
            if (thumbnails.size >= totalCount)
                holder.itemView.tv_load_more.text = "全部加載完畢"
        }
    }
    
    // 必須這么繼承一下
    class ThumbnailViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

滾動監聽

為RecyclerView添加滾動監聽，在合適的時候加載新資料到資料集中，

recyclerview.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
        super.onScrollStateChanged(recyclerView, newState)
        // 已經在加載則跳過
        if (!_thumbnailsLoading) {
            // 找到最后可見項的索引
            val lastPos = layoutManager.findLastVisibleItemPosition()
            val sum = adapter.itemCount
            // 當快接近末尾項時（這里差額10，表示再顯示10個item就沒資料了）獲取新資料
            if (newState == RecyclerView.SCROLL_STATE_IDLE && sum - lastPos <= 10) {
                vm.thumbnails.addAll(vm.getMoreAlbumCovers()) // 加載新資料到資料集中
                _thumbnailsLoading = true
            }
        }
    }
})

不要將上面預加載資料和Glide的預加載圖片混淆起來，拿到資料，和通過資料中的uri獲取圖片并下載，這是兩個步驟，Glide專門針對RecyclerView提供了預加載方案，是為了減少滑動時圖片還未從網路請求導致的等待加載情況，目前只支持LinearLayoutManager或其子類布局

布局

StaggeredGridLayoutManager

按列瀑布流顯示圖片，簡單地將RecyclerView的layoutManager設為StaggeredGridLayoutManager實體即可，注意StaggeredGridLayoutManager目前還是beta版，

val sgLayoutManager =
    StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)
recyclerview.layoutManager = sgLayoutManager

使用StaggeredGridLayoutManager會發現上下滑動程序中，經常發生圖片塊重排，根據網上說法，這是因為復用的ViewHolder和該ViewHolder要加載的圖片，它們的尺寸不一致導致，比如某個ViewHolder之前加載的圖片高度為60，之后被回收，但是尺寸資訊仍然保留著，后來被一張高度80的圖片復用，由于StaggeredGridLayoutManager是根據ViewHolder的尺寸排序布局，尺寸的變化導致發生多次排序，解決方法是在ViewHolder系結資料時（在RecyclerView.Adapter.onBindViewHolder()中），就事先設定好本次布局的最終尺寸，如下：

override fun onBindViewHolder(holder: ThumbnailViewHolder, position: Int) {
    val layoutParams =
        holder.itemView.thumbnail_view.layoutParams as LinearLayout.LayoutParams
    //手動設定ViewHolder高度
    layoutParams.height = thumbnails[position].height

    Glide.with(context).load(thumbnails[position].uri)
        .into(holder.itemView.thumbnail_view)
}

當由下滑回到最頂部時，經常會出現頂部（第一行）的圖片相互重排，仔細觀察，這是因為第一行初次布局時是按順序排列而非按空缺插入，往回滑時則是按空缺（哪里最空最先排哪里），這導致順序可能與初次排序不一致，不過還好，最終仍會按照圖片尺寸各自歸位，而且這種情況只會出現在第一次由下滑回到頂部時，

GreedoLayoutManager

StaggeredGridLayoutManager一共有3k多行代碼，又是beta版，代碼潔癖的我把目光投向了GreedoLayoutManager，它是500px開源的一個LayoutManager，能在保持圖片寬高比例的前提下將多張圖片拼接到一行顯示，原理很簡單，看下面動圖：
在線動圖制作brush.ninja-gif裁剪

替換LayoutManager也相當簡單，重新設定下RecyclerView的layoutManager即可，

val layoutManager =
    GreedoLayoutManager(adapter).also { it.setMaxRowHeight(resources.displayMetrics.heightPixels / 3) }
recyclerview.layoutManager = layoutManager

GreedoLayoutManager在布局之前需要知道item的寬高比例，只要讓Adapter實作SizeCalculatorDelegate介面即可

override fun aspectRatioForIndex(index: Int): Double {
    val thumbnail = thumbnails[index]
    return thumbnail.width / thumbnail.height.toDouble()
}

運行界面顯示：

可以看到每張圖片都比預期大很多，只能看到一小部分，經研究發現，上面定義的圖片展示項的布局（LinearLayout內嵌ImageView），最終呈現后，LinearLayout的尺寸是每個網格的尺寸，而內嵌的ImageView則超出了LinearLayout，似乎其最終尺寸是MeasuredSize——我們在onCreateViewHolder時使用了LayoutInflater.from(context).inflate(viewType, parent, false)，這里的parent是RecyclerView，而在布局xml中寬高都設定為match_parent，因此其中ImageView的MeasuredSize同RecyclerView的寬高——然而ImageView最終尺寸應該同樣適配網格尺寸才對，

以width為例：

期望：ImageView.width == LinearLayout.width == 網格.width
實際：ImageView.width == ImageView.measuredWith == RecyclerView.width

我們看到每個框格其實是ImageView被截取的左上角那部分，

經過一番搜索，網上各種對getWidth和getMeasuredWidth區別的闡述，并沒有解決我的困惑，直到這篇從原始碼的角度分析，getWidth() 與 getMeasuredWidth() 的不同之處讓我知道，其實Android系統并沒有對width下定義，自定義布局時可隨意設定子項大小，是否超出螢屏也沒有限制，在我們這個場景下，估計GreedoLayoutMananger在處理了最外層控制元件（這里是LinearLayout）的width后，并沒有遞回處理內部控制元件的width，從而導致了這個bug，

既然如此，那么就不要外圍的LinearLayout，直接使用ImageView，反倒省了一點開銷，

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ThumbnailViewHolder {
    return if (viewType == 0) {
        val imageView = ImageView(parent.context).apply {
            scaleType = ImageView.ScaleType.CENTER_CROP
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
        }
        ThumbnailViewHolder(imageView)
    } else {
        val itemView = LayoutInflater.from(context).inflate(viewType, parent, false)
        ThumbnailViewHolder(itemView)
    }
}

當然也有ViewHolder重用導致的顯示問題，圖片只顯示一部分，且是按ViewHolder重用前的寬高比例顯示，如下：

懶得深究，使用Glide官方檔案建議的waitForLayout()并沒有用，override(width, height)提前告知圖片尺寸解決，

Glide.with(context)
    .load(thumbnails[position].uri)
    .override(thumbnails[position].width, thumbnails[position].height)
    .into(holder.itemView as ImageView)
//                .waitForLayout() //并沒有用

下拉重繪

使用SwipeRefreshLayout，easy，按過不表，最后成品如下

其它

一般常用detachAndScrapView，RecyclerView會自動幫我們處理后續重用View[Holder]的邏輯，然而在某些場景下（如只是重排當前顯示的Views而不是移除），我們可以使用更輕量級的detachView(detach之后view就不在界面上顯示了)，不過要記得在下次布局之前手動呼叫attachView（位置的話，detach之前在哪，attach后就在哪）或removeDetachedView/recycleView，
注意detach之后，RecyclerView.getChildCount()就相應減少，

真正把 view layout到界面上的是RecyclerView的layoutDecorated方法，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/256284.html

標籤：Android

上一篇：打牢基礎 | 網路基礎知識十二問

下一篇：android dimens density適配檔案生成