Android中竖着的tab栏——VerticalTablayout

https://www.jianshu.com/p/a9ab3dca0f7c
效果图

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

作者：我挺平凡
链接：https://www.jianshu.com/p/a9ab3dca0f7c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。