当前位置： 正文

自定义 BottomNavigationView

2023-09-10 Navigation 257 推广

做个微信小程序的朋友都知道，要定义一个底部导航按钮非常简单，只需要配置一份json文件就行了，就会自动生成底部Tab.
Android在以前做法比较麻烦，RadioButton等自定义，要处理各种选中和默认的状态，后Android Material Design推出了BottomNavigationView，使得底部导航控件变得简单。本篇内容将说明BottomNavigationView的基本用法，和通过json文件配置自定义的BottomNavigationView。

  1. 在布局文件中引入

底部要显示的内容都在menu里面bottom_nav_menu,

menu里面有title显示的文字，icon图标。

在Activity中通过监听item的选中时间来实现导航。

  BottomNavigationView navView = findViewById(R.id.nav_view);
        final NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        navView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                navController.navigate(item.getItemId(), null);
                return true;
            }
        });

基本用法很简单，不进行深入讲解，下面来实现自动的BottomNavigationView，

  1. 配置json文件；
{
  "activeColor": "#333333",
  "inActiveColor": "#666666",
  "selectTab": 0,
  "tabs": [
    {
      "size": 24,
      "enable": true,
      "index": 0,
      "pageUrl": "main/tabs/home",
      "title": "首页"
    },
    {
      "size": 24,
      "enable": true,
      "index": 1,
      "pageUrl": "main/tabs/dash",
      "title": "沙发"
    },
    {
      "size": 40,
      "enable": true,
      "index": 2,
      "tintColor": "#ff678f",
      "pageUrl": "main/tabs/notification",
      "title": ""
    },
    {
      "size": 24,
      "enable": true,
      "index": 3,
      "pageUrl": "main/tabs/find",
      "title": "发现"
    },
    {
      "size": 24,
      "enable": true,
      "index": 4,
      "pageUrl": "main/tabs/my",
      "title": "我的"
    }
  ]
}

创建一个json解析的实体类Destination

package com.shitu.app.model;

public class Destination {

    public String pageUrl;
    public int id;
    public boolean needLogin;
    public boolean asStarter;
    public boolean isFragment;
    public String className;

    @Override
    public String toString() {
        return "Destination{" +
                "isFragment=" + isFragment +
                ", asStarter=" + asStarter +
                ", needLogin=" + needLogin +
                ", pageUrl='" + pageUrl + ''' +
                ", clzName='" + className + ''' +
                ", id=" + id +
                '}';
    }
}

自定义BottomNavigationView，新建一个AppBottomBar类，继承BottomNavigationView



import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.ColorStateList;
import android.graphics.Color;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MenuItem;

import com.google.android.material.bottomnavigation.BottomNavigationItemView;
import com.google.android.material.bottomnavigation.BottomNavigationMenuView;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.bottomnavigation.LabelVisibilityMode;
import com.shitu.app.R;
import com.shitu.app.model.BottomBar;
import com.shitu.app.model.Destination;
import com.shitu.app.util.AppConfig;

import java.util.List;

public class AppBottomBar extends BottomNavigationView {
    private static int[] sIcons = new int[]{R.drawable.icon_tab_home, R.drawable.icon_tab_sofa, R.drawable.icon_tab_publish, R.drawable.icon_tab_find, R.drawable.icon_tab_mine};
    private BottomBar config;

    public AppBottomBar(Context context) {
        this(context, null);
    }

    public AppBottomBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    @SuppressLint("RestrictedApi")
    public AppBottomBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        config = AppConfig.getBottomBarConfig();

        int[][] state = new int[2][];
        state[0] = new int[]{android.R.attr.state_selected};
        state[1] = new int[]{};
        int[] colors = new int[]{Color.parseColor(config.activeColor), Color.parseColor(config.inActiveColor)};
        ColorStateList stateList = new ColorStateList(state, colors);
        setItemTextColor(stateList);
        setItemIconTintList(stateList);
        //LABEL_VISIBILITY_LABELED:设置按钮的文本为一直显示模式
        //LABEL_VISIBILITY_AUTO:当按钮个数小于三个时一直显示，或者当按钮个数大于3个且小于5个时，被选中的那个按钮文本才会显示
        //LABEL_VISIBILITY_SELECTED：只有被选中的那个按钮的文本才会显示
        //LABEL_VISIBILITY_UNLABELED:所有的按钮文本都不显示
        setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);
        List tabs = config.tabs;
        for (BottomBar.Tab tab : tabs) {
            if (!tab.enable) {
                continue;
            }
            int itemId = getItemId(tab.pageUrl);
            if (itemId < 0) {
                continue;
            }
            MenuItem menuItem = getMenu().add(0, itemId, tab.index, tab.title);
            menuItem.setIcon(sIcons[tab.index]);
        }

        //此处给按钮icon设置大小
        int index = 0;
        for (BottomBar.Tab tab : config.tabs) {
            if (!tab.enable) {
                continue;
            }

            int itemId = getItemId(tab.pageUrl);
            if (itemId < 0) {
                continue;
            }

            int iconSize = dp2Px(tab.size);
            BottomNavigationMenuView menuView = (BottomNavigationMenuView) getChildAt(0);
            BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(index);
            itemView.setIconSize(iconSize);
            if (TextUtils.isEmpty(tab.title)) {
                int tintColor = TextUtils.isEmpty(tab.tintColor) ? Color.parseColor("#ff678f") : Color.parseColor(tab.tintColor);
                itemView.setIconTintList(ColorStateList.valueOf(tintColor));
                //禁止掉点按时 上下浮动的效果
                itemView.setShifting(false);

                /**
                 * 如果想要禁止掉所有按钮的点击浮动效果。
                 * 那么还需要给选中和未选中的按钮配置一样大小的字号。
                 *
                 *  在MainActivity布局的AppBottomBar标签增加如下配置，
                 *  @style/active，@style/inActive 在style.xml中
                 *  app:itemTextAppearanceActive="@style/active"
                 *  app:itemTextAppearanceInactive="@style/inActive"
                 */
            }
            index++;
        }

        //底部导航栏默认选中项
        if (config.selectTab != 0) {
            BottomBar.Tab selectTab = config.tabs.get(config.selectTab);
            if (selectTab.enable) {
                int itemId = getItemId(selectTab.pageUrl);
                //这里需要延迟一下 再定位到默认选中的tab
                //因为 咱们需要等待内容区域,也就NavGraphBuilder解析数据并初始化完成，
                //否则会出现 底部按钮切换过去了，但内容区域还没切换过去
                post(() -> setSelectedItemId(itemId));
            }
        }
    }

    private int dp2Px(int dpValue) {
        DisplayMetrics metrics = getContext().getResources().getDisplayMetrics();
        return (int) (metrics.density * dpValue + 0.5f);
    }

    private int getItemId(String pageUrl) {
        Destination destination = AppConfig.getDestConfig().get(pageUrl);
        if (destination == null)
            return -1;
        return destination.id;
    }
}

代码简单，没啥可说的，不懂的留言，哈哈！
将布局文件中的BottomNavigationView换成AppBottomBar

其他照旧，OK，改造完成！

下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.dandroid.cn/19589，转载请注明出处。
赏 0

猜你喜欢

ConstraintLayout实战小技巧—实现布局跟随效果

需求 有时UI小姐姐可能想要这样的效果，左侧的标题长度不定，标题后面跟着一个...
2024-05-13 557
Jetpack Compose屏幕适配

开始 和之前一样，阅读这篇文章，了解一下适配的思路 ：一种极低成本的Android屏幕...
2023-12-20 578
Android Compose 新闻App

网络数据Compose UI显示加载、Room和DataStore使用
2023-11-17 535免费
免费
Android | Compose 状态管理

前言 应用中的状态指的是可以随时间变化的任何值。这个定义非常广泛，例如从数...
2023-11-17 679
Android Jetpack Compose 动画速查表

Android Jetpack Compose 提供了和原来的 View 系统完全不一样的动画机制和 AP...
2023-11-17 568
Android Compose 生命周期和附带效应

前言 可组合项 应该没有附带效应，但是，如果在对应用状态进行转变时需要...
2023-11-17 483

评论0

取消

首页 推荐 教程 我的
显示验证码
没有账号？注册  忘记密码？