TabLayout的简单使用

最新推荐文章于 2021-10-18 22:57:30 发布

原创最新推荐文章于 2021-10-18 22:57:30 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

Android学习专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用TabLayout组件实现选项卡导航的示例。通过XML布局配置和Java代码结合，展示了如何设置TabLayout的样式、颜色及如何与ViewPager联动显示不同内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TabLayout的简单使用

效果图：

这里写图片描述

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toobar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="tabLayout学习">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            >
        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

</android.support.design.widget.CoordinatorLayout>

代码：

package ceo.yangqing.meimaobing.studynotes.fragment.CoordinatorLayout;

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import java.util.ArrayList;

import butterknife.ButterKnife;
import butterknife.InjectView;



/**
 * Created by dell on 2016/9/1.
 */
public class CoordinatorLayoutFragment4 extends BaseFragment {
    @InjectView(R.id.toobar)
    Toolbar mToobar;
    @InjectView(R.id.tablayout)
    TabLayout mTablayout;
    @InjectView(R.id.viewpager)
    ViewPager mViewpager;
    private ArrayList<BaseFragment> mFragments;

    @Override
    protected View setFragmentView() {
        View view = View.inflate(getContext(), R.layout.fragment_coordinatorlayout4, null);
        return view;
    }

    @Override
    protected void initView() {
        mToobar.setSubtitle("子标题");
        mToobar.setNavigationIcon(R.mipmap.maker);
        mToobar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.showToast("你点击了--这是啥");
            }
        });
        AppCompatActivity activity = (AppCompatActivity) getActivity();
        mToobar.inflateMenu(R.menu.toobar_menu);
        activity.setSupportActionBar(mToobar);
    }

    @Override
    protected void initData() {
        mFragments = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            ViewPagerContentFragment fragment = new ViewPagerContentFragment();
            mFragments.add(fragment);
        }
        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getFragmentManager(), mFragments);
        mViewpager.setAdapter(myViewPagerAdapter);
        mTablayout.setupWithViewPager(mViewpager);
        mTablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        mTablayout.setBackgroundColor(Color.BLUE);//设置背景颜色
        mTablayout.setTabTextColors(Color.WHITE, Color.YELLOW);//设置选项卡字体颜色和选中时的颜色
        mTablayout.setSelectedTabIndicatorColor(Color.GREEN);//设置索引线的颜色
        mTablayout.setSelectedTabIndicatorHeight(4);//设置索引线的高度


    }

    @Override
    protected void initListener() {
        //监听选中的选项卡
        mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                ToastUtil.showToast("当前选中了"+tab.getPosition()+"页");
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    @Override
    public void onClick(View v) {

    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.reset(this);
    }
}

ViewPager中的Framgment内容布局

注意：要使用NestedScrollView 才能让内容滚动起来。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/lorem"
           />
    </android.support.v4.widget.NestedScrollView>
</LinearLayout>

ViewPager的适配器：注意要重写getPageTitle方法

package ceo.yangqing.meimaobing.studynotes.fragment.CoordinatorLayout;

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

import java.util.ArrayList;

import ceo.yangqing.meimaobing.studynotes.fragment.BaseFragment;

/**
 * Created by dell on 2016/9/1.
 */
public class MyViewPagerAdapter extends FragmentPagerAdapter {

    private ArrayList<BaseFragment> fragemnts;
    private final ArrayList<String> mTitles;

    public MyViewPagerAdapter(FragmentManager fm, ArrayList<BaseFragment> fragments) {
        super(fm);
        this.fragemnts = fragments;
        mTitles = new ArrayList<>();
        for (int i = 0; i < fragments.size(); i++) {
            mTitles.add("标题" + i);
        }
    }

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

    @Override
    public Fragment getItem(int position) {
        return fragemnts.get(position);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position).toString();
    }
}