手把手教你用RecyclerView實作貓眼電影選擇效果

一、簡介

在官方推出RecyclerView 控件之後，越來越多的人都使用它代替之前的ListView。除了最普通的清單顯示，RecyclerView還可以其他的很多效果，例如Banner等。在最近的一個電影票平台項目中，使用RecyclerView實作了仿貓眼的電影選擇控件，如下圖所示：

以上圖為例，我們的需求如下：

1. 每一次滑動都讓圖檔保持在中間。
2. 第一張圖檔的左邊距和最後一張的右邊距需要大于其他圖檔的邊距使其保持在中間
3. 點選某張圖檔時讓其滑動到中間
4. 背景實作高斯模糊
5. 在切換目前電影時有一個背景淡入淡出的效果

二、實作思路

我們一步步實作我們的需求

（1）每一次滑動都讓圖檔保持在正中間

滑動保持圖檔在正中間，在RecyclerView24.2.0之後，Google官方給我們提供了一個SnapHelper的輔助類，可以幫助我們實作每次滑動結束都保持在居中位置：

val movieSnapHelper = LinearSnapHelper()
movieSnapHelper.attachToRecyclerView(movieRecyclerView)
           

LinearSnapHelper類是SnapHelper的一個子類，SnapHelper的另一個子類叫做PagerSnapHelper。顧名思義，兩者都可以是滑動結束時item保持在正中間，但是LinearSnapHelper可以一次滑動多個item，而PagerSnapHelper像ViewPager一樣限制你一次隻能滑動一個item。

（2）第一張圖檔的左邊距和最後一張的右邊距需要大于其他圖檔的邊距使其保持在中間

由于第0個item和最後一個item的圖檔邊距比較特殊，而其他的都是預設邊距，如果不做設定，第一張和最後一張圖檔就無法位于正中間，如下圖所示：

如果想要是第0位置的圖檔保持在中間，我們需要動态設定第0位置的圖檔的左邊距為 （螢幕寬度-自定義ImageView圖檔寬度-自定義ImageView的Margin）/2，例如我自定義的view參數為下圖

圖檔寬度+圖檔margin為110dp，假設手機螢幕寬度為360dp，我們此時圖檔的左邊距便設定為（360-110）/2 = 125 dp。

動态修改item的LayoutParams，我們不要在自定義的Adapter裡直接更改，官方提供了ItemDecoration的api，可以給recyclerview的item添加裝飾，我們在這裡自定義一個繼承RecyclerView.ItemDecoration的GalleryItemDecoration，然後重寫getItemOffsets(outRect: Rect?, view: View?, parent: RecyclerView?, state: RecyclerView.State?)方法（此方法用于自定義item的偏移寬度），修改如下：

class GalleryItemDecoration : RecyclerView.ItemDecoration() {

    var mPageMargin = 10 //自定義預設item邊距
    var mLeftPageVisibleWidth = 125 //第一張圖檔的左邊距

    override fun getItemOffsets(outRect: Rect?, view: View?, parent: RecyclerView?, state: RecyclerView.State?) {
        val positon = parent?.getChildAdapterPosition(view) //獲得目前item的position
        val itemCount = parent?.adapter?.itemCount //獲得item的數量
        val leftMargin = if (positon == 0) dpToPx(mLeftPageVisibleWidth) else dpToPx(mPageMargin) //如果position為0，設定leftMargin為計算後邊距，其他為預設邊距
        val rightMargin = if (positon == (itemCount!! - 1)) dpToPx(mLeftPageVisibleWidth) else dpToPx(mPageMargin) //同上，設定最後一張圖檔
        val lp = view?.layoutParams as RecyclerView.LayoutParams
        lp.setMargins(leftMargin, 30, rightMargin, 60) //30和60分别是item到上下的margin
        view.layoutParams = lp //設定參數
        super.getItemOffsets(outRect, view, parent, state)
    }

    private fun dpToPx(dp: Int): Int { 
        return (dp * Resources.getSystem().displayMetrics.density + 0.5f).toInt() //dp轉px
    }
}
           

然後，recyclerview設定GalleryItemDecoration即可：

movieRecyclerview.addItemDecoration(GalleryItemDecoration())
           

（3）點選某張圖檔時讓其滑動到中間

在

RecyclerView

中，我們如果需要滑動到某一位置，一般會使用

RecyclerView.smoothScrollToPosition(idx)

方法，但是在此處我們在設定item的點選事件時，不能直接使用這個方法，因為這個方法隻會将recyclerview滑動到idx位置的item可見便停止了，而無法移動到中間。

我們通過查詢，在

stackoverflow

上找到了實作思路，自定義一個

LinearLayoutManager

，代碼如下：

class CenterLayoutManager:LinearLayoutManager{
    constructor(context:Context):super(context)
    constructor(context:Context,orientation:Int,reverseLayout:Boolean):super(context,orientation,reverseLayout)
    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int, defStyleRes: Int):super(context, attrs, defStyleAttr, defStyleRes)

    override fun smoothScrollToPosition(recyclerView: RecyclerView?, state: RecyclerView.State?, position: Int) {
        val smoothScroller = CenterSmoothScroller(recyclerView!!.context)
        smoothScroller.targetPosition = position
        startSmoothScroll(smoothScroller)
    }

    private class CenterSmoothScroller internal constructor(context: Context) : LinearSmoothScroller(context) {
        override fun calculateDtToFit(viewStart: Int, viewEnd: Int, boxStart: Int, boxEnd: Int, snapPreference: Int): Int {
            return boxStart + (boxEnd - boxStart) / 2 - (viewStart + (viewEnd - viewStart) / 2)
        }

    }
}
           

我們通過檢視源碼，

RecyclerView.smoothScrollToPosition(idx)

調用了

LinearLayoutManager.smoothScrollToPosition

方法，代碼中的

calculateDtToFit

 方法控制滑動的位置，其中參數中view為需要滑動可見的item，box為整個布局。 然後調用

val movieLayoutManager = CenterLayoutManager(this)

和 

RecyclerView.smoothScrollToPosition(idx)

便可以點選滑動到中間。

（4）背景實作高斯模糊

高斯模糊有很多方法，推薦使用Native層的實作，使用

RenderScript

，此處參考教程

教你一分鐘實作動态模糊效果

，自定義一個ImageUtil類進行處理：

class ImageUtils(val context: Context) {

    private var renderScript:RenderScript? = RenderScript.create(context)
    
    fun gaussianBlur(@IntRange(from = 1,to = 25)radius:Int,original:Bitmap):Bitmap{
        val input = Allocation.createFromBitmap(renderScript,original)
        val output = Allocation.createTyped(renderScript,input.type)
        val scriptInterinsicBlur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript))
        scriptInterinsicBlur.setRadius(radius.toFloat())
        scriptInterinsicBlur.setInput(input)
        scriptInterinsicBlur.forEach(output)
        output.copyTo(original)
        return original
    }
}
           

用法隻需要new一個ImageUtils對象，傳入context，然後在方法裡傳入模糊程度（1到25）和原始bitmap即可，然後将這個bitmap設定為RecyclerView的背景即可。

(5)在切換目前電影時有一個背景淡入淡出的效果

private fun setMovieRecBg(idx: Int) {
        doAsync {
            val imageManager = ImageUtils(this@CinemaDetailActivity)
            val bgBitmap = Glide.with(applicationContext).asBitmap().load(mMovieList[idx].coverSrc).submit(300, 520).get()
            uiThread {
                if (!isActivityDestroyed(this@CinemaDetailActivity)) {
                    val curBg = BitmapDrawable(resources, imageManager.gaussianBlur(25, bgBitmap))
                    val preBg = if (bgCacheMap["PRE_BG"] == null) curBg else bgCacheMap["PRE_BG"]
                    val options = RequestOptions().placeholder(preBg).diskCacheStrategy(DiskCacheStrategy.NONE).skipMemoryCache(true)
                    Glide.with(this@CinemaDetailActivity).load(bgBitmap).apply(options).transition(DrawableTransitionOptions.withCrossFade(1000)).into(cinema_detail_moviebg)
                    bgCacheMap["PRE_BG"] = curBg
                }
            }
        }
    }
           

本例中使用Glide架構加載圖檔，因為加載的是網絡url，在使用高斯模糊的時候我們需要使用方法将url轉為bitmap，因為是網絡，我們不能再主線程裡完成，是以需要新開一個線程，在Glide中，可以設定一個占位符，即網絡圖檔加載之前的預設圖檔，然後在加載圖檔時可以使用transition進行淡入淡出，這裡我們建立一個Map來緩存上一張圖檔的背景圖檔，然後當做下一張圖檔的占位符，便可以實作背景淡入淡出效果。

更多Android進階技術，面試資料系統整理分享，職業生涯規劃，産品，思維，行業觀察，談天說地。可以加Android架構師群；701740775。