现在很多安卓移动端都会用到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);我为了安全起见用的是后者