这段时间已经在连续两个项目中被产品经理要求实现这样一个需求,就是选中的horizontalScrollview中的item要永远展示在屏幕中间位置。
先看下效果图
吐槽
在第一次接到这个需求时,我的思路其实很混乱,写了一堆计算代码,再加上大量自测才完成了这个需求。可是在完成这个需求后,我是没法清楚地表达出自己的实现的,也就是我写的这段代码其实对我个人成长来说是无意义的,我也没有想到自己会再碰到这样的需求。
直到在最近一次的需求评审上产品经理居然真的就又提出了这个需求,我的第一反应是这个需求是不能接的,这个开发需要大量的时间。可是同组ios开发却质疑:“这个需求我们之前不是实现过吗?方法拿过来用就行了呀”。我当时觉得非常不好意思,我真的不好意思说我写的代码没法复用。。
于是,痛定思痛,我在思路清晰的时候好好想了下这个需求的实现,其实还是非常简单的!
代码实现
我们不是要把选中的item永远保持在horizontalScrollview中间吗?那只要在选中了item之后,scrollTo到屏幕中间就行了呀。
fun onClicked(index: Int) {
if (index == -1) {
return
}
this.post({
val position = index
val itemView = linear.getChildAt(position)
val itemWidth = itemView.width
val screenWidth = CommonUtil.getScreenWidth(context)
val newPosition = itemView.left - (screenWidth / 2 - itemWidth / 2)
val scrollBy = newPosition - lastPosition
lastPosition = newPosition
smoothScrollBy(scrollBy, 0)
})
}
这里封装了一个自定义的HorizontalScrollView,只需要addView到这个自定义的HorizontalScrollView就可以了,并不需要像之前那样add到HorizontalScrollView的LinearLayout中。来看下完整代码:
class CenterShowHorizontalScrollView(context: Context, attrs: AttributeSet) : HorizontalScrollView(context, attrs) {
val linear: LinearLayout
var lastPosition = 0
init {
linear = LinearLayout(context)
linear.orientation = LinearLayout.HORIZONTAL
val params = LinearLayout.LayoutParams(
FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.MATCH_PARENT)
params.leftMargin = CommonUtil.dp2px(context, 15f)
linear.gravity = Gravity.CENTER_VERTICAL
this.addView(linear, params)
}
fun onClicked(index: Int) {
if (index == -1) {
return
}
this.post({
val position = index
val itemView = linear.getChildAt(position)
val itemWidth = itemView.width
val screenWidth = CommonUtil.getScreenWidth(context)
val newPosition = itemView.left - (screenWidth / 2 - itemWidth / 2)
val scrollBy = newPosition - lastPosition
lastPosition = newPosition
smoothScrollBy(scrollBy, 0)
})
}
fun removeAllItemViews() {
linear.removeAllViews()
}
fun addItemView(itemView: View, params: LinearLayout.LayoutParams) {
linear.addView(itemView, params)
}
}
在xml中这样引用:
<ctrip.android.tour.priceCalendar.component.CenterShowHorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/multiline_layout"
android:background="#ffffff"
android:scrollbars="none">
</ctrip.android.tour.priceCalendar.component.CenterShowHorizontalScrollView>
在java文件中注意在addView到这个自定义的HorizontalScrollView中时,要调用addItemView方法。然后在选中item时,调用onClicked方法。