博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
仅2步实现 拜拜 汉堡导航栏效果~ 全新底部导航交互(滑动隐藏)
阅读量:6909 次
发布时间:2019-06-27

本文共 1930 字,大约阅读时间需要 6 分钟。

抄了 @ImmortalZ 哥们的标题..别怪我哈

本文同步自

布吉岛大家有木有看这一篇文章,

本库下载地址:

里面介绍的新得交互是这样的:

总之总结一下就是:

  • 滚动时隐藏: 我们希望在用户的屏幕上显示尽可能多的内容。因此,我们决定在向下滚动的时候隐藏导航栏,从而给内容区域提供更多的空间。而向上滚动可以使导航栏重新显现。
  • 变换式导航栏: Material Design 底部栏有一个非常平滑的动画,它参考了变换式导航栏——在不同目标间切换的时候,被选中的部分会被放大,同时未被选中的元素会被向后移动,从而在导航栏上浏览不同的目标就有点像在浏览一个旋转木马。我们决定要使用这种效果因为它使得切换导航目标变得更加有趣了。我们希望这可以推动我们的用户更多地在应用的不同功能组间切换。同时,该动画在我们的下一个观点中非常重要。

恩~ 看起来效果还不错,所以我就封装了一下系统的BottomNavigationView并且添加了滑动隐藏效果~ 实现如上图效果,只需要2步!

先来看看使用我的库的效果:

在gradle添加

allprojects {    repositories {        jcenter()        maven { url "https://jitpack.io" }    }}dependencies {   compile 'com.github.githubwing:ByeBurger:v1.0'  compile 'com.android.support:design:25.0.0'  }复制代码

第一步:写一个xml,以CoordinatorLayout为跟布局。把ByeBurgerNavigationView加入到布局中

<--! important --> app:menu="@menu/bottom" app:layout_behavior="@string/bye_burger_behavior" android:layout_width="match_parent" android:layout_height="wrap_content" app:itemIconTint="@color/colorPrimary" app:itemTextColor="@color/colorPrimary" />
复制代码

注意app:menu是给菜单的布局关联的,app:layout_behavior是库自留behavior的包名。。照写就对了。。

第二部,创建一个menu xml

复制代码

之后在代码里将viewpager和byeburger关联即可

mByeBurger.setOnNavigationItemSelectedListener(        new BottomNavigationView.OnNavigationItemSelectedListener() {          @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) {            if(item.getTitle().equals("home")){              mViewPager.setCurrentItem(0);            }else if(item.getTitle().equals("search")){              mViewPager.setCurrentItem(1);            }else if(item.getTitle().equals("me")){              mViewPager.setCurrentItem(2);            }else if(item.getTitle().equals("setting")){              mViewPager.setCurrentItem(3);            }            return false;          }        });复制代码

以上就完成了使用~

如果你觉得还不错 欢迎star

本库下载地址:

欢迎加入我的android群:425983695

转载地址:http://clfcl.baihongyu.com/

你可能感兴趣的文章
css浮动及其危害和解决方法
查看>>
【译】Go和WebAssembly:在浏览器中运行Go程序
查看>>
解决Linux下使用pm2运行nuxt2.0,IP+端口访问不了
查看>>
snabbdom源码解析(四) patch 方法
查看>>
Spring Boot项目使用maven-assembly-plugin根据不同环境打包成tar.gz或者zip
查看>>
《Redis入门指南(第2版)》摘要
查看>>
【C++】 2_C 到 C++ 的升级
查看>>
spring-boot登陆过滤功能
查看>>
JS专题之事件循环
查看>>
vue-cli引用mui的JS文件遇到的问题
查看>>
三分钟搞定注册并且认证小程序!
查看>>
阿里敏捷实践| 4个迭代,从批量交付向持续交付转型
查看>>
Framework 核心服务之 PackageManagerService 钻研(5)- APK 安装流程(PI)
查看>>
var 是 Java 开发的好朋友啊!
查看>>
CentOS学习笔记 - 11. 搭建Centos7.5本地repo
查看>>
【LeetCode】初级算法-136.只出现一次的数
查看>>
分布式(一) 搞定服务注册与发现
查看>>
精读《手写 SQL 编译器 - 回溯》
查看>>
Spring XML MongoDB连接配置指定用户名和密码注意事项
查看>>
jvm内存区域
查看>>