Android 底部导航栏篇

##方式一、BottomNavigationBar实现

效果:
BottomNavigationBar效果

利用三方BottomNavigationBar实现

使用步骤:

  • 导入依赖
  • XML引用
  • 找控件
  • 设置属性
  • 监听

#####导入依赖

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

#####XML引用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_above="@id/nb"
        android:id="@+id/fl"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout_alignParentBottom="true"
        android:id="@+id/nb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout>

#####找控件

 private void initView() {
        mFl = (FrameLayout) findViewById(R.id.fl);
        mNb = (BottomNavigationBar) findViewById(R.id.nb);
    }

#####设置属性

  mNb.setTabSelectedListener(this)//监听事件
                .setMode(BottomNavigationBar.MODE_DEFAULT)
                /**
                 *  setMode() 内的参数有三种模式类型:
                 *  MODE_DEFAULT 自动模式:导航栏Item的个数<=3 用 MODE_FIXED 模式,否则用 MODE_SHIFTING 模式【说明下,item>3的时候MODE_DEFAULT会自动变成MODE_SHIFTING模式】
                 *  MODE_FIXED 固定模式:未选中的Item显示文字,无切换动画效果。
                 *  MODE_SHIFTING 切换模式:未选中的Item不显示文字,选中的显示文字,有切换动画效果。
                 */
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_DEFAULT)
                /**
                 *  setBackgroundStyle() 内的参数有三种样式
                 *  BACKGROUND_STYLE_DEFAULT: 默认样式 如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC
                 *  如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
                 *  BACKGROUND_STYLE_STATIC: 静态样式 点击无波纹效果   效果正常
                 *  BACKGROUND_STYLE_RIPPLE: 波纹样式 点击有波纹效果  设置的选中效果会变成背景颜色
                 */
                .setActiveColor(R.color.FF0000)//选中颜色
                .setInActiveColor(R.color.C7C0C0)//未选中颜色
                .setBarBackgroundColor(R.color.CEEE93)//导航栏背景色
                .addItem(new BottomNavigationItem(R.mipmap.ic_home_normal, "首页"))
                .addItem(new BottomNavigationItem(R.mipmap.ic_shoppingcart_normal, "购物车"))
                .addItem(new BottomNavigationItem(R.mipmap.ic_mine_normal, "我的"))
                /**
                 * 添加导航栏
                 */
                .setFirstSelectedPosition(FIRSTSELECTEDPOSITION)//参数是int值,就是哪个item第一个被选中
                .initialise(); //initialise 一定要放在 所有设置的最后一项

#####监听

 /**
     * 只要点击下一个item必走此方法,重复点击当前item不走这里。
     */
    @Override
    public void onTabSelected(int position) {
        FragmentManager fm = getSupportFragmentManager();
        //开启事务
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position){
            case 0:
                if (mHomeFragment==null){
                    mHomeFragment = new HomeFragment();
                }
                transaction.replace(R.id.fl,mHomeFragment);
                break;
            case 1:
                if (mShoppingFragment==null){
                    mShoppingFragment = new ShoppingFragment();
                }
                transaction.replace(R.id.fl,mShoppingFragment);
                break;
            case 2:
                if (mMineFragment==null){
                    mMineFragment = new MineFragment();
                }
                transaction.replace(R.id.fl,mMineFragment);
                break;
            default:
                break;
        }
        transaction.commit();// 事务提交
    }
    /**
     * 只要点击下一个item必走此方法,重复点击当前item不走这里。
     */
    @Override
    public void onTabUnselected(int position) {

    }
    /**
     * 重复点击item时候走此方法
     */
    @Override
    public void onTabReselected(int position) {

    }

##方式二、RadioGroup结合RadioButton
比较忙,再补

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值