Android底部导航栏之BottomNavigationView

这篇具有很好参考价值的文章主要介绍了Android底部导航栏之BottomNavigationView。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一,基本用法

1,首先需要添加依赖:

implementation 'com.google.android.material:material:1.1.0'

2,布局文件中引入:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/bottom_nav_menu" />

3,常用属性:

  • app:itemTextColor 文字的颜色,可以通过selector来控制选中和未选中的颜色

  • app:itemIconTint 图标的颜色,可以通过selector来控制选中和未选中的颜色

  • app:itemIconSize 图标大小,默认24dp

  • app:iteamBackground 背景颜色,默认是主题的颜色

  • app:itemRippleColor 点击后的水波纹颜色

  • app:itemTextAppearanceActive 设置选中时文字样式

  • app:itemTextAppearanceInactive 设置默认的文字样式

  • app:itemHorizontalTranslationEnabled 在label visibility 模式为selected时item水平方向移动

  • app:elevation 控制控件顶部的阴影

  • app:labelVisibilityMode 文字的显示模式

  • app:menu 指定菜单xml文件(文字和图片都写在这个里面)

4,menu文件:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_rypc"
        android:icon="@drawable/main_bottom_rypc_selector"
        android:title="@string/bottom_rypc" />

    <item
        android:id="@+id/navigation_ryzy"
        android:icon="@drawable/main_bottom_ryzy_selector"
        android:title="@string/bottom_ryzy" />

    <item
        android:id="@+id/navigation_ryct"
        android:icon="@drawable/main_bottom_ryct_selector"
        android:title="@string/bottom_ryct" />
    <item
        android:id="@+id/navigation_mine"
        android:icon="@drawable/main_bottom_mine_selector"
        android:title="@string/bottom_mine" />
</menu>

在每个item中设置对应的icon和title即可。这里的icon可以是一个drawable,也可以是包含不同状态对应不同图片的selector。设置了menu后一个基本的底部菜单栏就有了。

二,配合Fragment使用

1.设置对应的navigation文件,指定fragment页面

<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
    app:startDestination="@id/navigation_rypc"
    android:id="@+id/main_navigation">

    <fragment
        android:id="@+id/navigation_rypc"
        android:name="com.heziz.yjct.fragment.RypcFragment"
        tools:layout="@layout/fragment_rypc"/>

    <fragment
        android:id="@+id/navigation_ryzy"
        android:name="com.heziz.yjct.fragment.RyzyFragment"
        tools:layout="@layout/fragment_ryzy"/>

    <fragment
        android:id="@+id/navigation_ryct"
        android:name="com.heziz.yjct.fragment.RyctFragment"
        tools:layout="@layout/fragment_ryct"/>

    <fragment
        android:id="@+id/navigation_mine"
        android:name="com.heziz.yjct.fragment.MineFragment"
        tools:layout="@layout/fragment_mine"/>

</navigation>

2.activity中的布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#f8f8f8"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/main_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/main_bottom_icons" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3.Activity中使用


public class MainActivity extends BaseAppCompatActivity {

    BottomNavigationView bottomNavigationView;

    @Override
    protected boolean isRegisterEventBus() {
        return false;
    }

    @Override
    protected int setLayout() {
        return R.layout.activity_main;
    }

    @Override
    protected void setView() {
        initNavigation();
    }

    @Override
    protected void setData() {
    }

    private void initNavigation() {

        NavController controller = Navigation.findNavController(this, R.id.nav_host_fragment);
        bottomNavigationView = findViewById(R.id.bottom_navigation);
        NavigationUI.setupWithNavController(bottomNavigationView,controller);

        // 动态删除底部导航控件
//        bottomNavigationView.getMenu().removeItem(R.id.navigation_ryzy);
    }

三,注意事项

  • menu文件中item的id要和navigation文件中fragment的id保持一致,否则无法正常显示

  • 要想取消点击选中后放大效果,只需在dimens文件中新增一下配置,设置字体大小一致

//防止字体出现变大效果
    <dimen name="design_bottom_navigation_active_text_size">12dp</dimen>
    <dimen name="design_bottom_navigation_text_size">12dp</dimen>

四,显示badge(角标/悬浮徽章)

还在github上查找怎么往BottomNavigationView上添加badge吗?BottomNavigationView默认提供了badge。

1,基本使用

BottomNavigationView上添加badge很简单,它提供了如下操作badge的方法:

  • getBadge(int menuItemId) 获取badge

  • getOrCreateBadge(int menuItemId) 获取或创建badge

  • removeBadge(int menuItemId) 移除badge

因此添加一个badge只需要如下代码:

val navView: BottomNavigationView = findViewById(R.id.nav_view)
val badge = navView.getOrCreateBadge(R.id.navigation_dashboard)

效果:

Android底部导航栏之BottomNavigationView

设置数量

badge.number = 20

设置数量后效果:

Android底部导航栏之BottomNavigationView

2,常用属性

getBadgegetOrCreateBadge方法返回的都是BadgeDrawableBadgeDrawable常用的属性/方法如下:

  • backgroundColor 设置背景色

  • badgeGravity 设置Badge的显示位置,有四种可先:TOP_STARTTOP_ENDBOTTOM_STARTBOTTOM_END,分别对应左上角,右上角,左下角和右下角。

  • badgeTextColor 设置文字颜色

  • maxCharacterCount 最多显示几位数字,比如该项设置了3,number设置为108,则显示99+文章来源地址https://www.toymoban.com/news/detail-479525.html

到了这里,关于Android底部导航栏之BottomNavigationView的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • android中实现底部导航栏

            底部导航栏在app应用中是十分常见了,大部分的安卓应用中也都实现了底部导航栏的功能,这里我就以我以前做的一个简单小说阅读软件为例,为大家演示一下底部导航栏的使用,需要的朋友直接复制代码过去改写就行了。         这里包含了一些进行操作实际

    2024年02月19日
    浏览(47)
  • Android BottomNavigation底部导航栏使用

    原文地址: Android BottomNavigation底部导航栏使用 - Stars-One的杂货小窝 本文侧重点记录一些特殊的样式设置,所以基本使用这里就简单概述一下,详细图文可以去找其他人的博文 1.创建对应的menu菜单文件 2.xml布局引用menu菜单 3.启动Activity预览效果 可以使用 setOnItemSelectedListener 方法监

    2024年02月12日
    浏览(53)
  • Android---DslTabLayout实现底部导航栏

    1. 在 Android 项目中引用 JitPack 库  AGP 8.+ 根目录的 settings.gradle  AGP 8.+ 根目录如果是  settings.gradle.kts 文件  AGP 8.- 根目录的 build.gradle 2. 添加依赖  在APP目录中的 build.gradle 3. 布局 activity_main.xml 4. 底部 tab_item.xml 布局 5. 每个底部 tab 对应的 fragment a. DiscoveryFragment b. fragment_dis

    2024年02月20日
    浏览(44)
  • Android实现底部导航栏方法(Navigation篇)

    底部导航栏一直是大部分App不可缺失的一部分 最近注意到Jetpack中的Navigation支持Fragment的切换操作 特此浅研究一下 选择性跳过 此处使用Google开发者文档中介绍 使用nav文件配合 FragmentContainerView组件 实现Fragment的切换操作 创建nav文件 导入后,在项目的res文件夹下,右键选择

    2024年02月06日
    浏览(89)
  • Flutter写一个android底部导航栏框架

    废话不多说,上代码: 在上述示例中,我们创建了一个 MyHomePage 小部件,它是 StatefulWidget 。 MyHomePage 包含底部导航栏和相关页面内容。通过 BottomNavigationBar 和 currentIndex 属性,我们可以控制当前选中的导航项并在 onTap 回调中更新状态。 在 items 属性中,我们设置了三个 Bott

    2024年02月14日
    浏览(37)
  • Android开发:利用Android Studio自带的底部导航栏和ViewPager+TabLayout创建顶部导航栏

    目录 效果图 底部导航栏 ​编辑 顶部导航栏 底部导航栏首个Fragment代码 适配器代码 顶部导航栏首个Fragment代码  顶部导航栏另外三个Fragment代码  ​编辑 顶部导航栏四个Fragment的XML 补充 学Android开发开始实操,第一步肯定要把大致布局搞定。做这个布局用到的知识难点有fr

    2024年02月03日
    浏览(60)
  • Android Jetpack Compose之底部导航栏的实现

    写过一段Android jetpack compose 界面的小伙伴应该都用过Compose的脚手架 Scaffold ,利用它我们可以很快的实现一个现代APP的主流界面架构,即一个带顶部导航栏和底部导航栏的界面架构,我们基于这个架构可以快速的搭建出我们想要的页面效果。而今天的文章就是要介绍如何实现

    2024年03月23日
    浏览(52)
  • android 关于TabLayout联动ViewPager2 实现底部导航栏

    最近在心血来潮想写在app 不过我关于android可以说是0基础 在写底部导航栏的时候去问了大佬才知道TabLayout和ViewPager 花了两天才看懂... 这里只是简单介绍因为我不准备专门做安卓软件所以在学的途中很多地方没有认真记 本篇文章使用的代码是Java 这里官方是有将两个进行联动

    2024年01月25日
    浏览(43)
  • 【Android入门到项目实战-- 11.2】—— 实现底部导航栏(RadioGroup+Fragment)

            效果如下,使用RadioGroup实现,不能左右滑动切换页面,适用于导航页里还有需要切换页面的场景,如果需要滑动效果,使用ViewPager实现。         以下示例按照图上实现,具体多少个页面,按需修改。         由于需要用到icon,提前下载好图标到drawable文件

    2024年02月10日
    浏览(78)
  • Android UI—仿微信底部导航栏布局,吃透这份Android高级工程师面试497题解析

    android:layout_width=``\\\"match_parent\\\" android:layout_height=``\\\"match_parent\\\" android:orientation=``\\\"vertical\\\" TextView android:layout_height=``\\\"wrap_content\\\" android:layout_width=``\\\"wrap_content\\\" android:text=``\\\"微信\\\" android:textSize=``\\\"20sp\\\" / TextView android:layout_height=``\\\"wrap_content\\\" android:layout_width=``\\\"wrap_content\\\" android:text=``\\\"http://www

    2024年04月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包