首页 > 其他分享 >BottomNavigationView + ViewPager2 实现底部导航栏切换 + 自定义渐变

BottomNavigationView + ViewPager2 实现底部导航栏切换 + 自定义渐变

时间:2024-07-15 10:27:06浏览次数:10  
标签:动画 需要 效果 自定义 ViewPager2 BottomNavigationView 图标

  1. com.google.android.material.bottomnavigation.BottomNavigationView 缺点:

自定义难度大:

BottomNavigationView 的默认样式和行为是为标准使用场景设计的,如果需要进行深度定制,比如复杂的动画效果或不常见的布局,可能需要大量的代码来实现。

图标和文字的限制:

默认情况下,BottomNavigationView 中的每个菜单项同时显示图标和文字,虽然可以通过自定义布局来改变这种行为,但有时候会影响到视觉效果或用户体验。

项目数限制:

BottomNavigationView 适合展示 3 到 5 个菜单项,超过这个数量会导致布局变得拥挤,图标和文字也会变得太小,不利于用户点击和查看。

动画和交互效果有限:

默认的交互动画和效果比较基础,如果需要更复杂或不同的动画效果,可能需要自己实现,而这可能会增加开发时间和复杂性。

适应性问题:

BottomNavigationView 对大多数屏幕尺寸和分辨率有良好的适应性,但在一些特殊设备或屏幕方向(如横屏)下,可能需要额外的调整才能保证良好的显示效果。

版本兼容性:

BottomNavigationView 是 Material Design 组件库的一部分,对于较旧版本的 Android 系统,需要确保兼容性,特别是在使用一些新特性或修复一些 bug 时,可能需要额外的工作。
这些缺点并不是说 BottomNavigationView 不好用,对于大多数标准的应用场景,它依然是一个非常好的选择。

以下针对fragment的切换和自定义tab文字渐变来说明如何修改:
先看原始布局xml –

<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"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/xxx_nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/xxx_nav_main" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf

标签:动画,需要,效果,自定义,ViewPager2,BottomNavigationView,图标
From: https://blog.csdn.net/qq_27247815/article/details/140416634

相关文章

  • vue学习day09-自定义指令、插槽
    29、自定义指令(1)概念:自己定义的指令,可以封装一些dom操作,扩展额外的功能。(2)分类:1)全局注册2)局部注册3)示例:让表单元素一进入页面就获取焦点①全局注册效果:②局部注册(效果和全局注册一样,但作用范围不同)(3)指令的值自定义指令可以通过等号赋值的形式传参,这个值......
  • 华为云obs如何配置自定义域名
    上传pdf文件到华为云obs上后,得到的链接,如果直接访问都是下载文件,那么要如何实现访问链接直接预览文件呢。通过查看华为云的官方文档得知从2022年开始,华为云就不在支持直接访问实现预览了如何在浏览器中在线预览OBS中的对象?_对象存储服务OBS基于安全合规要求,华为云对象存储......
  • Python函数(1)--自定义函数与作用域
    函数的定义Python中的函数是一段组织好的、可重复使用的、用来实现单一或相关联功能的代码块。函数能提高应用的模块性,和代码的重复可用性。你已经知道Python提供了许多内建函数,比如print()。但你也可以自己创建函数,这被称为用户自定义函数。自定义函数假设,我们现在求一......
  • Android Viewpager2 remove fragmen不生效解决方案
    一、介绍在如今的开发过程只,内容变化已多单一的fragment,变成连续的,特别是以短视频或者直播为主的场景很多。从早起的Viewpage只能横向滑动,到如今的viewpage2可以支持横向或者竖向滑动。由于viewpage2的adapter在设计时支持缓存,导致想立马生效出现问题,不符合国内的业务场景。......
  • css 自定义属性
    CSS自定义属性(CustomProperties),也称为CSS变量,是CSS中一种能够保存和复用值的机制。它们与常规的CSS属性不同,因为它们可以在整个文档中定义一次,然后在需要的任何地方使用。定义和语法定义一个自定义属性使用两个连字符(--)开头,后面跟着属性名,类似于下面的示例::root{--......
  • 帝国CMS网站通过自定义扩展变量功能,用户可以自定义公共的程序使用变量,为用户扩展系统
    通过自定义扩展变量功能,用户可以自定义公共的程序使用变量,为用户扩展系统带来便利。比如可以增加像系统$public_r[newsurl]这样的变量,还比如扩展了某个系统模型,需要增加设置项都可以用扩展变量来实现...等等。 一、登录后台,单击“系统”菜单,选择“扩展变量”......
  • Java 异常艺术:自定义异常的魔力——解锁编程的新维度
    超越常规的错误管理在编程的宇宙中,错误和异常如同星云般存在,既神秘又充满挑战。Java的异常处理机制,尤其是自定义异常,为我们提供了驾驭这一领域的强大工具。本文将引领你深入自定义异常的奥秘,不仅从基础讲起,还将通过一系列详尽案例和扩展讨论,展现其在实际开发中的无限可能......
  • Llama2大语言模型在云GPU(AutoDL)上进行训练微调(自定义数据集)
    Llama2是Meta开源的语言大模型,它经过训练的数据集包含2万亿个token。相比Llama,Llama2的上下文长度已经从2048扩展到4096,这使其能够理解和生成更长的文本。Llama2包括了多个模型,分别是7B、13B和70B的模型。一、准备工作在autodl平台租用实例(直接搜索,有许多租用教程,建议租......
  • 维度转换的艺术:Kylin Cube设计的自定义魔法
    维度转换的艺术:KylinCube设计的自定义魔法引言ApacheKylin是一款强大的大数据分析平台,它通过构建数据立方体(Cube)来加速对大数据集的查询。在Kylin的Cube设计中,维度的自定义转换是一个高级特性,允许用户根据业务需求对维度进行灵活处理。本文将深入探讨Kylin是否支持维度......
  • ts vue3 自定义指令
    当然,以下是将前面两个步骤汇总到一起的完整实现方案:1.定义指令首先,在src/directives文件夹中创建你的自定义指令文件。例如,v-focus.ts和v-color.ts:v-focus.ts:import{Directive}from'vue';constvFocus:Directive={mounted(el){el.focus();}};ex......