Android中导航栏之标签导航暨TabLayout用法

Toolbar系列文章导航

既然我们的导航栏Toolbar是可以自定义的，那么我们是不是可以把导航栏打造成一个标签栏，实现一个标签页的效果。

1.标签依赖

我们添加标签页，首先需要一个制作标签的三方库。依赖如下。

implementation 'com.android.support:design:28.0.0'

有人说这不就是我们的design库么，对，所以有了就不用重复引入了。这里其实就是要用到design库的TabLayout标签布局。

2.TabLayout主要的几个属性

tabBackground：指定标签的背景。
tabIndicatorColor：指定下划线的颜色。
tabIIndicatorHeight：指定下划线的高度。
tabTextColor：指定标签文字的颜色。
tabTextAppearance：指定标签文字的风格。
tabSelectedTextColor：指定选中文字的颜色。

3.TabLayout主要的几个java方法

newTab：创建新标签。
addTab：添加一个标签。
getTabAt：获取指定位置的标签。
setOnTabSelectedListener：设置标签的选中监听器。该监听器需实现OnTabSelectedListener接口的3个方法。

onTabSelected：标签被选中时触发。
onTabUnselected：标签被取消选中时触发。
onTabReselected：标签被重新选中时触发。

4.代码示例

activity_tab_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tl_head"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <!-- 注意TabLayout节点需要使用完整路径 -->
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                app:tabIndicatorColor="#FF0000"
                app:tabIndicatorHeight="2dp"
                app:tabSelectedTextColor="#FF0000"
                app:tabTextColor="#666666" />
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>

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

MainActivity.java

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    private TabLayout tab_title; // 定义一个标签布局对象
    private ArrayList<String> mTitleArray = new ArrayList<String>(); // 标题文字队列
    private ViewPager viewpager;
    private List<Fragment> fragmentList;
    private FragmentPagerAdapter viewPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        // 从布局文件中获取名叫tl_head的工具栏
        Toolbar tl_head = findViewById(R.id.tl_head);
        viewpager = findViewById(R.id.viewpager);
        // 使用tl_head替换系统自带的ActionBar
        setSupportActionBar(tl_head);
        mTitleArray.add("商品");
        mTitleArray.add("详情");
        initTabLayout(); // 初始化标签布局
        initTabViewPager(); // 初始化标签翻页
    }



    // 初始化标签布局
    private void initTabLayout() {
        // 从布局文件中获取名叫tab_title的标签布局
        tab_title = findViewById(R.id.tab_title);
        // 给tab_title添加一个指定文字的标签
        tab_title.addTab(tab_title.newTab().setText(mTitleArray.get(0)));
        // 给tab_title添加一个指定文字的标签
        tab_title.addTab(tab_title.newTab().setText(mTitleArray.get(1)));
        // 给tab_title添加标签选中监听器
        tab_title.addOnTabSelectedListener(this);
        tab_title.setupWithViewPager(viewpager);
    }

    // 初始化标签翻页
    private void initTabViewPager() {
        fragmentList = new ArrayList<>();
        fragmentList.add(new OneFragment());
        fragmentList.add(new MineFragment());
        viewPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitleArray.get(position);
            }
        };
        viewpager.setAdapter(viewPagerAdapter);
    }

    // 在标签被重复选中时触发
    public void onTabReselected(TabLayout.Tab tab) {

    }

    // 在标签选中时触发
    public void onTabSelected(TabLayout.Tab tab) {

    }

    // 在标签取消选中时触发
    public void onTabUnselected(TabLayout.Tab tab) {

    }
}

这里注意一下，我们使用的环境是androidx的环境，所以这里design的依赖是

implementation 'com.google.android.material:material:1.0.0-rc01'

同时我们要先去掉默认的actionbar才可以使用toolbar

Fragment的代码这里就省略了，和普通的用法没有什么区别。

FragmentPagerAdapter中重写的getPageTitle方法一定要注意一下。

Android中导航栏之标签导航暨TabLayout用法

1.标签依赖

2.TabLayout主要的几个属性

3.TabLayout主要的几个java方法

4.代码示例

猜你喜欢