Android关于BottomNavigationView使用指南

前言

关于BottomNavigationView的一些问题,今天发篇比较详细的文章总结一下,希望能够对你有所帮助。

提示:以下是本篇文章正文内容,下面案例可供参考

一、初识BottomNavigationView

常用属性:

  • 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文件(文字和图片都写在这个里面)

在Android Studio创建新项目时,会有很多小伙伴在模块中选择此类型的Activity,如下。

在这里插入图片描述

项目运行效果图如下:

在这里插入图片描述

二、BottomNavigationView中的颜色关键实现代码解析(举例)

是如何定义的颜色的。

关键代码如下(获取xml中的属性):

 ColorStateList backgroundTint =
        MaterialResources.getColorStateList(
            context, a, R.styleable.BottomNavigationView_backgroundTint);
    DrawableCompat.setTintList(getBackground().mutate(), backgroundTint);

    setLabelVisibilityMode(
        a.getInteger(
            R.styleable.BottomNavigationView_labelVisibilityMode,
            LabelVisibilityMode.LABEL_VISIBILITY_AUTO));
    setItemHorizontalTranslationEnabled(
        a.getBoolean(R.styleable.BottomNavigationView_itemHorizontalTranslationEnabled, true));

    int itemBackground = a.getResourceId(R.styleable.BottomNavigationView_itemBackground, 0);
    if (itemBackground != 0) {
      menuView.setItemBackgroundRes(itemBackground);
    } else {
      ColorStateList itemRippleColor =
          MaterialResources.getColorStateList(
              context, a, R.styleable.BottomNavigationView_itemRippleColor);
      setItemRippleColor(itemRippleColor);
    }

可以很明显的看到起到关键作用的是ColorStateList,而处理好这个传入的参数即可解决颜色问题。

三、开始解决问题

1.如何修改图标颜色

这里提供两种解决方式
xml中解决
首先:新建一个selector_color文件,设置两种状态的颜色

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#63F7DE" android:state_checked="true"  />
    <item android:color="@android:color/black" android:state_checked="false"/>
</selector>

然后在BottomNavigationView中调用此文件

app:itemIconTint="@color/selector_color"

java文件中解决:
传入一个自定义的ColorStateList。
并将其以参数传入view中

navView.setItemIconTintList();

2.如何使图标点击颜色不改变

在java中调用其setItemIconTintList,传参为空即可

navView.setItemIconTintList(null);

3.如何使点击时字体不改变大小

在dimens文件中设置以下两个的值为同一大小即可

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

4.当你的图标是多色系时

在java中调用其setItemIconTintList,传参为空

navView.setItemIconTintList(null);

然后设置图片状态的item中drawable的选择,举例如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_home_black_24dp" android:state_checked="true"  />
    <item android:drawable="@drawable/ic_home_black_false_24dp" android:state_checked="false"/>
</selector>

最后在menu中调用此文件即可。举例文件名为:ic_home

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

为了节省时间,只修改了第一个,效果如下

在这里插入图片描述

5.不想要ActionBar

1.将xml中paddingTop这行删除

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

2.在java中将以下这行删除

NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);

3.设置APP样式为NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

四、总结

到此这篇关于Android关于BottomNavigationView使用指南的文章就介绍到这了

转载:http://www.dedeyun.com/it/m/100919.html

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Android Studio中使用ViewPager和BottomNavigationView,你可以按照以下步骤进行操作: 1. 首先,在你的XML布局文件中添加一个ViewPager和一个BottomNavigationView。例如,你可以在LinearLayout中添加一个ViewPager和一个BottomNavigationView,如下所示: ``` <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"> <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_nav_menu" /> </LinearLayout> ``` 2. 创建一个PagerAdapter来管理ViewPager的页面。你可以创建一个继承自FragmentPagerAdapter或FragmentStatePagerAdapter的类,并实现相应的方法。这些方法包括getItem()方法,用于返回ViewPager中的Fragment实例,以及getCount()方法,用于返回ViewPager中的页面数量。 3. 在MainActivity或相应的Activity中,将ViewPager与PagerAdapter关联起来,并设置ViewPager作为BottomNavigationView的监听器。在ViewPager的onPageSelected()方法中,你可以根据选中的页面来更新BottomNavigationView的选中项。 ``` ViewPager viewPager = findViewById(R.id.viewPager); viewPager.setAdapter(new YourPagerAdapter(getSupportFragmentManager())); BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigationView); bottomNavigationView.setOnNavigationItemSelectedListener(item -> { switch (item.getItemId()) { case R.id.menu_item1: viewPager.setCurrentItem(0); return true; case R.id.menu_item2: viewPager.setCurrentItem(1); return true; case R.id.menu_item3: viewPager.setCurrentItem(2); return true; } return false; }); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { switch (position) { case 0: bottomNavigationView.setSelectedItemId(R.id.menu_item1); break; case 1: bottomNavigationView.setSelectedItemId(R.id.menu_item2); break; case 2: bottomNavigationView.setSelectedItemId(R.id.menu_item3); break; } } @Override public void onPageScrollStateChanged(int state) { } }); ``` 4. 创建相应的Fragment用于显示ViewPager中的页面。你可以创建继承自Fragment的类,并在PagerAdapter的getItem()方法中返回这些Fragment的实例。每个Fragment将显示不同的内容。 通过按照以上步骤,在Android Studio中使用ViewPager和BottomNavigationView来实现底部导航栏同步切换操作。记得在布局文件中添加菜单文件(即bottom_nav_menu.xml),并在代码中设置相应的选中项和页面切换逻辑。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值