手把手教你用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來緩存上一張圖片的背景圖片，然后當做下一張圖片的占位符，便可以實現背景淡入淡出效果。