Android 对PagerSlidingTabStrip进行改造之兼容圆角下划线以及长度

Posted 2022-05-03 隔壁小王66

PagerSlidingTabStrip的默认样式是

地址：https://github.com/astuetz/PagerSlidingTabStrip

这是一个比较老的tabIndicator库，改造前兼容的自定义属性

 * pstsIndicatorColor滑动指示器颜色
 * pstsUnderlineColor视图的底部的全宽线的颜色
 * pstsDividerColor选项卡之间的分隔线的颜色
 * pstsIndicatorHeight滑动指标高度
 * pstsUnderlineHeight视图的底部高度的全宽线
 * pstsDividerPadding顶部和分频器的底部填充
 * pstsTabPaddingLeftRight左，每个选项卡的右填充
 * pstsScrollOffset所选选项卡的滚动偏移量
 * pstsTabBackground每个标签的背景可拉伸，应该是一个StateListDrawable
 * pstsShouldExpand如果设置为true，每个选项卡被赋予了相同的权重，默认为false
 * pstsTextAllCaps如果为true，所有的选项卡标题将是大写，默认为true

根据需求，需要兼容这种样式：

使用PagerSlidingTabStrip以及tablayout的话，无法控制长度以及圆角，所以改造新增自定义属性如下：

 * pstsIndicatorOffset 新增，底部指示线与tab左右边界距离
 * pstsIndicatorIsRound 新增，底部指示线是否圆角
 * pstsIndicatorRoundRadius 新增，底部指示线圆角半径

代码如下：
在values中添加attrs文件中添加自定义属性

    <!--pageslidingtab的资源-->
    <declare-styleable name="PagerSlidingTabStrip">
        <attr name="pstsIndicatorColor" format="color" />
        <attr name="pstsUnderlineColor" format="color" />
        <attr name="pstsDividerColor" format="color" />
        <attr name="pstsIndicatorHeight" format="dimension" />
        <attr name="pstsUnderlineHeight" format="dimension" />
        <attr name="pstsDividerPadding" format="dimension" />
        <attr name="pstsTabPaddingLeftRight" format="dimension" />
        <attr name="pstsScrollOffset" format="dimension" />
        <attr name="pstsTabBackground" format="reference" />
        <attr name="pstsShouldExpand" format="boolean" />
        <attr name="pstsTextAllCaps" format="boolean" />
        <attr name="selectedTabTextColor" format="color" />
        <attr name="textDefaultCorlor" format="color" />
        <attr name="textTabSize" format="dimension" />
        <attr name="pstsUnderlineEqualText" format="boolean" />
        <attr name="pstsIndicatorOffset" format="dimension"/>
        <attr name="pstsIndicatorIsRound" format="boolean"/>
        <attr name="pstsIndicatorRoundRadius" format="dimension"/>
    </declare-styleable>

布局代码：

<com.xxx.view.widget.PagerSlidingTabStrip
                android:id="@+id/home_tabs"
                android:layout_width="wrap_content"
                android:layout_height="44dp"
                android:background="@color/white"
                app:pstsIndicatorColor="#00C2A7"
                app:pstsIndicatorHeight="3dp"
                app:pstsDividerColor="@color/transparent_all"
                app:pstsShouldExpand="true"
                app:pstsUnderlineColor="@color/transparent_all"
                app:pstsTabPaddingLeftRight="14dp"
                app:selectedTabTextColor="#333333"
                app:textDefaultCorlor="#C6C6C6"
                app:textTabSize="18sp"
                app:pstsIndicatorOffset="17dp"
                app:pstsIndicatorIsRound="true"
                app:pstsIndicatorRoundRadius="2dp"/>

PagerSlidingTabStrip代码如下：

package com.xiaodou.android.app.moshare.view.widget;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.os.Build;
import android.os.Parcel;
import android.os.Parcelable;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.HorizontalScrollView;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.xiaodou.android.app.moshare.R;
import com.xiaodou.android.common.util.Utils;

import java.util.Locale;


/**
 * pstsIndicatorColor滑动指示器颜色
 * pstsUnderlineColor视图的底部的全宽线的颜色
 * pstsDividerColor选项卡之间的分隔线的颜色
 * pstsIndicatorHeight滑动指标高度
 * pstsUnderlineHeight视图的底部高度的全宽线
 * pstsDividerPadding顶部和分频器的底部填充
 * pstsTabPaddingLeftRight左，每个选项卡的右填充
 * pstsScrollOffset所选选项卡的滚动偏移量
 * pstsTabBackground每个标签的背景可拉伸，应该是一个StateListDrawable
 * pstsShouldExpand如果设置为true，每个选项卡被赋予了相同的权重，默认为false
 * pstsTextAllCaps如果为true，所有的选项卡标题将是大写，默认为true
 *
 *
 *
 * pstsIndicatorOffset 新增，底部指示线与tab左右边界距离
 * pstsIndicatorIsRound 新增，底部指示线是否圆角
 * pstsIndicatorRoundRadius 新增，底部指示线圆角半径
 */

public class PagerSlidingTabStrip extends HorizontalScrollView 

    public interface IconTabProvider 
        int getPageIconResId(int position);
    

    // @formatter:off
    private static final int[] ATTRS = new int[]
            android.R.attr.textSize,
            android.R.attr.textColor
    ;
    // @formatter:on

    private LinearLayout.LayoutParams defaultTabLayoutParams;
    private LinearLayout.LayoutParams expandedTabLayoutParams;

    private final PageListener pageListener = new PageListener();
    public OnPageChangeListener delegatePageListener;

    private LinearLayout tabsContainer;
    private ViewPager pager;

    private int tabCount;

    private int currentPosition = 0;
    private int selectedPosition = 0;
    private float currentPositionOffset = 0f;

    private Paint rectPaint;
    private Paint dividerPaint;

    private int indicatorColor = 0xFF666666;
    private int underlineColor = 0x1A000000;
    private int dividerColor = 0x1A000000;

    private boolean shouldExpand = false;
    private boolean textAllCaps = true;
    private boolean isUnderlineEqualText = true;

    private int scrollOffset = 52;
    private int indicatorHeight = 8;
    private int underlineHeight = 2;
    private int dividerPadding = 12;
    private int tabPadding = 24;
    private int dividerWidth = 1;

    private int tabTextSize = 12;
    private int tabTextColor = 0xFF666666;
    private int selectedTabTextColor = 0xFF666666;
    private Typeface tabTypeface = null;
    private int tabTypefaceStyle = Typeface.NORMAL;

    private int lastScrollX = 0;

    private int tabBackgroundResId = R.drawable.background_tab;

    private Locale locale;
    private int offset=0;//指示线距离tab左右距离
    private boolean isRound=false;//指示线是否圆角
    private int radius=2;//圆角半径

    public PagerSlidingTabStrip(Context context) 
        this(context, null);
    

    public PagerSlidingTabStrip(Context context, AttributeSet attrs) 
        this(context, attrs, 0);
    

    @SuppressWarnings("ResourceType")
    public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) 
        super(context, attrs, defStyle);

        setFillViewport(true);
        setWillNotDraw(false);

        tabsContainer = new LinearLayout(context);
        tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
        tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        addView(tabsContainer);

        DisplayMetrics dm = getResources().getDisplayMetrics();

        scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
        indicatorHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);
        underlineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);
        dividerPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);
        tabPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);
        dividerWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);
        tabTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);
        offset=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, offset, dm);
        radius=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, radius, dm);
        // get system attrs (android:textSize and android:textColor)

        TypedArray a = context.obtainStyledAttributes(attrs, ATTRS);

        tabTextSize = a.getDimensionPixelSize(0, tabTextSize);
        tabTextColor = a.getColor(1, tabTextColor);

        a.recycle();

        // get custom attrs

        a = context.obtainStyledAttributes(attrs, R.styleable.PagerSlidingTabStrip);

        indicatorColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsIndicatorColor, indicatorColor);

        //tab文字选中时的颜色,默认和滑动指示器的颜色一致
        selectedTabTextColor = a.getColor(R.styleable.PagerSlidingTabStrip_selectedTabTextColor, indicatorColor);

        tabTextColor = a.getColor(R.styleable.PagerSlidingTabStrip_textDefaultCorlor, tabTextColor);
        underlineColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsUnderlineColor, underlineColor);
        dividerColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsDividerColor, dividerColor);

        tabTextSize = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_textTabSize, tabTextSize);
        indicatorHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsIndicatorHeight, indicatorHeight);
        underlineHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsUnderlineHeight, underlineHeight);
        dividerPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsDividerPadding, dividerPadding);
        tabPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsTabPaddingLeftRight, tabPadding);
        tabBackgroundResId = a.getResourceId(R.styleable.PagerSlidingTabStrip_pstsTabBackground, tabBackgroundResId);
        shouldExpand = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsShouldExpand, shouldExpand);
        scrollOffset = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsScrollOffset, scrollOffset);
        textAllCaps = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsTextAllCaps, textAllCaps);
        isUnderlineEqualText = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsUnderlineEqualText, isUnderlineEqualText);
        offset=a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsIndicatorOffset, offset);
        radius=a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsIndicatorRoundRadius, radius);
        isRound=a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsIndicatorIsRound,isRound);
        a.recycle();

        rectPaint = new Paint();
        rectPaint.setAntiAlias(true);
        rectPaint.setStyle(Style.FILL);

        dividerPaint = new Paint();
        dividerPaint.setAntiAlias(true);
        dividerPaint.setStrokeWidth(dividerWidth);

        defaultTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        expandedTabLayoutParams = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);

        if (locale == null) 
            locale = getResources().getConfiguration().locale;
        
    

    public void setViewPager(ViewPager pager) 
        this.pager = pager;

        if (pager.getAdapter() == null) 
            throw new IllegalStateException("ViewPager does not have adapter instance.");
        

        pager.setOnPageChangeListener(pageListener);

        notifyDataSetChanged();
    

    public void setOnPageChangeListener(OnPageChangeListener listener) 
        this.delegatePageListener = listener;
    

    public void notifyDataSetChanged() 

        tabsContainer.removeAllViews();

        tabCount = pager.getAdapter().getCount();

        for (int i = 0; i < tabCount; i++) 

            if (pager.getAdapter() instanceof IconTabProvider) 
                addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));
             else 
                addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
            

        

        updateTabStyles();

        getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() 

            @Override
            public void onGlobalLayout() 
                getViewTreeObserver().removeGlobalOnLayoutListener(this);
                currentPosition = pager.getCurrentItem();
                scrollToChild(currentPosition, 0);
            
        );

    

    private void addTextTab(final int position, String title) 

        TextView tab = new TextView(getContext());
        tab.setText(title);
        tab.setGravity(Gravity.CENTER);
        tab.setSingleLine();
        addTab(position, tab);
    

    private void addIconTab(final int position, int resId) 

        ImageButton tab = new ImageButton(getContext());
        tab.setImageResource(resId);

        addTab(position, tab);

    

    private void addTab(final int position, View tab) 
        tab.setFocusable(true);
        tab.setOnClickListener(new OnClickListener() 
            @Override
            public void onClick(View v) 
                pager.setCurrentItem(position);
            
        );

        tab.setPadding(tabPadding, 0, tabPadding, 0);
        tabsContainer.addView(tab, position, shouldExpand ? expandedTabLayoutParams : defaultTabLayoutParams);
    

    private void updateTabStyles() 

        for (int i = 0; i < tabCount; i++) 

            View v = tabsContainer.getChildAt(i);

            v.setBackgroundResource(tabBackgroundResId);

            if (v instanceof TextView) 

                TextView tab = (TextView) v;
                tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
                tab.setTypeface(tabTypeface, tabTypefaceStyle);
                tab.setTextColor(tabTextColor);

                // setAllCaps() is only available from API 14, so the upper case is made manually if we are on a
                // pre-ICS-build
                if (textAllCaps) 
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) 
                        tab.setAllCaps(true);
                     else 
                        tab.setText(tab.getText().toString().toUpperCase(locale));
                    
                
                if (i == selectedPosition) 
                    tab.setTextColor(selectedTabTextColor);
                
            
        

    

    public void scrollToChild(int position, int offset) 

        if (tabCount == 0) 
            return;
        

        int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset;

        if (position > 0 || offset > 0) 
            newScrollX -= scrollOffset;
        

        if (newScrollX != lastScrollX) 
            lastScrollX = newScrollX;
            scrollTo(newScrollX, 0);
        

    

    @Override
    protected void onDraw(Canvas canvas) 
        super.onDraw(canvas);

        if (isInEditMode() || tabCount == 0) 
            return;
        

        final int height = getHeight();

        // draw underline
        rectPaint.setColor(underlineColor);
        canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);

        // draw indicator line
        rectPaint.setColor(indicatorColor);

        // default: line below current tab
        View currentTab = tabsContainer.getChildAt(currentPosition);
/*        float lineLeft = currentTab.getLeft();
        float lineRight = currentTab.getRight();

        // if there is an offset, start interpolating left and right coordinates between current and next tab
        if (currentPositionOffset > 0f && currentPosition < tabCount - 1) 

            View nextTab = tabsContainer.getChildAt(currentPosition + 1);
            final float nextTabLeft = nextTab.getLeft();
            final float nextTabRight = nextTab.getRight();

            lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft);
            lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight);
        */
        float lineLeft = 0;
        float lineRight = 0;
        if (currentTab != null) 
            if (isUnderlineEqualText) 
                lineLeft = currentTab.getLeft() + tabPadding;
                lineRight = currentTab.getRight() - tabPadding;
             else 
                lineLeft = currentTab.getLeft();
                lineRight = currentTab.getRight();
            
        

        // if there is an offset, start interpolating left and right coordinates
        // between current and next tab
        if (currentPositionOffset > 0.0f && currentPosition < tabCount - 1) 
            View nextTab = tabsContainer.getChildAt(currentPosition + 1);
            final float nextTabLeft;
            final float nextTabRight;
            if (isUnderlineEqualText) 
                nextTabLeft = nextTab.getLeft() + tabPadding;
                nextTabRight = nextTab.getRight() - tabPadding;
             else 
                nextTabLeft = nextTab.getLeft();
                nextTabRight = nextTab.getRight();
            

            lineLeft = (currentPositionOffset * nextTabLeft + (1.0f - currentPositionOffset)
                    * lineLeft);
            lineRight = (currentPositionOffset * nextTabRight + (1.0f - currentPositionOffset)
                    * lineRight);
        
        if (isRound)
            canvas.drawRoundRect(new RectF(lineLeft + offset, height - indicatorHeight, lineRight - offset, height), radius,radius,rectPaint);
        else 
            canvas.drawRect(new RectF(lineLeft + offset, height - indicatorHeight, lineRight - offset, height),rectPaint);
        
        // draw divider
        dividerPaint.setColor(dividerColor);
        for (int i = 0; i < tabCount - 1; i++) 
            View tab = tabsContainer.getChildAt(i);
            canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint);
        
    

    private class PageListener implements OnPageChangeListener 

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 
            currentPosition = position;
            currentPositionOffset = positionOffset;

            scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));

            invalidate();

            if (delegatePageListener != null) 
                delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
            
        

        @Override
        public void onPageScrollStateChanged(int state) 
            if (state == ViewPager.SCROLL_STATE_IDLE) 
                scrollToChild(pager.getCurrentItem(), 0);
            

            if (delegatePageListener != null) 
                delegatePageListener.onPageScrollStateChanged(state);
            
        

        @Override
        public void onPageSelected(int position) 
            selectedPosition = position;
            updateTabStyles();
            if (delegatePageListener != null) 
                delegatePageListener.onPageSelected(position);
            
        

    

    /**
     * 底部指示线距离tab左右距离
     * @param offset
     */
    public void setIndicatorOffset(int offset)
        this.offset=Utils.dp2px(getContext(),offset);
        invalidate();
    
    public void setIndicatorColor(int indicatorColor) 
        this.indicatorColor = indicatorColor;

        invalidate();
    

    public void setIndicatorColorResource(int resId) 
        this.indicatorColor = getResources().getColor(resId);

        invalidate();
    

    public int getIndicatorColor() 
        return this.indicatorColor;
    

    public void setIndicatorHeight(int indicatorLineHeightPx) 
        this.indicatorHeight = indicatorLineHeightPx;
        invalidate();
    

    public int getIndicatorHeight() 
        return indicatorHeight;
    

    public void setUnderlineColor(int underlineColor) 
        this.underlineColor = underlineColor;
        invalidate();
    

    public void setUnderlineColorResource(int resId) 
        this.underlineColor = getResources().getColor(resId);
        invalidate();
    

    public int getUnderlineColor() 
        return underlineColor;
    

    public void setDividerColor(int dividerColor) 
        this.dividerColor = dividerColor;
        invalidate();
    

    public void setDividerColorResource(int resId) 
        this.dividerColor = getResources().getColor(resId);
        invalidate();
    

    public int getDividerColor() 
        return dividerColor;
    

    public void setUnderlineHeight(int underlineHeightPx) 
        this.underlineHeight = underlineHeightPx;
        invalidate();
    

    public int getUnderlineHeight() 
        return underlineHeight;
    

    public void setDividerPadding(int dividerPaddingPx) 
        this.dividerPadding = dividerPaddingPx;
        invalidate();
    

    public int getDividerPadding() 
        return dividerPadding;
    

    public void setScrollOffset(int scrollOffsetPx) 
        this.scrollOffset = scrollOffsetPx;
        invalidate();
    

    public int getScrollOffset() 
        return scrollOffset;
    

    public void setShouldExpand(boolean shouldExpand) 
        this.shouldExpand = shouldExpand;
        notifyDataSetChanged();
    

    public boolean getShouldExpand() 
        return shouldExpand;
    

    public boolean isTextAllCaps() 
        return textAllCaps;
    

    public void setAllCaps(boolean textAllCaps) 
        this.textAllCaps = textAllCaps;
    

    public void setTextSize(int textSizePx) 
        this.tabTextSize = textSizePx;
        updateTabStyles();
    

    public int getTextSize() 
        return tabTextSize;
    

    public void setTextColor(int textColor) 
        this.tabTextColor = textColor;
        updateTabStyles();
    

    public void setTextColorResource(int resId) 
        this.tabTextColor = getResources().getColor(resId);
        updateTabStyles();
    

    public int getTextColor() 
        return tabTextColor;
    

    public void setSelectedTextColor(int textColor) 
        this.selectedTabTextColor = textColor;
        updateTabStyles();
    

    public void setSelectedTextColorResource(int resId) 
        this.selectedTabTextColor = getResources().getColor(resId);
        updateTabStyles();
    

    public int getSelectedTextColor() 
        return selectedTabTextColor;
    

    public void setTypeface(Typeface typeface, int style) 
        this.tabTypeface = typeface;
        this.tabTypefaceStyle = style;
        updateTabStyles();
    

    public void setTabBackground(int resId) 
        this.tabBackgroundResId = resId;
        updateTabStyles();
    

    public int getTabBackground() 
        return tabBackgroundResId;
    

    public void setTabPaddingLeftRight(int paddingPx) 
        this.tabPadding = paddingPx;
        updateTabStyles();
    

    public int getTabPaddingLeftRight() 
        return tabPadding;
    

    @Override
    public void onRestoreInstanceState(Parcelable state) 
        SavedState savedState = (SavedState) state;
        super.onRestoreInstanceState(savedState.getSuperState());
        currentPosition = savedState.currentPosition;
        requestLayout();
    

    @Override
    public Parcelable onSaveInstanceState() 
        Parcelable superState = super.onSaveInstanceState();
        SavedState savedState = new SavedState(superState);
        savedState.currentPosition = currentPosition;
        return savedState;
    

    static class SavedState extends BaseSavedState 
        int currentPosition;

        public SavedState(Parcelable superState) 
            super(superState);
        

        private SavedState(Parcel in) 
            super(in);
            currentPosition = in.readInt();
        

        @Override
        public void writeToParcel(Parcel dest, int flags) 
            super.writeToParcel(dest, flags);
            dest.writeInt(currentPosition);
        

        public static final Creator<SavedState> CREATOR = new Creator<SavedState>() 
            @Override
            public SavedState createFromParcel(Parcel in) 
                return new SavedState(in);
            

            @Override
            public SavedState[] newArray(int size) 
                return new SavedState[size];
            
        ;
    

修改点：

   if (isRound)
            canvas.drawRoundRect(new RectF(lineLeft + offset, height - indicatorHeight, lineRight - offset, height), radius,radius,rectPaint);
        else 
            canvas.drawRect(new RectF(lineLeft + offset, height - indicatorHeight, lineRight - offset, height),rectPaint);
        

这里不再解释原理 ，纯经验记叙。

但是这样有一个问题，单纯计算偏移量可能不够简单，所以本人又重新添加一种写法，将offset作为下划线长度的话，在ondraw中

 canvas.drawRoundRect(new RectF((lineLeft + lineRight)/2-offset/2, height - indicatorHeight, (lineLeft + lineRight)/2+offset/2, height), radius,radius,rectPaint);

即可。