【Android -- 开源库】BottomNavigation 的基本使用

一、简介

BottomNavigation 一个优秀的底部导航栏。
该库可帮助用户轻松使用底部导航栏(谷歌的一种新模式)并允许大量自定义

效果图

效果图

二、引入框架

1. 在 app/build.gradle 中添加:

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.1.0'

三、使用

1. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".ui.BottomNavigationActivity">

    <include
        android:id="@+id/include4"
        layout="@layout/layout_toolbar"/>

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_bar"
        app:layout_constraintTop_toBottomOf="@+id/include4" />

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. java 代码
BottomNavigationActivity.java

public class BottomNavigationActivity extends BaseActivity implements BottomNavigationBar.OnTabSelectedListener {
    @BindView(R.id.bottom_navigation_bar)
    BottomNavigationBar mNavigationBar;

    private InviteFragment mInviteFragment = HomeFragmentFactory.getInstance().getInviteFragment();
    private ActivityFragment mActivityFragment = HomeFragmentFactory.getInstance().getActivityFragment();
    private FoundFragment mFoundFragment = HomeFragmentFactory.getInstance().getFoundFragment();
    private MineFragment mMineFragment = HomeFragmentFactory.getInstance().getMineFragment();

    private Fragment currentFragment = new Fragment();
//    private TextBadgeItem mBadgeItem;
    private FragmentManager fm;


    @Override
    protected int getLayoutId() {
        return R.layout.activity_bottom_navigation;
    }

    @Override
    protected void setToolbar() {

    }

    @Override
    protected void initView() {
        setNavTitle(R.string.bottom_navigation);

        fm = getSupportFragmentManager();

        initBottomBar();

    }

    private void initBottomBar() {

        /**
         * 导航基础设置 包括按钮选中效果 导航栏背景色等
         */
        mNavigationBar.setTabSelectedListener(this)
                .setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)
                .setActiveColor("#F5DF3E")//选中颜色
                .setInActiveColor("#000000")//未选中颜色
                .setBarBackgroundColor("#ffffff");//导航栏背景色
//        mBadgeItem = new TextBadgeItem()
//                .setBorderWidth(2)//Badge的Border(边界)宽度
//                .setBorderColor(Color.BLUE)//Badge的Border颜色
//                .setBackgroundColor(Color.RED)
//                .setTextColor(Color.BLACK)//文本颜色
//                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角
//                .setAnimationDuration(2000)
//                .setHideOnSelect(true)//当选中状态时消失,非选中状态显示
//                .setText("9");

        setInvite();


    }

    /**
     * 切换fragment
     *
     * @param targetFragment
     * @return
     */
    private FragmentTransaction switchFragment(Fragment targetFragment) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if (!targetFragment.isAdded()) {
            // 第一次使用switchFragment()时currentFragment为null,所以要判断一下
            if (currentFragment != null) {
                transaction.hide(currentFragment);
            }
            transaction.add(R.id.fl_content, targetFragment, targetFragment.getClass().getName());
        } else {
            transaction.hide(currentFragment).show(targetFragment);
        }
        currentFragment = targetFragment;
        return transaction;
    }


    /**
     * 邀请
     */
    private void setInvite() {
        mNavigationBar.clearAll();
        switchFragment(mInviteFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(0)
                .initialise();

    }

    /**
     * 活动
     */
    private void setActivity() {
        mNavigationBar.clearAll();
        switchFragment(mActivityFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(1)
                .initialise();

    }

    /**
     * 发现
     */
    private void setFound() {
        mNavigationBar.clearAll();
        switchFragment(mFoundFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(2)
                .initialise();

    }

    /**
     * 我的
     */
    private void setMine() {
        mNavigationBar.clearAll();
        switchFragment(mMineFragment).commitNowAllowingStateLoss();
        mNavigationBar.addItem(new BottomNavigationItem(R.mipmap.icon_invite_nor,"邀约"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_activity_nor,"活动"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_find_nor,"发现"))
                .addItem(new BottomNavigationItem(R.mipmap.icon_my_nor,"我的"))
                .setFirstSelectedPosition(3)
                .initialise();

    }

    @Override
    public void onTabSelected(int position) {
        FragmentTransaction ft = fm.beginTransaction();
        switch (position) {
            case 0:
                setInvite();
                break;

            case 1:
                setActivity();
                break;

            case 2:
                setFound();
                break;

            case 3:
                setMine();
                break;
        }

    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

四个类似的Fragment , ActivityFragment.java

public class ActivityFragment extends BaseFragment {
    @Override
    protected int getLayoutId() {
        return R.layout.fragment_activity;
    }
}

HomeFragmentFactory.java

/**
 * Created on 2019/12/2 16:44
 *
 * @author Gong Youqiang
 */
public class HomeFragmentFactory {
    static HomeFragmentFactory mInstance;
    private InviteFragment mInviteFragment;
    private ActivityFragment mActivityFragment;
    private FoundFragment mFoundFragment;
    private MineFragment mMineFragment;

    public HomeFragmentFactory() {
    }

    public static HomeFragmentFactory getInstance() {
        if (mInstance == null) {
            synchronized (HomeFragmentFactory.class) {
                if (mInstance == null) {
                    mInstance = new HomeFragmentFactory();
                }
            }
        }
        return mInstance;
    }

    /**
     * 邀请
     *
     * @return
     */
    public InviteFragment getInviteFragment() {
        if (mInviteFragment == null) {
            synchronized (InviteFragment.class) {
                if (mInviteFragment == null) {
                    mInviteFragment = new InviteFragment();
                }
            }
        }
        return mInviteFragment;
    }

    /**
     * 活动
     *
     * @return
     */
    public ActivityFragment getActivityFragment() {
        if (mActivityFragment == null) {
            synchronized (ActivityFragment.class) {
                if (mActivityFragment == null) {
                    mActivityFragment = new ActivityFragment();
                }
            }
        }
        return mActivityFragment;
    }

    /**
     * 发现
     *
     * @return
     */
    public FoundFragment getFoundFragment() {
        if (mFoundFragment == null) {
            synchronized (FoundFragment.class) {
                if (mFoundFragment == null) {
                    mFoundFragment = new FoundFragment();
                }
            }
        }
        return mFoundFragment;
    }

    /**
     * 我的
     *
     * @return
     */
    public MineFragment getMineFragment() {
        if (mMineFragment == null) {
            synchronized (MineFragment.class) {
                if (mMineFragment == null) {
                    mMineFragment = new MineFragment();
                }
            }
        }
        return mMineFragment;
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kevin-Dev

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值