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

简介: 一、简介在官方推出RecyclerView 控件之后,越来越多的人都使用它代替之前的ListView。除了最普通的列表显示,RecyclerView还可以其他的很多效果,例如Banner等。

一、简介

在官方推出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来缓存上一张图片的背景图片,然后当做下一张图片的占位符,便可以实现背景淡入淡出效果。

更多Android进阶技术,面试资料系统整理分享,职业生涯规划,产品,思维,行业观察,谈天说地。可以加Android架构师群;701740775。

相关文章
|
20天前
|
API
英雄联盟数据比分直播网定制开发源码
英雄联盟数据比分直播网/APP定制开发源码,需先处理实时与赛果数据。赛果数据通过API接口 `/api/result/lol` 获取,涵盖队伍经济、补刀、大小龙、水晶数及队员经济、经验、等级等详尽信息。支持WebSocket推送与变化信息接口拉取,确保数据完整无漏。
|
5月前
|
JSON 人工智能 数据格式
在PAI Artlab一键实现欧洲杯粉丝专属贴纸制作
嘿,各位足球狂热分子,准备好迎接欧洲杯的狂欢了吗?你的加油装备还缺了点啥?别担心,ArtLab平台一键贴纸生成工作流,来给这足球盛宴加点料啦!快来,让我们一起把激情和创意混搭出新高度!
在PAI Artlab一键实现欧洲杯粉丝专属贴纸制作
|
人工智能 开发者
人人当导演 | 魔搭社区一站式电影短片制作
人人当导演 | 魔搭社区一站式电影短片制作
[视频]高端微课|W01.初尝万彩动画——人人都能制作动画版微课!
或许,你也曾想抛弃PPT那万年不变的动画模式!或许,你也想让你的微课提升一个档次!或许,你也羡慕网上那些科普类动画的的炫酷!
98 0
[视频]微课设计零基础入门 | 7.微课PPT的制作《用部首查字法查字典》
ppt只是一种可选的媒介,完全可以用其他工具代替。在后面的课程中,我们还会教大家用动画来制作微课。但由于大部分老师都对ppt熟悉,所以我们这里还是用ppt来做演示。
80 0
|
数据挖掘 Python
Python数据分析系列03-豆瓣电影T250分析
很多人在羡慕别人身材好的时候,却不知道别人有多自律,然而,自己明明前一刻再提醒自己,一定要努力锻炼出好的身材,但是下一秒却没有办法控制自己的食欲。 总感觉自己有很多的才华,却没有机会去施展,可是却没有发现自己没有去努力的表现自己。
Python数据分析系列03-豆瓣电影T250分析
|
弹性计算 运维 监控
实战案例—南瓜电影 | 学习笔记
快速学习实战案例—南瓜电影
|
机器学习/深度学习 人工智能 算法
谷爱凌同学人像动漫化体验之旅
墨理此次借助人像动漫化-百度AI开放平台为各位读者送上爱凌同学的好看动漫
309 0
谷爱凌同学人像动漫化体验之旅
|
搜索推荐
小说源码的“上瘾”设计,不知不觉沉浸其中
小说源码的“上瘾”设计,不知不觉沉浸其中
手把手教你做一个电影网站 可直接在线播放
现在大家在网上看电影很方便了,因为电影网站多如牛毛!那很多人在想,做电影网站难么?能否拥有一个属于自己的电影网站呢?其实真的可以,而且很简单下面我们就来手把手的教你如何做一个电影网站!因为我的空间是PHP的,只能选择PHP CMS,影视网站的CMS有很多,飞飞、苹果、海洋、PHPVOD等等,之所以...
14738 0