底部导航栏 pager-bottom-tab-strip的使用

最新推荐文章于 2025-06-02 15:06:21 发布

翻译最新推荐文章于 2025-06-02 15:06:21 发布 · 2.1k 阅读

文章标签：

#Android #底部导航栏

第三方库专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用PagerBottomTabStrip库和ButterKnife实现Android应用底部导航栏，包括配置Fragment和底部导航图标，以及处理导航栏点击事件。

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

地址：https://github.com/tyzlmjj/PagerBottomTabStrip

此处所用：

//  butterKnife, 注解
implementation 'com.jakewharton:butterknife:10.1.0'
annotationProcessor 'com.jakewharton:butterknife-compiler:10.1.0'

// 底部导航栏
implementation 'me.majiajie:pager-bottom-tab-strip:2.3.0'
implementation 'android.arch.navigation:navigation-runtime:1.0.0'

效果图：

xml文件：

<?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"
    tools:context=".MainActivity">



    <FrameLayout
        android:id="@+id/fl_fragments"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
    </FrameLayout>

    <me.majiajie.pagerbottomtabstrip.PageNavigationView
        android:id="@+id/tab"
        android:elevation="8dp"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@android:color/white"
        />


</LinearLayout>

java文件：

package com.example.demos2019_7_31;

import android.graphics.Color;
import android.widget.FrameLayout;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import com.example.demos2019_7_31.base.BaseActivity;
import com.example.demos2019_7_31.fragment.Blank1Fragment;
import com.example.demos2019_7_31.fragment.Blank2Fragment;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import me.majiajie.pagerbottomtabstrip.NavigationController;
import me.majiajie.pagerbottomtabstrip.PageNavigationView;
import me.majiajie.pagerbottomtabstrip.item.BaseTabItem;
import me.majiajie.pagerbottomtabstrip.item.NormalItemView;
import me.majiajie.pagerbottomtabstrip.listener.OnTabItemSelectedListener;

/**
 * @author :Jasmine
 * @date :  2019/7/31
 * @description :
 */
public class MainActivity extends BaseActivity {

    /** 此处使用 butterknife */
    @BindView(R.id.tab)
    PageNavigationView tab;
    @BindView(R.id.fl_fragments)
    FrameLayout flFragments;
    /**
     * 多个fragment数据
     */
    List<Fragment> fragmentList = new ArrayList<>();


    @Override
    public int getLayout() {
        return R.layout.main_activity;
    }

    @Override
    public void initView() {


        /** fragment list
         * 自定义需要展示的fragment界面
         * */
        fragmentList.add(new Blank1Fragment());
        fragmentList.add(new Blank2Fragment());
        fragmentList.add(new Blank1Fragment());
        fragmentList.add(new Blank2Fragment());

        /** 配置fragments 和 底部导航栏 */
        setFragment(0);
        setBottomNavigation();
    }


    /** 底部导航栏 */
    private void setBottomNavigation() {

        // 配置底部导航栏信息， 自定义需要展示的图标
        NavigationController navigationController = tab.custom()
                .addItem(newItem(R.drawable.main_ic_home_unchecked, R.drawable.main_ic_home_checked, "主页", Color.RED))
                .addItem(newItem(R.drawable.main_ic_volunteer_unchecked, R.drawable.main_ic_volunteer_checked, "志愿",Color.RED))
                .addItem(newItem(R.drawable.main_ic_service_unchecked, R.drawable.main_ic_service_checked, "服务",Color.RED))
                .addItem(newItem(R.drawable.main_ic_person_unchecked, R.drawable.main_ic_person_checked, "个人",Color.RED))
                .build();

        // 底部导航栏点击事件
        navigationController.addTabItemSelectedListener(new OnTabItemSelectedListener() {
            @Override
            public void onSelected(int index, int old) {
                setFragment(index);

            }

            @Override
            public void onRepeat(int index) {

            }
        });

    }

    /** 替换fragment */
    private void setFragment(int position) {

        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.replace(R.id.fl_fragments,fragmentList.get(position));
        transaction.commit();
    }


    /**
     * 创建一个底部导航栏的Item
     * */
    private BaseTabItem newItem(int drawable, int checkedDrawable, String text, int textColor) {
        NormalItemView normalItemView = new NormalItemView(this);
        normalItemView.initialize(drawable, checkedDrawable, text);
        normalItemView.setTextDefaultColor(Color.GRAY);
        normalItemView.setTextCheckedColor(textColor);
        return normalItemView;
    }


}