一步步实现一个SlidingTabLayout

一.继承HorizontalScrollView ，实现基本的HorizontalScrollView

1. 实现功能：点击MySlindingTabLayout中的子控件，让该控件滑动到最左侧
2. 实现步骤
   1. 因为HorizontalScrollView 只能有一个子控件，所以创建一个 LinearLayout mViewContainer用于存放所有子控件
   2. 编写scrollToTab方法，实现功能

   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());
   }
   

   3.给每一个child设置点击监听，然后在监听器里调用该该函数即刻。
3. 改善
   给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

1. 实现功能：MySlidingTabStrip 不仅包含所有子控件，还包含下划线指示器
2. 在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

1. 实现功能:根据ViewPager中的tilte，创建MySlindingTabLayout中的子View,并监听ViewPager的滑动，实现MySlindingTabLayout的滑动和MySlidingTabStrip知识器的滑动
2. 绑定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) {

            }
        });
    }

2. 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);
    }

四.最终的代码

MySlindingTabLayout

五.总结

任何一个整体的系统都是由一个个的信息组块构成的，我们在学习的时候首先

1. 了解整体，将整体拆分成单个的组块
2. 按照需求学习其中的组块
3. 最后根据自己的理解重组组块，构成整体