關于VerticalTabLayout的使用

現在很多安卓移動端都會用到TabLayout+ViewPager的搭配，原生的只有橫排設計的，這里介紹個豎的控件VerticalTabLayout。


我用的是AS，在gradle中引入compile 'q.rorbin:VerticalTabLayout:1.2.5'即可

找到這個類q.rorbin.verticaltablayout.VerticalTabLayout

setTabHeight 設置TAB高度
setIndicatorColor 設置選中TAB的指示顏色（我的是上圖白色）
setupWithViewPager 綁定ViewPager
getTabAt（int）獲得第幾個tab 獲得的是一個 自定義類 TabView 繼承了 FrameLayout

單單靠API里的方法可能無法滿足我們的需求，可以自己建個類繼承VerticalTabLayout

像我里面要實現白色橢圓居中和藍色靠右的指示形狀要重寫setIndicatorGravity ()方法

    protected void setIndicatorGravity () {

        switch (mIndicatorGravity) {
            case Gravity.LEFT:
                mIndicatorX = 0;
                if ( mLastWidth != 0 ) mIndicatorWidth = mLastWidth;
                setPadding(mIndicatorWidth, 0, 0, 0);
                break;

            case Gravity.RIGHT:
                if ( mLastWidth != 0 ) mIndicatorWidth = mLastWidth;
                setPadding(0, 0, mIndicatorWidth, 0);
                break;

            case Gravity.FILL:
                mIndicatorX = 0;
                setPadding(0, 0, 0, 0);
                break;

            case Gravity.CENTER_HORIZONTAL:
                setPadding(0, 0, 0, 0);
                break;
        }

        post(new Runnable() {
            @Override
            public void run () {

                switch (mIndicatorGravity) {
                    case Gravity.RIGHT:
                        mIndicatorX = getWidth() - mIndicatorWidth;
                        break;

                    case Gravity.FILL:
                        mLastWidth = mIndicatorWidth;
                        mIndicatorWidth = getWidth();
                        break;

                    case Gravity.CENTER_HORIZONTAL:
                        mIndicatorX = (getWidth() - mIndicatorWidth) / 2;
                        break;
                }

                invalidate();
            }
        });
    }

在addTab (TabView tabView) 添加 tabView 時 在落焦發生改變時改變 Indicator

@Override
public void addTab (TabView tabView) {

    if ( tabView != null ) {

        tabView.setBackground(null);
        addTabWithMode(tabView);

        tabView.setOnFocusChangeListener(new OnFocusChangeListener() {
            @Override
            public void onFocusChange (View v, boolean hasFocus) {

                int position = mTabStrip.indexOfChild(v);

                if ( hasFocus ) {
                    chgIndicator(true);
                    setTabSelected(position);
                }

                if ( null != mTabFocusChangeListener ) {
                    mTabFocusChangeListener.onFocusChange(v, hasFocus, position);
                }
            }
        });

                    。。。

    } else {
        throw new IllegalStateException("tabview can't be null");
    }
}

public void chgIndicator (boolean hasFocus) {
    mColorIndicator = hasFocus ? Color.WHITE : ComUtils.getClr(R.color.blue_0099e5);
    mIndicatorWidth = hasFocus ? ViewUtils.getCorrectWidth(438) : ViewUtils.getCorrectWidth(6);
    mIndicatorCorners = hasFocus ? ViewUtils.getCorrectWidth(48) : 0;
    setIndicatorGravity(hasFocus ? Gravity.CENTER_HORIZONTAL : Gravity.RIGHT);
}

拙見差不多介紹完了，大佬勿噴

另外說個小問題，我開發中測試給我提的
在第一次進這個頁面的時候，切換TAB會閃現1次藍色背景再切換就不會了，但是重新進頁面會復現
后來發現在TabView初始化的時候原來會給他設置個默認背景setDefaultBackground();

public LoginTabView (Context context) {
    super(context);
    mContext = context;
    mTabIcon = new TabIcon.Builder().build();
    mTabTitle = new TabTitle.Builder().build();
    mTabBadge = new TabBadge.Builder().build();
    initView();
    int[] attrs;
    if ( Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ) {
        attrs = new int[]{android.R.attr.selectableItemBackgroundBorderless};
    } else {
        attrs = new int[]{android.R.attr.selectableItemBackground};
    }
    TypedArray a = mContext.getTheme().obtainStyledAttributes(attrs);
    mDefaultBackground = a.getDrawable(0);
    a.recycle();
    setDefaultBackground();
}

把這段去掉即可，或是在addTabView時候tabView.setBackground(null);我為了安全起見用的是后者