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

1、簡介

在官方推出RecyclerView 控件以後，愈來愈多的人都使用它代替以前的ListView。除了最普通的列表顯示，RecyclerView還能夠其餘的不少效果，例如Banner等。在最近的一個電影票平臺項目中，使用RecyclerView實現了仿貓眼的電影選擇控件，以下圖所示：

以上圖爲例，咱們的需求以下：

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

2、實現思路

咱們一步步實現咱們的需求

（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來緩存上一張圖片的背景圖片，而後當作下一張圖片的佔位符，即可以實現背景淡入淡出效果。