Iwfu-GitHub--BottomBar组件

2023-10-15 12:38
文章标签 组件 github iwfu bottombar

本文主要是介绍Iwfu-GitHub--BottomBar组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

组件来源于GitHub。
地址: https://github.com/roughike/BottomBar

效果:

效果1

这里写图片描述

以下是我自己的学习使用BottomBar过程。

添加依赖

compile 'com.roughike:bottom-bar:1.3.1'

添加完后我的.gralde文件:

dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])testCompile 'junit:junit:4.12'compile 'com.android.support:appcompat-v7:23.2.1'compile 'com.roughike:bottom-bar:1.3.1'
}

编译报错,提示无法编译appcompat-v7:23.2.1和design:23.2.1（原因在BottomBar中要用到这两个支持包）。
根据提示信息发现sdk支持库版本太低，打开sdk Manager后更新Extra里Android Support Library和Google Repository即可。

更新后build.gradle:

dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])testCompile 'junit:junit:4.12'compile 'com.roughike:bottom-bar:1.3.1'compile 'com.android.support:appcompat-v7:23.2.1'compile 'com.android.support:design:23.2.1'
}

创建BottomBar

BottomBar暂不支持在xml文件创建,只能在Java代码中创建.

先创建tab的菜单项文件,在res文件夹下新建menu文件夹，在menu中新建bottombar_menu菜单文件. 

<itemandroid:id="@+id/bm1"android:icon="@mipmap/ic_launcher"android:title="首页"/><itemandroid:id="@+id/bm2"android:icon="@mipmap/ic_launcher"android:title="聊天"/>
<itemandroid:id="@+id/bm3"android:icon="@mipmap/ic_launcher"android:title="发现"/>
<itemandroid:id="@+id/bm4"android:icon="@mipmap/ic_launcher"android:title="设置"/>

因为BottomBar支持图标文字动画效果的,创建菜单时给tab项要加上图标。不然会出现文字不显示的问题。

在onCreate()中:

//将bottomBar依附到Activity中
bottomBar = BottomBar.attach(this, savedInstanceState);
bottomBar.setItemsFromMenu(R.menu.bottombar_menu,new OnMenuTabClickListener() {//tab被选择时触发@Overridepublic void onMenuTabSelected(int menuItemId) {// 给不同的tab设置颜色bottomBar.mapColorForTab(0, "#E0572A");bottomBar.mapColorForTab(1, "#468CC9");bottomBar.mapColorForTab(2, "#609E79");bottomBar.mapColorForTab(3, "#9B9B9B");}//tab被重复选择时触发@Overridepublic void onMenuTabReSelected(int menuItemId) {}});

加上未读消息标志

// 设置tab上徽章标记(类似于未读信息)
unreadMessage = bottomBar.makeBadgeForTabAt(1, "#FF0000", 13);
unreadMessage.show();// 改变标记值
unreadMessage.setCount(3);// 设置标记在tab未被选择时也显示
unreadMessage.setAutoShowAfterUnSelection(true);

在监听tab滑动处可以改变未读消息标志的状态:

@Override
public void onMenuTabSelected(int menuItemId) {// 给不同的tab设置颜色bottomBar.mapColorForTab(0, "#E0572A");bottomBar.mapColorForTab(1, "#468CC9");bottomBar.mapColorForTab(2, "#609E79");bottomBar.mapColorForTab(3, "#9B9B9B");switch (menuItemId){case R.id.bm1:break;case R.id.bm2://一旦进入这个页面则隐藏未读消息提示unreadMessage.hide();unreadMessage.setAutoShowAfterUnSelection(false);break;case R.id.bm3:break;case R.id.bm4:break;}
}

保存BottomBar状态

    // 保存退出界面时的bottombar状态@Overrideprotected void onSaveInstanceState(Bundle outState) {// super.onSaveInstanceState (outState);bottomBar.onSaveInstanceState(outState);}

设置滑动时隐藏BottomBar

要达到类似图一的效果，其实很简单,主要用到Design包的协调布局(CoordinatorLayout)和嵌入式滑动布局(NestedScrollView)。

修改activity_main:

<android.support.design.widget.CoordinatorLayoutandroid:id="@+id/myCoordinatorLayout"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:context="com.demo.customview.MainActivity"><android.support.v4.widget.NestedScrollViewandroid:id="@+id/myScrollView"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

然后在MainActivity中修改:

//先find到CoordinatorLayout和NestedScrollView
// 添加到Activitiy中并使其可以随着向下滑动隐藏(调皮的原作者把方法名起的很贴切)
bottomBar = BottomBar.attachShy(myCoordinatorLayout, myScrollView,savedInstanceState);

实现ViewPager配合BottomBar使用

这是我的实验，让ViewPager加载Fragment配合BottomBar使用

初始化Viewpager和Fragment集合直接贴代码:

activitiy_main.xml:

<android.support.design.widget.CoordinatorLayoutandroid:id="@+id/myCoordinatorLayout"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:context="com.demo.customview.MainActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.view.ViewPager></android.support.design.widget.CoordinatorLayout>

与CoordinatorLayout配合使用的NestedScrollView放在Fragment对应的xml文件根布局。若fragment不需要实现隐藏bottombar功能，则不需要使用NestedScrollView

MainActivity:

//初始化ViewPager
private void initViewPager() {fragmentList = new ArrayList<> ();fragmentList.add (new bmFrag1 ());fragmentList.add (new bmFrag2 ());fragmentList.add (new bmFrag3 ());fragmentList.add (new bmFrag4 ());viewPager = (ViewPager) findViewById(R.id.viewPager);viewPager.addOnPageChangeListener (new ViewPager.OnPageChangeListener () {@Overridepublic void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected (int position) {//设置滑动viewpager，底部bottombar也随着改变bottomBar.selectTabAtPosition (position,true);}@Overridepublic void onPageScrollStateChanged (int state) {}});viewPager.setAdapter (new FragmentStatePagerAdapter (getSupportFragmentManager ()) {@Overridepublic Fragment getItem (int position) {return fragmentList.get (position);}@Overridepublic int getCount () {return fragmentList.size ();}});}

在bottombar的滑动监听中修改：

bottomBar.setItemsFromMenu(R.menu.bottombar_menu,new OnMenuTabClickListener() {@Overridepublic void onMenuTabSelected(int menuItemId) {// 给不同的tab设置颜色bottomBar.mapColorForTab(0, "#E0572A");bottomBar.mapColorForTab(1, "#468CC9");bottomBar.mapColorForTab(2, "#609E79");bottomBar.mapColorForTab(3, "#9B9B9B");//设置viewpager随bottombar而变化switch (menuItemId){case R.id.bm1:viewPager.setCurrentItem (0);break;case R.id.bm2:viewPager.setCurrentItem (1);//一旦进入这个页面则隐藏未读消息提示unreadMessage.hide();unreadMessage.setAutoShowAfterUnSelection(false);break;case R.id.bm3:viewPager.setCurrentItem (2);break;case R.id.bm4:viewPager.setCurrentItem (3);break;}}@Overridepublic void onMenuTabReSelected(int menuItemId) {}});

此时完成效果如下:

bottombar1

发现当滑动viewpager时，下面的bottombar的tab指示器会随之改变，但是缺少tab移动的动画效果。而由bottombar改变viewpager显示是正常的。所以在用viewpager时，最好设置不改变tab大小。

// 设置每个切换标签其大小不变
bottomBar.noResizeGoodness ();

此时效果:
bottom2

另外，使用viewpager时若使用bottombar的隐藏模式会产生操作冲突，所以不建议viewpager和bottombar隐藏模式一起使用.

其他方法

// 使用夜间模式
bottomBar.useDarkTheme ();//如果只有三个或以下数量的Tab，可以设置选中的那个tab的颜色,tab数量大于3则无效
bottomBar.setActiveTabColor ("#000000");// 设置字体样式bottomBar.setTypeFace ();....

以上就是我对于这个GitHub上轮子的学习，仅代表个人理解，有不足之处欢迎指正 : )

附：BottomBar练习源码

http://download.csdn.net/detail/rosechan/9484015

这篇关于Iwfu-GitHub--BottomBar组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/217749。

相关文章

四种Flutter子页面向父组件传递数据的方法介绍

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1：使用 GlobalKey 和 State 调用子组件方法方法 2：通过回调函数（Callb
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
基于Qt Qml实现时间轴组件

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...
如何提高 GitHub 的下载速度

如何提高 GitHub 的下载速度

如何提高 GitHub 的下载速度 文章目录 如何提高 GitHub 的下载速度1. 注册账号2. 准备好链接3. 创建仓库4. 在码云上下载代码5. 仓库更新了怎么办 一般来说，国内的朋友从 GitHub 上面下载代码，速度最大是 20KB/s，这种龟速，谁能忍受呢？ 本文介绍一种方法——利用“码云”，可以大大提高下载速度，亲测有效。 1. 注册账号 去“码云”注册一
阅读更多...
kubelet组件的启动流程源码分析

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理，在有一定基础认识的前提下，通过阅读kubelet源码，对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除
阅读更多...
火语言RPA流程组件介绍--浏览网页

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】：浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2