MyTabLayout使用

MyTabLayout是我们经常使用的一个控件，结合viewpager+fragment使用，模块化、可复用性更高
tablayout基本使用流程如下：

  adapter = new BaseTabFragmentAdapter<>(getSupportFragmentManager());
        ArrayList<BaseFragment> fragments = new ArrayList<>();
        viewPager.setAdapter(adapter);
        commentListFragment = new CommentListFragment();
        Bundle bundle = new Bundle();
        bundle.putString(ID,id);
        commentListFragment.setArguments(bundle);
        fragments.add(commentListFragment);

        favoriteFragment = new FavoriteFragment();
        Bundle userBundle = new Bundle();
        userBundle.putString(USERNAME,getIntent().getStringExtra(USERNAME));
        favoriteFragment.setArguments(userBundle);
        fragments.add(favoriteFragment);

        adapter.setFragments(getResources().getStringArray(R.array.comment_home),fragments);
        tabLayout.setupWithViewPager(viewPager);

        for(int i = 0; i < getResources().getStringArray(R.array.comment_home).length; i++){
            if(i == 0) {
                tabLayout.getTabAt(i).setCustomView(R.layout.custom_comment_show).setText(getResources().getString(R.string.comment_num, 0));
            }else{
                tabLayout.getTabAt(i).setCustomView(R.layout.custom_comment_show).setText(getResources().getString(R.string.favorite_num, 0));
            }
        }
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if(Math.abs(verticalOffset) >= clGroup.getMeasuredHeight()){
                    llGroup.setVisibility(View.VISIBLE);
                }else{
                    llGroup.setVisibility(View.GONE);
                }

                if(Math.abs(verticalOffset) < appBarLayout.getTotalScrollRange()){
                    shadowLayout.setShadowColor(ContextCompat.getColor(getBaseContext(),R.color.whiteColor));
                }else{
                    shadowLayout.setShadowColor(Color.parseColor("#14000000"));
                }
            }
        });

如上图代码所示，MyTabLayout里面封装了setCustomView方法，这个用于设定MyTabLayout子元素布局，用来开发自定义的显示

翻阅MyTabLayout的源码我们发现，
MyTabLayout一些属性获取：

    // Disable the Scroll Bar
    setHorizontalScrollBarEnabled(false);

    // Add the TabStrip
    mTabStrip = new SlidingTabStrip(context);
    super.addView(mTabStrip, 0, new HorizontalScrollView.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT));

    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TabLayout,
            defStyleAttr, R.style.Widget_Design_TabLayout);

    mTabStrip.setSelectedIndicatorHeight(
            a.getDimensionPixelSize(R.styleable.TabLayout_tabIndicatorHeight, 0));
    mTabStrip.setSelectedIndicatorColor(a.getColor(R.styleable.TabLayout_tabIndicatorColor, 0));

    mTabPaddingStart = mTabPaddingTop = mTabPaddingEnd = mTabPaddingBottom = a
            .getDimensionPixelSize(R.styleable.TabLayout_tabPadding, 0);
    mTabPaddingStart = a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingStart,
            mTabPaddingStart);
    mTabPaddingTop = a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingTop,
            mTabPaddingTop);
    mTabPaddingEnd = a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingEnd,
            mTabPaddingEnd);
    mTabPaddingBottom = a.getDimensionPixelSize(R.styleable.TabLayout_tabPaddingBottom,
            mTabPaddingBottom);

    mTabTextAppearance = a.getResourceId(R.styleable.TabLayout_tabTextAppearance,
            R.style.TextAppearance_Design_Tab);

    // Text colors/sizes come from the text appearance first
    final TypedArray ta = context.obtainStyledAttributes(mTabTextAppearance,
            android.support.v7.appcompat.R.styleable.TextAppearance);
    try {
        mTabTextSize = ta.getDimensionPixelSize(
                android.support.v7.appcompat.R.styleable.TextAppearance_android_textSize, 0);
        mTabTextColors = ta.getColorStateList(
                android.support.v7.appcompat.R.styleable.TextAppearance_android_textColor);
    } finally {
        ta.recycle();
    }

    if (a.hasValue(R.styleable.TabLayout_tabTextColor)) {
        // If we have an explicit text color set, use it instead
        mTabTextColors = a.getColorStateList(R.styleable.TabLayout_tabTextColor);
    }

    if (a.hasValue(R.styleable.TabLayout_tabSelectedTextColor)) {
        // We have an explicit selected text color set, so we need to make merge it with the
        // current colors. This is exposed so that developers can use theme attributes to set
        // this (theme attrs in ColorStateLists are Lollipop+)
        final int selected = a.getColor(R.styleable.TabLayout_tabSelectedTextColor, 0);
        mTabTextColors = createColorStateList(mTabTextColors.getDefaultColor(), selected);
    }

    mRequestedTabMinWidth = a.getDimensionPixelSize(R.styleable.TabLayout_tabMinWidth,
            INVALID_WIDTH);
    mRequestedTabMaxWidth = a.getDimensionPixelSize(R.styleable.TabLayout_tabMaxWidth,
            INVALID_WIDTH);
    mTabBackgroundResId = a.getResourceId(R.styleable.TabLayout_tabBackground, 0);
    mContentInsetStart = a.getDimensionPixelSize(R.styleable.TabLayout_tabContentStart, 0);
    mMode = a.getInt(R.styleable.TabLayout_tabMode, MODE_FIXED);
    mTabGravity = a.getInt(R.styleable.TabLayout_tabGravity, GRAVITY_FILL);

标记线的绘制通过：

  @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);

            final View targetView = getChildAt(mSelectedPosition);


            int mSelectedIndicatorWidth = 0;
            if(null != targetView && targetView instanceof TabView){
                TextView tabView = ((TabView) targetView).mTextView;

                mSelectedIndicatorWidth = tabView.getWidth();
            }

            if(mSelectedIndicatorWidth > 0) {
                if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {

                    if (mSelectedIndicatorWidth != 0) {
                        int maxWidth = mIndicatorRight - mIndicatorLeft;
                        /*if (maxWidth > mSelectedIndicatorWidth)*/ {
                            mIndicatorLeft += (maxWidth - mSelectedIndicatorWidth) / 2;
                            mIndicatorRight -= (maxWidth - mSelectedIndicatorWidth) / 2;
                        }
                    }

                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        canvas.drawRoundRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                                mIndicatorRight, getHeight(), 5,5,mSelectedIndicatorPaint);
                    }else {
                        canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                                mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
                    }
                }
            }else{
                if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {

                    canvas.drawRect((mIndicatorLeft+mIndicatorRight)/2-DisplayHelper.dpToPx(33)/2, getHeight() - mSelectedIndicatorHeight,
                            (mIndicatorLeft+mIndicatorRight)/2+DisplayHelper.dpToPx(33)/2, getHeight(), mSelectedIndicatorPaint);
                    /*canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                            mIndicatorRight, getHeight(), mSelectedIndicatorPaint);*/
                }
            }
        }