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

栏目: Android · 发布时间: 6年前

内容简介:在官方推出RecyclerView 控件之后,越来越多的人都使用它代替之前的ListView。除了最普通的列表显示,RecyclerView还可以其他的很多效果,例如Banner等。在最近的一个电影票平台项目中,使用RecyclerView实现了仿猫眼的电影选择控件,如下图所示:以上图为例,我们的需求如下:我们一步步实现我们的需求

在官方推出RecyclerView 控件之后,越来越多的人都使用它代替之前的ListView。除了最普通的列表显示,RecyclerView还可以其他的很多效果,例如Banner等。在最近的一个电影票平台项目中,使用RecyclerView实现了仿猫眼的电影选择控件,如下图所示:

手把手教你用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的图片边距比较特殊,而其他的都是默认边距,如果不做设置,第一张和最后一张图片就无法位于正中间,如下图所示:

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

如果想要是第0位置的图片保持在中间,我们需要动态设置第0位置的图片的左边距为 (屏幕宽度-自定义ImageView图片宽度-自定义ImageView的Margin)/2 ,例如我自定义的view参数为下图

手把手教你用RecyclerView实现猫眼电影选择效果
图片宽度+图片margin为110dp,假设手机屏幕宽度为360dp,我们此时图片的左边距便设置为 (360-110)/2 = 125 dp

动态修改item的 LayoutParams ,我们不要在自定义的Adapter里直接更改,官方提供了ItemDecoration的api,可以给recyclerview的item添加装饰,我们在这里自定义一个继承 RecyclerView.ItemDecorationGalleryItemDecoration ,然后重写 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来缓存上一张图片的背景图片,然后当做下一张图片的占位符,便可以实现背景淡入淡出效果。


以上所述就是小编给大家介绍的《手把手教你用RecyclerView实现猫眼电影选择效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

乔布斯离开了,马斯克来了

乔布斯离开了,马斯克来了

[日]竹内一正 / 干太阳 / 中信出版社 / 2015-11

在电动汽车的创新上,特斯拉抓住了一个群体的独特需求,外形很酷,不烧油,智能化控制。所有的颠覆式创新都不是敲锣打鼓来的,而是隐藏在一片噪声里,马斯克给我们带来的特斯拉虽然不尽完美,但他做产品的思维和执着于未来的勇气,值得学习。埃隆•马斯克创办公司也不是为了赚钱,而是为了拯救人类和地球,电动汽车、太阳能发电、宇宙火箭,不管是哪一项都足以令一个国家付出巨大的代价去研究开发,但埃隆•马斯克却一个人在做这些......一起来看看 《乔布斯离开了,马斯克来了》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具