第一种

效果图

image

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

    <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

3.代码简单使用

            mTab.setTabAdapter(new TabAdapter() {
            //设置个数
            @Override
            public int getCount() {
                return list.size();
            }

            @Override
            public ITabView.TabBadge getBadge(int position) {
                return null;
            }

            @Override
            public ITabView.TabIcon getIcon(int position) {
                return null;
            }
            //给tab栏设置标题
            @Override
            public ITabView.TabTitle getTitle(int position) {
                ITabView.TabTitle title = new ITabView.TabTitle.Builder()
                        .setContent(list.get(position).getName())
                        .setTextColor(Color.RED,Color.BLACK)
                        .build();
                return title;
            }
          //设置背景
            @Override
            public int getBackground(int position) {
                return 0;
            }
        });

3. 属性说明
   app:indicator_color 指示器颜色
   app:indicator_width 指示器宽度
   app:indicator_gravity 指示器位置
   app:indicator_corners 指示器圆角
   app:tab_mode Tab高度模式
   app:tab_height Tab高度
   app:tab_margin Tab间距

第二种

VerticalTabLayout + ViewPager 竖着的 TabLayout

<article class="baidu_pl">

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/duoduo_11011/article/details/79405499

<link href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css" rel="stylesheet">

由于项目需要如下图，类似于平板中设置界面，今天做一个 demo 记录一下。

这里写图片描述

1.在 build.gradle 添加如下：

compile 'q.rorbin:VerticalTabLayout:1.2.5'

2.布局文件：

<?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="vertical"
    android:background="@drawable/main_bg"
    tools:context="com.gyq.verticaltablelayouttest.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="8">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.2"
            android:gravity="center">

            <q.rorbin.verticaltablayout.VerticalTabLayout
                android:id="@+id/vertical_tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="40dp"
                app:indicator_color="#30000000"
                app:indicator_corners="20dp"
                app:indicator_gravity="fill"
                app:indicator_width="20dp"
                app:tab_height="50dp"
                app:tab_margin="20dp"
                app:tab_mode="scrollable" />
        </LinearLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_split_line" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

3.MainActivity.java

package com.gyq.verticaltablelayouttest;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.WindowManager;

import q.rorbin.verticaltablayout.VerticalTabLayout;

public class MainActivity extends AppCompatActivity {
    private ViewPager viewpager;
    private VerticalTabLayout tablayout;

    private MyPagerAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAdapter = new MyPagerAdapter(getSupportFragmentManager());
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        tablayout = (VerticalTabLayout) findViewById(R.id.vertical_tab);

        viewpager.setAdapter(mAdapter);

        tablayout.setupWithViewPager(viewpager);
    }
}

4.适配器

package com.gyq.verticaltablelayouttest;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * Created by gyq on 2018/2/28 15:53
 */

public class MyPagerAdapter extends FragmentPagerAdapter {
    private String[] mTitles = {"远程对讲","报警记录","开门记录","留言记录"};
    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public BaseFragment getItem(int position) {
        BaseFragment fragment = SmartFragmentFactory.createFragment(position);
        return fragment;
    }

    @Override
    public int getCount() {
        return mTitles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}