Tab navigation and TabLayout usage of the navigation bar in Android

Toolbar series article navigation

Since our navigation bar Toolbar can be customized, can we turn the navigation bar into a tab bar to achieve the effect of a tab page?

1. Label dependence

To add a label page, we first need a tripartite library for making labels. The dependencies are as follows.

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

Some people say that this is our design library, right, so there is no need to repeat the introduction. Here is actually the TabLayout label layout of the design library to be used.

2. Several main attributes of TabLayout

tabBackground: Specify the background of the label.
tabIndicatorColor: Specify the color of the underline.
tabIIndicatorHeight: Specify the height of the underline.
tabTextColor: Specify the color of the label text.
tabTextAppearance: Specify the style of the label text.
tabSelectedTextColor: Specify the color of the selected text.

3. Several main java methods of TabLayout

newTab: Create a new tab.
addTab: Add a label.
getTabAt: Get the label at the specified position.
setOnTabSelectedListener: Set the selected listener of the label. The listener needs to implement 3 methods of the OnTabSelectedListener interface.

onTabSelected: Triggered when the tab is selected.
onTabUnselected: Triggered when the label is unselected.
onTabReselected: Triggered when the tab is reselected.

4. Code example

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) {

    }
}

Note here that the environment we use is the androidx environment, so the dependency of the design here is

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

At the same time, we have to remove the default actionbar before we can use the toolbar

The code of Fragment is omitted here, and it is no different from ordinary usage.

The getPageTitle method rewritten in FragmentPagerAdapter must be paid attention to.