效果图

image.png

1.添加依赖

//垂直的tablayout

implementation 'q.rorbin:VerticalTabLayout:1.2.5'

2.xml文件中添加控件【VerticalTabLayout集合帧布局使用，fragment开启事物的方法，或者直接用竖着的ViewPager】

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">

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" />

android:id="@+id/vp"

android:layout_width="match_parent"

android:layout_height="match_parent" />

3.MainActivity代码

public class MainActivity extends AppCompatActivity implements VerticalTabLayout.OnTabSelectedListener, ViewPager.OnPageChangeListener {

private VerticalTabLayout mTab;

private VerticalViewPager mVp;

private ArrayList mTitlesList;

private ArrayList 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间距