一.继承HorizontalScrollView ，实现基本的HorizontalScrollView
- 实现功能：点击MySlindingTabLayout中的子控件，让该控件滑动到最左侧
- 实现步骤
- 因为HorizontalScrollView 只能有一个子控件，所以创建一个 LinearLayout mViewContainer用于存放所有子控件
- 编写scrollToTab方法，实现功能
3.给每一个child设置点击监听，然后在监听器里调用该该函数即刻。public void scrollToTab1(int childPosition) { int childeCount = mViewContainer.getChildCount(); if (childPosition < 0 || childPosition >= childeCount) { return; } View view = mViewContainer.getChildAt(childPosition); int left=view.getLeft(); //smoothScrollTo(left,getScrollY());平滑滑动 scrollTo(left,getScrollY()); } - 改善
给scollToTab增加一个偏移量，使偏移更加灵活，比如你让被点击的按钮居中
public void scrollToTab(int childPosition) {
int childeCount = mViewContainer.getChildCount();
if (childPosition < 0 || childPosition >= childeCount) {
return;
}
View view = mViewContainer.getChildAt(childPosition);
int left=view.getLeft()+mOffset;
//smoothScrollTo(left,getScrollY());
scrollTo(left,getScrollY());
}
二. 将mViewContainer独立成一个单独的控件MySlindingTabStrip
- 实现功能：MySlidingTabStrip 不仅包含所有子控件，还包含下划线指示器
- 在MySlidingTabStrip的onDraw()中绘制指示器
注意
因为继承ViewGroup的onDraw方法是不被 调用的，所以必须先调用 setWillNotDraw(false)方法
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
View child=getChildAt(mPositionClicked);
int left=child.getLeft();
int right=child.getRight();
canvas.drawLine(left,child.getBottom(),right,child.getBottom(),mPaint);
}
三. 连接MySlindingTabLayout与ViewPager
- 实现功能:根据ViewPager中的tilte，创建MySlindingTabLayout中的子View,并监听ViewPager的滑动，实现MySlindingTabLayout的滑动和MySlidingTabStrip知识器的滑动
- 绑定ViewPager
public void setViewPater(ViewPager viewPager){
if(viewPager==null){
return;
}
mViewPager=viewPager;
PagerAdapter adapter = viewPager.getAdapter();
for(int i = 0; i< adapter.getCount();i++){
String titles= (String) adapter.getPageTitle(i);
Button textView=new Button(getContext());
textView.setText(titles);
ViewGroup.LayoutParams layoutParams=new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
putView(textView,layoutParams);
}
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
scrollToTab(position,positionOffset);
mMySlidingTabStrip.onViewPagerChange(position,positionOffset);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
- ViewPager滑动时，MySlidingTabStrip做出变化
public void onViewPagerChange(int positionChoosed, float positionOffset) {
mPositionClicked = positionChoosed;
mPositionOffset = positionOffset;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
View child = getChildAt(mPositionClicked);
View nextChild = getChildAt(mPositionClicked+1);
int left = child.getLeft();
int right = child.getRight();
// Draw the selection partway between the tabs
//从SlidingTabLayout copy过来的，这个计算太巧妙了
if(mPositionClicked<getChildCount()-1) {
View nextTitle = getChildAt(mPositionClicked + 1);
int nextTitleLeft = nextTitle.getLeft();
left = (int) (mPositionOffset * nextTitleLeft +
(1.0f - mPositionOffset) * left);
int nextTitleRight = nextTitle.getRight();
right = (int) (mPositionOffset * nextTitleRight +
(1.0f - mPositionOffset) * right);
}
canvas.drawLine(left, child.getBottom(), right, child.getBottom(), mPaint);
}
四.最终的代码
五.总结
任何一个整体的系统都是由一个个的信息组块构成的，我们在学习的时候首先
- 了解整体，将整体拆分成单个的组块
- 按照需求学习其中的组块
- 最后根据自己的理解重组组块，构成整体
