这天下班前,老板找到小庄:有个页面要优化,小需求,你跟进一下。 小庄:好的老板! 他看了看时间,忐忑地翻出原型,看到了这样一个页面:
思索片刻后,小庄熟练地打开了某搜索引擎,没有找到合适的轮子,小庄知道软件开发的第一步必须是先进行需求分析和设计,而不是撸起袖子一把梭。于是他决定先分析下功能并整理思路。
预警:本文非常啰嗦,而且没有干货(害怕.jpg)
页面的大致功能:
某一个项的时间线view,其中有哪些细节呢?
小庄现在已经有了基本的思路和知识储备,他打开IDE准备动手编码了。不过软件开发是迭代的过程,即使是这样的一个小需求,他也打算先从实现一个简单的版本开始。
第一个版本,小庄打算只实现画出圆和线的形状,没有状态也没有颜色,主要为了验证自己的想法是否可行,具体的实现需要做以下几个内容:
radius
:用于确定圆的半径offset
:用于表示圆点到item
顶部的距离getItemOffsets
中留出绘制整个时间线的空间,即item
的左边距class FirstVerTimeline : RecyclerView.ItemDecoration() {
private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
var radius = 8f
var offset = 15
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDraw(c, parent, state)
val count = parent.childCount
for (i in 0 until count) {
// 获取当前的itemView
val itemView = parent.getChildAt(i)
// 整个轴线的x坐标都是相同的
val xPosition = radius
// 画上线。第一个item不画
if (i != 0) {
c.drawLine(xPosition, itemView.top.toFloat(),
xPosition, itemView.top.toFloat() + offset, paint)
}
// 画下线。最后一个item不画
if (i != count - 1) {
c.drawLine(xPosition, itemView.top + radius * 2 + offset,
xPosition, itemView.bottom.toFloat(),paint)
}
// 画圆
c.drawCircle(xPosition, itemView.top + offset + radius, radius, paint)
}
}
override fun getItemOffsets(outRect: Rect, view: View, : RecyclerView, state: RecyclerView.State) {
super.getItemOffsets(outRect, view, parent, state)
// 设置item在左边的偏移量
outRect.left = radius.toInt() * 2
}
}
现在我们可以来定义一个虚拟的数据源Record
,把这个ItemDecoration
应用到一个RecyclerView
上康康效果:
rv_timeline1.adapter = RecordAdapter(ArrayList<Record>())// 省略构造假数据
rv_timeline1.addItemDecoration(FirstVerTimeline())
复制代码
已经初具规模了!只是时间线和文字之间挤了一点,我们只需要加上一些合适的padding,换一下测试数据,看起来就会像真的一样了!
为了从图1到达图2,我们需要做:
paddingLeft
和paddingRight
属性,用来表示轴线的左右paddinggetItemOffsets
为outRect.left = paddingLeft + paddingRight + radius.toInt() * 2
,留出偏移量的位置xPosition
的初始值为radius + paddingLeft
,改变轴线的x坐标到这里第一个版本就算完成啦,第二个版本会有什么新功能呢
小庄打算在第二版里实现状态的不同颜色。为了实现这个需求,他陷入了深深的沉思:
item
还需要知道上一个item
的颜色,干脆直接把整个数据源列表data
传入ItemDecoration
好了var color: (item: T) -> Int
,实现这个属性就可以让使用者通过数据状态设置想要的颜色了函数类型是kotlin(或者说函数式编程)的特性之一。如果是Java的话可以考虑用模板模式实现,即定义一个抽象方法让子类去重写
class SecondVerTimeline<T> : RecyclerView.ItemDecoration() {
// 其他属性...
var data: List<T> = ArrayList() //-->这里有更新,定义了数据源
var color: (item: T) -> Int = { _ -> Color.GRAY } //-->这里有更新,通过这个属性设置颜色选择策略
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDraw(c, parent, state)
val count = parent.childCount
for (i in 0 until count) {
// ...
val adapterPosition = parent.getChildAdapterPosition(itemView) //-->这里有更新,获取当前项的真正位置
val item = data[adapterPosition] //-->这里有更新,获取当前项的数据源
// 画上线。第一个item不画
if (adapterPosition != 0) {
paint.color = color(data[adapterPosition - 1]) //-->这里有更新,设置上线的颜色
c.drawLine(...)
}
paint.color = color(item) //-->这里有更新,设置圆和下线的颜色
// 画下线。最后一个item不画
if (adapterPosition != data.size - 1) {//-->这里有更新,改用数据源的大小判断是否为最后一个item
c.drawLine(...)
}
// 画圆...
}
}
// getItemOffsets...
}
【Android进阶学习视频】、【全套Android面试秘籍】关注我【主页简介】查看免费领取方式
代码中可能需要注意的点:
data数据源
获取到上一个item
,并用color属性
获得其状态对应的颜色这一个item
的颜色parent.childCount
获取到的子项数量指的是屏幕中可见的部分,必须要用parent.getChildAdapterPosition
获取到该项在列表中的真正位置,才能确定下线要不要画。否则会出现【当前屏幕上可见的最后一项不是真正的最后一项,但它却没有下线,但向下滑动后它又有下线了】的尴尬场景item
的方法,从count - 1
变为了data.size - 1
,用数据源的大小判断,比count
更加准确(原因同上一条)使用时也需要有一些变化:
data
设置给ItemDecoration
color
属性设置颜色策略val secondVerTimeline = SecondVerTimeline<Record>()
secondVerTimeline.data = records
secondVerTimeline.color = { item ->
when (item.status) {
1 -> color1
2 -> color2
...
}
}
rv_timeline2.addItemDecoration(secondVerTimeline)
然后就可以运行看一下效果了:
哇哦,鹅妹子嘤,这样就已经实现根据状态转变颜色的功能了!第二版的功能也圆满实现!
后来小庄又根据UI一顿修修改改,很快就完成了这个需求~但是小庄是一个有追求的程序员,他开始思考起了这个代码的扩展性和通用性如何。不想不要紧,一想发现根本没有鸭!如果产品想要把圆点变成图片怎么办?或者产品想要更随风飞翔自由是方向呢?
于是他想找个时间完善改进一下这个ItemDecoration
,最好能应对产品的所有需求!具体升级内容请看下集~
然而没有什么设计能做到一劳永逸,软件工作中唯一不变的就是变化,同时我们也不应该为了应对所谓的“未来可能发生的改动”而过度设计
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。