# BottomBar
**Repository Path**: HarmonyOS-tpc/BottomBar
## Basic Information
- **Project Name**: BottomBar
- **Description**: A custom view component that Bottom Navigation pattern.
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 5
- **Forks**: 1
- **Created**: 2021-04-01
- **Last Updated**: 2023-04-17
## Categories & Tags
**Categories**: harmonyos-menu
**Tags**: None
## README
## 在中文路径下，Build Debug Hap(s)会失败。建议将项目放置在全英文目录下
## 集成
方式一：
通过library生成har包，添加har包到libs文件夹内
在entry的gradle内添加如下代码
```gradle
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
```
方式二：
```gradle
allprojects{
repositories{
mavenCentral()
}
}
implementation 'io.openharmony.tpc.thirdlib:BottomBar:1.0.2'
```
# BottomBar
## What?
|A custom view component that Bottom Navigation pattern.|
|:---:|
|
|
## How?
You can add items by **writing a XML resource file**.
### Adding items from XML resource
Define your tabs in an resource file.
**rawfile/xml/bottombar_tabs_three.xml:**
```xml
```
Then, add the BottomBar to your layout and give it a resource id for your tabs xml file.
**layout/ability_three_tabs.xml**
```xml
```
### Setting up listeners
By default, the tabs don't do anything unless you listen for selection events and do something when the tabs are selected.
**ThreeTabsAbility.java:**
```java
public class ThreeTabsAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
setUIContent(ResourceTable.Layout_ability_three_tabs);
Text messageView = (Text) findComponentById(ResourceTable.Id_messageView);
BottomBar bottomBar = (BottomBar) findComponentById(ResourceTable.Id_bottomBar);
bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelected(String idtag) {
if ("tab0".equals(idtag)) {
// The tab with idtag tab0 was selected,
// change your content accordingly.
}
}
});
}
}
```
If you want to listen for reselection events, here's how you do it:
```java
bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
@Override
public void onTabReSelected(String idtag) {
if ("tab0".equals(idtag)) {
// The tab with idtag tab0 was selected,
// change your content accordingly.
}
}
});
```
### Intercepting tab selections
If you want to conditionally cancel selection of any tab, you absolutely can. Just assign a ```TabSelectionInterceptor``` to the BottomBar, and return true from the ```shouldInterceptTabSelection()``` method.
```java
bottomBar.setTabSelectionInterceptor(new TabSelectionInterceptor() {
@Override
public boolean shouldInterceptTabSelection(String oldTabIdtag, String newTabIdtag) {
if (newTabId.equals("tab0") && !userHasProVersion()) {
startProVersionPurchaseFlow();
return true;
}
return false;
}
});
```
### Those color changing tabs look dope. Howdoidodat?
Just add ```barColorWhenSelected``` to each tab. When that tab is selected, the whole BottomBar background color is changed with a nice animation.
**res/xml/bottombar_tabs.xml**
```xml
```
### What about Tablets?
Specify a different layout for your ability in ```resources/horizontal/layout``` folder and set ```bb_tabletMode``` to true.
**resources/horizontal/layout/activity_main.xml:**
```xml
```
### Badges
You can easily add badges for showing an unread message count or new items / whatever you like.
```java
BottomBarTab tab2 = bottomBar.getTabWithIdtag("tab2");
tab2.setBadgeCount(9);
// Remove the badge when you're done with it.
tab2.removeBadge();
```
## All customization options
### For the BottomBar
```xml
```
- bb_tabXmlResource
- the XML Resource id for your tabs, that reside in
rawfile/xml/
- bb_tabletMode
- if you want the BottomBar to behave differently for tablets. There's an example of this in the sample project!
- bb_behavior
shifting: the selected tab is wider than the rest. iconOnly: put the BottomBar just show icon and don't show title shifting|iconOnly: shifting mode + iconOnly mode. none:default value- bb_inActiveTabAlpha
- the alpha value for inactive tabs, that's used in the tab icons and titles.
- bb_activeTabAlpha
- the alpha value for active tabs, that's used in the tab icons and titles.
- bb_inActiveTabColor
- the color for inactive tabs, that's used in the tab icons and titles.
- bb_activeTabColor
- the color for active tabs, that's used in the tab icons and titles.
- bb_badgeBackgroundColor
- the background color for any Badges in this BottomBar.
- bb_badgesHideWhenActive
- whether badges should be hidden for active tabs, defaults to true.
- bb_titleTypeFace
- path for your custom font file, such as
rawfile/fonts/MySuperDuperFont.ttf.
### For the tabs
```xml
```
- inActiveColor
- the color for inactive tabs, that's used in the tab icons and titles.
- activeColor
- the color for active tabs, that's used in the tab icons and titles.
- barColorWhenSelected
- the color that the whole BottomBar should be when selected this tab.
- badgeBackgroundColor
- the background color for any Badges in this tab.
- badgeHidesWhenActive
- whether or not the badge should be hidden when this tab is selected, defaults to true.
- iconOnly
- set the iconOnly mode of each tab separately.
## Contributions
Feel free to create issues and pull requests.
When creating pull requests, **more is more:** I'd like to see ten small pull requests separated by feature rather than all those combined into a huge one.
## License
```
BottomBar library for Android
Copyright (c) 2016 Iiro Krankka (http://github.com/roughike).
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```