github地址

开源项目的学习方法

从调用函数开始，抓住主要的调用函数调用块

总体流程

image

1. SlidingTabLayout.setViewPager

   public void setViewPager(ViewPager viewPager) {
         viewPager.setOnPageChangeListener(new InternalViewPagerListener());
         populateTabStrip();
    
 }

1. InternalViewPagerListener
   根据页面的偏移
   1. 交给TabStrip处理指示线的滑动
   2. SlidingTabLayout滑动到合适的位置

mTabStrip.onViewPagerPageChanged(position, positionOffset);
View selectedTitle = mTabStrip.getChildAt(position);
int extraOffset = (selectedTitle != null)? (int) (positionOffset * selectedTitle.getWidth())
                    : 0;
scrollToTab(position, extraOffset);

2. populateTabStrip
   1. 创建所有Tab按钮
   for (int i = 0; i < adapter.getCount(); i++) {创建Tab按钮 }
   2. tabView.setOnClickListener(tabClickListener);
   点击某个按钮，就像那个按钮对应的页面设置为当前页面

   private class TabClickListener implements View.OnClickListener {
       @Override
       public void onClick(View v) {
           for (int i = 0; i < mTabStrip.getChildCount(); i++) {
               if (v == mTabStrip.getChildAt(i)) {
                   mViewPager.setCurrentItem(i);
                   return;
               }
           }
       }
   }
   
   

2.SlidingTabStrip

负责标签和底部下滑先，分割线，指示线的绘制

1. 构造函数
   初始了各种宽度和颜色
2. 对页面偏移的处理
   赋值给全局变量，然后重绘

    void onViewPagerPageChanged(int position, float positionOffset) {
        mSelectedPosition = position;
        mSelectionOffset = positionOffset;
        invalidate();
    }

3. onDraw

• 绘制指示器
  绘制横线的方式可以借鉴
• 绘制底部横线
• 绘制竖直分割线

注意

1. 每次滑动ViewPager的页面，会调用onViewPagerPageChanged,从而导致SlidingTabStrip重绘
2. SlidingTabStrip中是负责所有的视图元素的绘制，SmartTabLayout只是外部的控制器

总结

1. SlidingTagLayout负责滑动
2. SmartTabLayout负责标签按钮及其各种线条的绘制
3. 涉及到的都是简单的绘制知识和数学知识，唯一有一点意思的是
   1. 根据偏移量SlidingTabLayout的偏移计算
   2. 根据偏移量绘制指示线的位置计算