拼多多搜索页面html,仿拼多多搜索页面多列表联动

项目有类似的功能，在网上找了不少都不是很符合，结合起来自己做了一个，用2个recycleview就可以解决了。

主要是右边带动左边列表滚动，先看图吧：录制的不是很流畅，可以自己下下来看看

TIM图片20180905173437.gif

1.关键代码

private fun smoothMoveToPosition() {

mShopRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {

override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {

super.onScrolled(recyclerView, dx, dy)

if (mRightList[first].isHeader) {

val view = mShopLinearLayoutManager.findViewByPosition(first)

if (view != null) {

//如果此组名item顶部和父容器顶部距离大于等于title的高度,则设置偏移量

if (view.top >= tHeight) {

right_title.y = (view.top - tHeight).toFloat()

} else {

//否则不设置

right_title.y = 0f

}

}

}

//因为每次滑动之后,右侧列表中可见的第一个item的position肯定会改变,并且右侧列表中可见的第一个item的position变换了之后,

//才有可能改变右侧title的值,所以这个方法内的逻辑在右侧可见的第一个item的position改变之后一定会执行

val firstPosition = mShopLinearLayoutManager.findFirstVisibleItemPosition()

if (first != firstPosition && firstPosition >= 0) {

//给First赋值

first = firstPosition

//不设置Y轴的偏移量

right_title.y = 0f

//判断如果右侧可见的第一个item是否是header，设置相应的值

if (mRightList[first].isHeader) {

right_title.text = mRightList[first].header

} else {

right_title.text = mRightList[first].t.name

}

}

/**

*遍历左边列表，列表对应的内容等于右边的title，则设置左侧对应的item高亮

*/

mLeftList.forEachIndexed { index, s ->

if (mLeftList[index] == right_title.text) {

mSearchLeftListQuickAdapter.selectItem(index)

moveToCenter(index)

}

}

//如果右边最后一个完全显示的item的position,等于bean中最后一条数据的position(也就是右侧列表拉到底了),

//则设置左侧列表最后一条item高亮

if (mShopLinearLayoutManager.findLastCompletelyVisibleItemPosition() == mRightList.size - 1) {

mSearchLeftListQuickAdapter.selectItem(mLeftList.size - 1)

moveToCenter(mLeftList.size - 1)

}

}

override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) {

super.onScrollStateChanged(recyclerView, newState)

//获取右侧title的高度

tHeight = right_title.height

}

})

}

//将当前选中的item居中,如果不加这段代码，左边的recyclerview并不会跟随滚动

private fun moveToCenter(position: Int) {

//将点击的position转换为当前屏幕上可见的item的位置以便于计算距离顶部的高度，从而进行移动居中

val childAt = mSelectedRecyclerView.getChildAt(position - mLinearLayoutManager.findFirstVisibleItemPosition())

if (childAt != null) {

val y = childAt.top - mSelectedRecyclerView.height / 2

mSelectedRecyclerView.smoothScrollBy(0, y)

}

}

2.左边adapter里面关键代码

fun selectItem(position: Int) {

tv.forEachIndexed { index, _ ->

if (position == index) {

tv[index].setTextColor(ContextCompat.getColor(mContext, R.color.colorAccent))

tv[index].setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))

} else {

tv[index].setTextColor(ContextCompat.getColor(mContext, R.color.colorPrimary))

tv[index].setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorAccent))

}

}

}

这里是循环添加adapter的TextView，因为如果循环的是数据的话，当你数据过多，那么就会有数组越界的问题，问题recycleview适配器一开始并没有那么加载出来那么多TextView，例如：一个屏幕只能看见12条数据，那么当你的数据超过12的时候一开始就会出错，循环tv就没有这个问题了。具体有需要的自己看代码吧。

参考：https://www.jianshu.com/p/82ced8707f2b

github：https://github.com/byning2012/RVandRv