ezgif-5-efd0e04e57.gif
效果如图展示：
1.TabLayout 跟着列表移动，直到滚到顶部
2.列表滚动到对应的内容上时，TabLayout会自动切换
3.点击TabLayout上任一选项时，列表会自动滚动到相应内容的位置
该代码在我github上一个开源中的例子，需要源码可以去看看，实现的思路如下
需要组件:RecyclerView + TabLayout
RecyclerView mRvDetail;
TabLayout mTlQuickLeader;
//....省略对控件的初始化
实现TabLayout跟着列表移动，代码如下：
//初始化tab的滚动事件
mRvDetail.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView,int dx,int dy) {
super.onScrolled(recyclerView, dx, dy);
//mItemProvider.tabLayoutRectItem 是在RecyclerView上的一个占位item
int bindPosition = mDelegate.getItemManager()
.getContentStartIndex(mItemProvider.tabLayoutRectItem);
int showStartPosition = recyclerView
.getChildAdapterPosition(recyclerView.getChildAt(0));
int showEndPosition = recyclerView
.getChildAdapterPosition(recyclerView.getChildAt(recyclerView.getChildCount() -1));
if(bindPosition < showStartPosition){
mTlQuickLeader.setVisibility(View.VISIBLE);
setQuickLeaderY(0);
}else if(bindPosition > showEndPosition){
mTlQuickLeader.setVisibility(View.INVISIBLE);
}else{
mTlQuickLeader.setVisibility(View.VISIBLE);
int bindIndex = bindPosition - showStartPosition;
View view = recyclerView.getChildAt(bindIndex);
setQuickLeaderY(
Math.max(view.getTop() + getResources().getDisplayMetrics().density *10,0));
}
}
});
//实现tabLayout控件的移动
private void setQuickLeaderY(float y){
mTlQuickLeader.setY(y);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
if(y ==0){
mTlQuickLeader.setElevation(getResources().getDisplayMetrics().density *3);
}else{
mTlQuickLeader.setElevation(0);
}
}
}
这一部分的代码实际就是为RecyclerView做OnScrollListener，通过检测对应的占位控件在哪里而不断修改TabLayout 的y值，最终置顶。
实现列表滚动，TabLayout会自动切换，代码如下：
/*** 位置提供，划分每一个tab所包含的范围*/
public interface OnPositionProvider{
/**
* @param tabIndex 指定tab的下标
* @return 获取tab所管的范围组，例：返回[1,5]意思从第二个item到第5个item的范围
*/
int[] getTabManagerScrop(int tabIndex);
}
mRecyclcerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView,int newState) {
super.onScrollStateChanged(recyclerView, newState);
mCurState = newState;
}
@Override
public void onScrolled(RecyclerView recyclerView,int dx,int dy) {
super.onScrolled(recyclerView, dx, dy);
if(mCurState == RecyclerView.SCROLL_STATE_IDLE){
return;
}
int showCount = recyclerView.getChildCount();
if(showCount ==0){
return;
}
//当前recycler显示的第一个item的position
int showStartPosition = recyclerView
.getChildAdapterPosition(recyclerView.getChildAt(0));
//显示的最后一个item的position
int showEndPosition = recyclerView
.getChildAdapterPosition(recyclerView.getChildAt(showCount -1));
int bestPosition =0;
int curShowContentHeight =0;
boolean isFullContent =false;
for(int i =0;i < mTabLayout.getTabCount();i++){
int[] scrop =mPositionProvider.getTabManagerScrop(i);
int startScrop = scrop[0]; //获取tab所包含范围组的第一个item的position
int endScrop = scrop[1]; //范围组最后一个item的position
//还没有到达下一层的内容范围,不需要再往下判断
if(showEndPosition < startScrop){
break;
}
//说明已经过了当前结点的选择范围，直接忽略当前的
if(showStartPosition > endScrop){
continue;
}
//计算出内容在recyclerView的显示上占的position
int measureStartPosition = Math.max(startScrop,showStartPosition);
int measureEndPosition = Math.min(endScrop,showEndPosition);
//计算在recyclerView已展示的view 的下标，并且显示的item数量
int measureStartIndex = measureStartPosition - showStartPosition;
int measureCount = measureEndPosition - measureStartPosition +1;
int top = recyclerView.getChildAt(measureStartIndex).getTop();
int bottom = recyclerView.getChildAt(
measureStartIndex + measureCount -1).getBottom();
//计算出显示内容的高度
int tempHeight = bottom - top;
//若最底部和最底部的item有超过屏幕未显示的部分，需要进行减去
int topInsert = Math.min(top,0);
int bottomInsert = bottom -mRecyclcerView.getHeight();
bottomInsert = Math.max(bottomInsert,0);
tempHeight = tempHeight + topInsert - bottomInsert;
//判断是否当前内容范围是否完全显示在屏幕中，如果全部展示，则tabLayout忧先选择在当前的范围
if(measureCount == endStrop - startScrop +1
&& topInsert ==0 && bottomInsert ==0){
isFullContent =true;//说明整个内容已经展示在屏幕中
curShowContentHeight = tempHeight;
bestPosition = i;
continue;
}
if(isFullContent){//说明上一个是完整内容显示，但当前的已经不是完整内容,直接跳过
break;
}
if(curShowContentHeight < tempHeight){//内容比上次的内容占比相对多
curShowContentHeight = tempHeight;
bestPosition = i;
}else{//内容没展示完整,内容占比没有多过，则说明不需要往下面判断了
break;
}
}
changeTabIndex(bestPosition);
}});
}
//改变当前tabLayout所选中的tab
private void changeTabIndex(int tabIndex){
if(mCurSelectionIndex == tabIndex){
return;
}
mCurSelectionIndex = tabIndex;
mTabLayout.getTabAt(mCurSelectionIndex).select();
}
该实现也是监听RecyclerView的滚动事件，滚动到对应的范围内会做tab的切换
切换规则如下:
1.优先选中在屏幕中内容展示完整的组的tab，若一个界面中出现多个内容展示完整的组，则以下面的为优先
2.若都没展示完整，则优先选取在屏幕中展示内容占比最多的
3.若都没有任意内容组展示在屏幕中，则选中第一个
实现点击TabLayout，代码如下：
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
if(mCurState == RecyclerView.SCROLL_STATE_IDLE){
onTabClick(tab.getPosition());
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
/**
* tab被点击
* @param tabIndex tab的下标
*/
private void onTabClick(int tabIndex){
mCurSelectionIndex = tabIndex;
int[] scrop =mPositionProvider.getTabManagerScrop(tabIndex);
int startLocation = scrop[0];
((LinearLayoutManager)mRecyclcerView.getLayoutManager())
.scrollToPositionWithOffset( startLocation,mTabLayout.getHeight());
}
该实现比较简单，添加OnTabSelectedListener则可以监听tab的切换，然后使recyclerView移动到对应的内容即可
网友评论