目錄
一、BottomNavigationBar介紹
二、BottomNavigationBar的常用方法及其常用類
(一)、常用方法
1. 添加菜單項(xiàng)
2. 移除菜單項(xiàng)
3. 設(shè)置選中監(jiān)聽器
4. 設(shè)置當(dāng)前選中項(xiàng)?
5. 設(shè)置徽章
?6. 樣式和顏色定制
7. 動畫效果?
8. 隱藏底部導(dǎo)航欄。
?9、設(shè)置模式
10.初始化?bottomNavigation
?(二)、常用類
?TextBadgeItem常用方法:
?ShapeBadgeItem常用方法:
三、bottomNavigation的使用例子?
一、BottomNavigationBar介紹
????????BottomNavigationBar是一個(gè)用于Android應(yīng)用程序的底部導(dǎo)航欄控件,通常用于在應(yīng)用程序的不同頁面之間進(jìn)行快速切換。它提供了一種直觀且易于使用的導(dǎo)航方式,使用戶可以輕松訪問應(yīng)用程序的各個(gè)模塊。
依賴包:
implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'
二、BottomNavigationBar的常用方法及其常用類
(一)、常用方法
????????BottomNavigationBar提供了一系列常用的方法,用于定制和管理底部導(dǎo)航欄的外觀和行為。以下是BottomNavigationBar的常用方法及其調(diào)用例子的詳細(xì)介紹:
1. 添加菜單項(xiàng)
-
addItem(BottomNavigationItem item)
:向?qū)Ш綑谔砑右粋€(gè)菜單項(xiàng)。
2. 移除菜單項(xiàng)
-
removeItem(int position)
:從導(dǎo)航欄中移除指定位置的菜單項(xiàng)。
3. 設(shè)置選中監(jiān)聽器
-
setOnTabSelectedListener(OnTabSelectedListener listener)
:設(shè)置導(dǎo)航欄的選中監(jiān)聽器。
4. 設(shè)置當(dāng)前選中項(xiàng)?
-
setCurrentItem(int position, boolean animate)
:設(shè)置當(dāng)前選中的菜單項(xiàng)。 -
setFirstSelectedPosition(int position):設(shè)置默認(rèn)選中項(xiàng)。
5. 設(shè)置徽章
-
setNotification(String text, int position)
:在指定位置的菜單項(xiàng)上顯示徽章。
-
removeNotification(int position)
:移除指定位置菜單項(xiàng)上的徽章。
?6. 樣式和顏色定制
-
setBackgroundStyle(int backgroundStyle):用于設(shè)置底部導(dǎo)航欄的背景樣式。
-
setDefaultBackgroundColor(int color)
:設(shè)置導(dǎo)航欄的默認(rèn)背景顏色。 -
setAccentColor(int color)
:設(shè)置選中項(xiàng)的顏色。 -
setInactiveColor(int color)
:設(shè)置未選中項(xiàng)的顏色。 -
setTitleState(int state)
:設(shè)置標(biāo)題的顯示方式,可選值有STATE_ALWAYS_SHOW、STATE_ALWAYS_HIDE和STATE_SHOW_WHEN_ACTIVE。 -
setTitleTextSize(int textSize)
:設(shè)置標(biāo)題的字體大小。
7. 動畫效果?
-
setColored(boolean colored)
:設(shè)置是否啟用選中項(xiàng)的顏色動畫效果。 -
setBehaviorTranslationEnabled(boolean enabled)
:設(shè)置是否啟用底部導(dǎo)航欄的滑動效果。
8. 隱藏底部導(dǎo)航欄。
-
hideBottomNavigation(boolean hide)
:顯示或隱藏底部導(dǎo)航欄。
?9、設(shè)置模式
-
setMode(int mode) :
-
MODE_FIXED:固定模式
- 當(dāng)導(dǎo)航欄的菜單項(xiàng)個(gè)數(shù)小于等于3個(gè)時(shí),推薦使用此模式。
- 在固定模式下,所有的菜單項(xiàng)會平均分布在底部導(dǎo)航欄中,且大小相等。
-
MODE_SHIFTING:移動模式
- 當(dāng)導(dǎo)航欄的菜單項(xiàng)個(gè)數(shù)大于3個(gè)時(shí),推薦使用此模式。
- 在移動模式下,當(dāng)前選中的菜單項(xiàng)會突出顯示,而其他未選中的菜單項(xiàng)則會縮小并向上移動。
10.初始化?bottomNavigation
- ?initialise():用于完成底部導(dǎo)航欄的初始化。
?(二)、常用類
-
BottomNavigationBar
:底部導(dǎo)航欄的主要類,用于創(chuàng)建和管理底部導(dǎo)航項(xiàng)。通過該類,可以設(shè)置導(dǎo)航欄的模式、背景樣式、菜單項(xiàng)等屬性,并監(jiān)聽導(dǎo)航項(xiàng)的選中事件。 -
BadgeItem
:角標(biāo)類,用于在導(dǎo)航欄的菜單項(xiàng)上顯示角標(biāo)。它有兩個(gè)子類:TextBadgeItem
:用于在菜單項(xiàng)上顯示文本角標(biāo)。ShapeBadgeItem
:用于在菜單項(xiàng)上顯示形狀角標(biāo),如圓形、方形等。? -
BottomNavigationItem
:底部導(dǎo)航項(xiàng)的類,用于創(chuàng)建每個(gè)菜單項(xiàng)。通過該類,可以設(shè)置圖標(biāo)、標(biāo)題和選中狀態(tài)的圖標(biāo)。 -
OnTabSelectedListener
:底部導(dǎo)航欄的選項(xiàng)卡選中監(jiān)聽器接口。通過實(shí)現(xiàn)該接口,可以監(jiān)聽到選項(xiàng)卡的選中事件,并在相應(yīng)的回調(diào)方法中進(jìn)行處理。 -
BadgeAnimation
:角標(biāo)動畫類,用于定義角標(biāo)的出現(xiàn)和消失動畫效果。
?TextBadgeItem常用方法
:
-
setText(String text)
:設(shè)置角標(biāo)上顯示的文本內(nèi)容。 -
setBackgroundColor(int color)
:設(shè)置角標(biāo)的背景顏色。 -
setTextColor(int color)
:設(shè)置角標(biāo)文本的顏色。 -
setHideOnSelect(boolean hideOnSelect)
:設(shè)置是否在選中菜單項(xiàng)時(shí)隱藏角標(biāo),默認(rèn)為false。 -
setAnimationDuration(long duration)
:設(shè)置角標(biāo)動畫的持續(xù)時(shí)間,單位為毫秒。 -
show()
和hide()
:手動顯示和隱藏角標(biāo)。? - ?
setShape(Shape shape)
:設(shè)置角標(biāo)的形狀。
?ShapeBadgeItem常用方法
:
-
setIconDrawable(Drawable icon)
:設(shè)置菜單項(xiàng)的圖標(biāo)。 -
setInactiveIconDrawable(Drawable icon)
:設(shè)置菜單項(xiàng)的非選中狀態(tài)的圖標(biāo)。? -
setText(String text)
:設(shè)置菜單項(xiàng)的文本內(nèi)容。 - ?
setInactiveColor(int color)
:設(shè)置菜單項(xiàng)的非選中狀態(tài)的顏色。 -
setActiveColor(int color)
:設(shè)置菜單項(xiàng)的選中狀態(tài)的顏色。 -
setBadgeItem(BadgeItem badgeItem)
:為菜單項(xiàng)設(shè)置角標(biāo)。
三、bottomNavigation的使用例子?
MainActivity:?
package com.example.bottomnavigationbardemo;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.ashokvarma.bottomnavigation.ShapeBadgeItem;
import com.ashokvarma.bottomnavigation.TextBadgeItem;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
private FragmentManager mFragmentManager;
private BottomNavigationBar mBottomNavigationBar;
TextBadgeItem mTextBadgeItem;
ShapeBadgeItem mShapeBadgeItem;
private FirstFragment firstFragment;
private SecondFragment secondFragment;
private ThirdFragment thirdFragment;
private FragmentTransaction transaction;
int curPosition;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBottomNavigationBar = findViewById(R.id.bottom_navigation_bar);
initBottomNavigationBar();
}
private void initBottomNavigationBar() {
// 設(shè)置固定模式
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
// 設(shè)置點(diǎn)擊事件
mBottomNavigationBar.setTabSelectedListener(this);
List<BottomNavigationItem> items= getBottomNavigationItem();
mBottomNavigationBar.addItem(items.get(0))
.setFirstSelectedPosition(0)
.addItem(items.get(1))
.addItem(items.get(2))
// 此方法應(yīng)在所有自定義方法結(jié)束時(shí)調(diào)用。此方法將考慮所有更改并重新繪制選項(xiàng)卡。
.initialise();
setDefaultFragment();
}
private List<BottomNavigationItem> getBottomNavigationItem() {
initBadgeItem();
// 用來存item的集合
List<BottomNavigationItem> items = new ArrayList<>();
// 創(chuàng)建Item1
BottomNavigationItem homeItem = new BottomNavigationItem(R.drawable.home,"首頁");
// 設(shè)置被點(diǎn)擊時(shí)的顏色
homeItem.setActiveColor(R.color.purple_500).setBadgeItem(mShapeBadgeItem);
// 設(shè)置沒有被點(diǎn)中的顏色
// homeItem.setInActiveColor(R.color.teal_200);
// 設(shè)計(jì)沒有被點(diǎn)中時(shí)的圖片資源
// homeItem.setInactiveIconResource(R.drawable.ic_launcher_foreground);
items.add(homeItem);
// 創(chuàng)建Item2
BottomNavigationItem messageItem = new BottomNavigationItem(R.drawable.message,"信息");
// 設(shè)置被點(diǎn)擊時(shí)的顏色設(shè)置沒有被點(diǎn)中的顏色
messageItem.setActiveColor(R.color.purple_500)
// .setInActiveColor(R.color.teal_200)
.setBadgeItem(mTextBadgeItem);
// .setInactiveIconResource(R.drawable.ic_launcher_foreground);
items.add(messageItem);
// 創(chuàng)建Item2
BottomNavigationItem personage = new BottomNavigationItem(R.drawable.person,"個(gè)人信息");
// 設(shè)置被點(diǎn)擊時(shí)的顏色設(shè)置沒有被點(diǎn)中的顏色
personage.setActiveColor(R.color.purple_500);
// .setInActiveColor(R.color.teal_200)
// .setInactiveIconResource(R.drawable.ic_launcher_foreground);
items.add(personage);
return items;
}
/**
* 設(shè)置徽章
*/
private void initBadgeItem() {
mTextBadgeItem = new TextBadgeItem();
mTextBadgeItem.setText("99+")
.setTextColor("#ffffff")
.setBorderWidth(5)
.setBackgroundColor("#ff4083")
.setHideOnSelect(false); // 選中是否隱藏
// .setGravity(Gravity.TOP); // 設(shè)置位置
mShapeBadgeItem = new ShapeBadgeItem();
mShapeBadgeItem.setShape(ShapeBadgeItem.SHAPE_OVAL)
.setShapeColor(Color.RED)
.setEdgeMarginInDp(this,0) // 距離item的邊距,dP
.setSizeInDp(this, 15, 15) //寬高值,dp
.setHideOnSelect(false)
.setAnimationDuration(300); //隱藏和展示的動畫速度,單位毫秒,和setHideOnSelect一起使用
}
/**
* 設(shè)置默認(rèn)開啟的fragment
*/
private void setDefaultFragment() {
mFragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = mFragmentManager.beginTransaction();
firstFragment = new FirstFragment();
transaction.add(R.id.tb, firstFragment);
transaction.commit();
}
/**
* 隱藏當(dāng)前fragment
*
* @param transaction
*/
private void hideFragment(FragmentTransaction transaction) {
if (firstFragment != null) {
transaction.hide(firstFragment);
}
if (secondFragment != null) {
transaction.hide(secondFragment);
}
if (thirdFragment != null) {
transaction.hide(thirdFragment);
}
}
@Override
public void onTabSelected(int position) {
curPosition = position;//每次點(diǎn)擊賦值
//開啟事務(wù)
transaction = mFragmentManager.beginTransaction();
// 隱藏當(dāng)前的fragment
hideFragment(transaction);
switch (position) {
case 0:
if (firstFragment == null) {
firstFragment = new FirstFragment();
transaction.add(R.id.tb, firstFragment);
} else {
transaction.show(firstFragment);
}
// transaction.replace(R.id.tb, firstFragment);
break;
case 1:
if (secondFragment == null) {
secondFragment = new SecondFragment();
transaction.add(R.id.tb, secondFragment);
} else {
transaction.show(secondFragment);
}
break;
case 2:
if (thirdFragment == null) {
thirdFragment = new ThirdFragment();
transaction.add(R.id.tb, thirdFragment);
} else {
transaction.show(thirdFragment);
}
break;
}
// 事務(wù)提交
transaction.commit();
}
@Override
public void onTabUnselected(int position) {
// 沒有被選中時(shí),調(diào)用該方法
}
@Override
public void onTabReselected(int position) {
// 再次選中時(shí),調(diào)用此方法
}
}
代碼解析:
MainActivity
類是一個(gè)包含底部導(dǎo)航欄的活動。在 onCreate()
方法中,通過調(diào)用 initBottomNavigationBar()
初始化了底部導(dǎo)航欄。
在 initBottomNavigationBar()
方法中:
- 設(shè)置了底部導(dǎo)航欄的模式為?
MODE_SHIFTING
,表示選項(xiàng)卡會隨用戶的點(diǎn)擊而移動。 - 設(shè)置了底部導(dǎo)航欄的點(diǎn)擊事件監(jiān)聽器為當(dāng)前活動(
this
)。 - 調(diào)用?
getBottomNavigationItem()
?方法獲取底部導(dǎo)航欄的選項(xiàng)卡集合,并添加到底部導(dǎo)航欄中。 - 調(diào)用?
initialise()
?方法完成底部導(dǎo)航欄的初始化,并設(shè)置默認(rèn)顯示的片段。
在 getBottomNavigationItem()
方法中:
- 創(chuàng)建了三個(gè)底部導(dǎo)航欄的選項(xiàng)卡?
BottomNavigationItem
。 - 分別設(shè)置了選項(xiàng)卡的圖標(biāo)、文字、被點(diǎn)擊時(shí)的顏色、未被點(diǎn)擊時(shí)的顏色和未被點(diǎn)擊時(shí)的圖標(biāo)資源。
- 將選項(xiàng)卡添加到一個(gè)列表中并返回。
除此之外,還定義了其他方法:
-
initBadgeItem()
:初始化了兩個(gè)徽章(TextBadgeItem
?和?ShapeBadgeItem
),并設(shè)置其屬性。 -
setDefaultFragment()
:設(shè)置默認(rèn)顯示的片段為?FirstFragment
。 -
hideFragment(FragmentTransaction transaction)
:隱藏當(dāng)前顯示的片段。 -
onTabSelected(int position)
:處理選項(xiàng)卡被選中的事件,根據(jù)位置切換不同的片段。 -
onTabUnselected(int position)
:處理選項(xiàng)卡取消選中的事件。 -
onTabReselected(int position)
:處理選項(xiàng)卡再次被選中的事件。
總結(jié):該代碼是一個(gè)包含底部導(dǎo)航欄的活動,通過點(diǎn)擊底部選項(xiàng)卡來切換顯示不同的片段??梢愿鶕?jù)需要修改底部導(dǎo)航欄的樣式、添加更多的選項(xiàng)卡和設(shè)置對應(yīng)的片段。
?FirstFragment :
package com.example.bottomnavigationbardemo;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
public class FirstFragment extends Fragment {
@Override
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.activity_first_fragment, container, false);
return view;
}
}
?activity_first_fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一個(gè)Fragment"
android:textSize="30sp" />
</LinearLayout>
activity_main:?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
<FrameLayout
android:id="@+id/tb"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#eeeeee" />
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</LinearLayout>
注意: SecondFragment、ThirdFragment和FirstFragment的代碼一樣,其布局文件也跟activity_first_fragment一樣。
運(yùn)行效果:
?文章來源地址http://www.zghlxwxcb.cn/news/detail-715285.html
?
?四、總結(jié)
????????BottomNavigationBar(底部導(dǎo)航欄)是一種常見的用戶界面設(shè)計(jì)模式,常用于移動應(yīng)用程序中。下面是 BottomNavigationBar 的優(yōu)點(diǎn)和缺點(diǎn)的總結(jié):
優(yōu)點(diǎn):
1. 提供直觀的導(dǎo)航:底部導(dǎo)航欄通常位于屏幕底部,使用戶可以輕松訪問主要功能和導(dǎo)航選項(xiàng)。這種布局方式更符合用戶的自然操作習(xí)慣,提供了直觀的導(dǎo)航體驗(yàn)。
2. 節(jié)省屏幕空間:將導(dǎo)航選項(xiàng)放置在底部,可以節(jié)省屏幕頂部的空間,更多地用于顯示應(yīng)用程序的內(nèi)容。尤其對于大屏幕設(shè)備,這種設(shè)計(jì)可以更好地利用屏幕空間。
3. 易于使用手指操作:由于底部導(dǎo)航欄靠近手指自然的位置,用戶可以輕松地使用拇指進(jìn)行導(dǎo)航,而無需頻繁改變手持設(shè)備的姿勢。
4. 強(qiáng)調(diào)當(dāng)前位置:通過高亮顯示當(dāng)前活動或選中的導(dǎo)航選項(xiàng),底部導(dǎo)航欄可以幫助用戶更清楚地知道自己所處的位置,并提供上下文導(dǎo)航。
缺點(diǎn):
1. 屏幕空間限制:雖然底部導(dǎo)航欄節(jié)省了屏幕頂部的空間,但它也會占用屏幕底部的一定高度。對于某些應(yīng)用程序而言,這可能會減少可用的內(nèi)容顯示區(qū)域。
2. 選項(xiàng)數(shù)量限制:底部導(dǎo)航欄通常適用于不超過五個(gè)主要功能或?qū)Ш竭x項(xiàng)的應(yīng)用程序。如果選項(xiàng)過多,可能會導(dǎo)致導(dǎo)航欄變得擁擠,難以識別和操作。
3. 設(shè)計(jì)一致性:底部導(dǎo)航欄是一種常見的設(shè)計(jì)模式,但并不適用于所有應(yīng)用程序。在選擇使用底部導(dǎo)航欄時(shí),需要確保它與應(yīng)用程序的整體設(shè)計(jì)風(fēng)格和用戶期望一致。
????????綜上所述,BottomNavigationBar 提供了直觀、節(jié)省空間和易于操作的優(yōu)點(diǎn),但也存在屏幕空間限制和選項(xiàng)數(shù)量限制等一些缺點(diǎn)。在設(shè)計(jì)應(yīng)用程序時(shí),需要仔細(xì)考慮是否采用底部導(dǎo)航欄,并確保與應(yīng)用程序的整體設(shè)計(jì)一致。文章來源:http://www.zghlxwxcb.cn/news/detail-715285.html
?
到了這里,關(guān)于安卓:BottomNavigationBar——底部導(dǎo)航欄控件的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!