手把手教你用RecyclerView實現貓眼電影選擇效果
在官方推出RecyclerView 控制元件之後，越來越多的人都使用它代替之前的ListView。除了最普通的列表顯示，RecyclerView還可以其他的很多效果，例如Banner等。在最近的一個電影票平臺專案中，使用RecyclerView實現了仿貓眼的電影選擇控制元件，如下圖所示：
以上圖為例，我們的需求如下：
- 每一次滑動都讓圖片保持在中間。
- 第一張圖片的左邊距和最後一張的右邊距需要大於其他圖片的邊距使其保持在中間
- 點選某張圖片時讓其滑動到中間
- 背景實現高斯模糊
- 在切換當前電影時有一個背景淡入淡出的效果
二、實現思路
我們一步步實現我們的需求
（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引數為下圖
（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 ，此處參考教程 ofollow,noindex">教你一分鐘實現動態模糊效果 ，自定義一個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來快取上一張圖片的背景圖片，然後當做下一張圖片的佔位符，便可以實現背景淡入淡出效果。