关于VerticalTabLayout的使用

现在很多安卓移动端都会用到TabLayout+ViewPager的搭配，原生的只有横排设计的，这里介绍个竖的控件VerticalTabLayout。


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

成都创新互联专业为企业提供河津网站建设、河津做网站、河津网站设计、河津网站制作等企业网站建设、网页设计与制作、河津企业网站模板建站服务，10余年河津做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

找到这个类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);我为了安全起见用的是后者

网页名称：关于VerticalTabLayout的使用
文章位置：http://bzwzjz.com/article/ijjogs.html