手把手教你用RecyclerView实现猫眼电影选择效果

2022-05-19 02:54:15

一、简介

在官方推出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参数为下图

图片宽度+图片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可见便停止了，而无法移动到中间。

我们通过查询，在*上找到了实现思路，自定义一个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。