效果图
image.png
1.添加依赖
//垂直的tablayout
implementation 'q.rorbin:VerticalTabLayout:1.2.5'
2.xml文件中添加控件【VerticalTabLayout集合帧布局使用，fragment开启事物的方法，或者直接用竖着的ViewPager】
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".ui.country.fragment.InternationalFragment">
<q.rorbin.verticaltablayout.VerticalTabLayout
android:id="@+id/tab"
android:layout_width="@dimen/dp_100"
android:layout_height="match_parent"
android:background="@color/c_EAEAEA"
app:indicator_width="@dimen/dp_2"
app:tab_height="@dimen/dp_50"
app:tab_mode="scrollable" />
<ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3.MainActivity代码
public class MainActivity extends AppCompatActivity implements VerticalTabLayout.OnTabSelectedListener, ViewPager.OnPageChangeListener {
private VerticalTabLayout mTab;
private VerticalViewPager mVp;
private ArrayList<String> mTitlesList;
private ArrayList<Fragment> mFragmentsList;
private static final String TAG = "MainActivity----";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initData() {
mTab.setTabAdapter(new TabAdapter() {
@Override
public int getCount() {
return mTitlesList.size();
}
@Override
public int getBadge(int position) {
return position;
}
@Override
public QTabView.TabIcon getIcon(int position) {
return null;
}
@Override
public QTabView.TabTitle getTitle(int position) {
QTabView.TabTitle title = new QTabView.TabTitle.Builder(MainActivity.this)
.setContent(mTitlesList.get(position))//设置数据 也有设置字体颜色的方法
.build();
return title;
}
@Override
public int getBackground(int position) {
return R.drawable.tab_selector;//选中的背景颜色
}
});
}
private void initView() {
mTab = (VerticalTabLayout) findViewById(R.id.tab);
mVp = (VerticalViewPager) findViewById(R.id.vp);
mTitlesList = new ArrayList<>();//初始化Tab栏数据
mTitlesList.add("小票设置");
mTitlesList.add("语音播报设置");
mTitlesList.add("安全密码设置");
mTitlesList.add("发票设置");
mFragmentsList = new ArrayList<>();//添加碎片
mFragmentsList.add(new AFragment());
mFragmentsList.add(new BFragment());
mFragmentsList.add(new CFragment());
mFragmentsList.add(new DFragment());
//创建适配器、适配器继承自FragmentPagerAdapter
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), mFragmentsList);
mVp.setAdapter(myPagerAdapter);//绑定适配器
//Tab和ViewPager相互联动
mVp.setOnPageChangeListener(this);
mTab.addOnTabSelectedListener(this);
}
@Override
public void onTabSelected(TabView tab, int position) {
mVp.setCurrentItem(position);
}
@Override
public void onTabReselected(TabView tab, int position) {
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTab.setTabSelected(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
- 属性说明
app:indicator_color 指示器颜色
app:indicator_width 指示器宽度
app:indicator_gravity 指示器位置
app:indicator_corners 指示器圆角
app:tab_mode Tab高度模式
app:tab_height Tab高度
app:tab_margin Tab间距
