Android: BottomNavigationBar—— 下部ナビゲーション バー コントロール

目次

1. BottomNavigationBar の概要

2. BottomNavigationBarの共通メソッドと共通クラス

(1) よく使われる方法

1. メニュー項目の追加

2. メニュー項目を削除する

3. 選択したリスナーを設定します

4. 現在選択されている項目を設定します 

5. バッジを設定する

 6. スタイルと色のカスタマイズ

7. アニメーション効果 

8. 下部のナビゲーション バーを非表示にします。

 9. 設定モード

10.bottomNavigationの初期化

 (2) よく使われるカテゴリー

 TextBadgeItem の共通メソッド:

 ShapeBadgeItem の共通メソッド:

3.bottomNavigationの使用例 

1. BottomNavigationBar の概要

        BottomNavigationBar は、Android アプリケーションの下部ナビゲーション バー コントロールであり、アプリケーションの異なるページ間をすばやく切り替えるためによく使用されます。直感的で使いやすいナビゲーションを提供し、ユーザーがアプリケーションのさまざまなモジュールに簡単にアクセスできるようにします。

依存関係パッケージ:

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'

2. BottomNavigationBarの共通メソッドと共通クラス

(1) よく使われる方法

        BottomNavigationBar は、下部ナビゲーション バーの外観と動作をカスタマイズおよび管理するために一般的に使用される一連のメソッドを提供します。以下は、BottomNavigationBar の一般的なメソッドとその呼び出し例の詳細な紹介です。

1. メニュー項目の追加

• addItem(BottomNavigationItem item): ナビゲーション バーにメニュー項目を追加します。

2. メニュー項目を削除する

• removeItem(int position): ナビゲーション バーから指定した位置にあるメニュー項目を削除します。

3. 選択したリスナーを設定します

• setOnTabSelectedListener(OnTabSelectedListener listener): ナビゲーションバーの選択リスナーを設定します。

4. 現在選択されている項目を設定します 

• setCurrentItem(int position, boolean animate)：現在選択されているメニュー項目を設定します。

• setFirstSelectedPosition(intposition) : デフォルトの選択項目を設定します。

5. バッジを設定する

• setNotification(String text, int position): メニュー項目の指定した位置にバッジを表示します。

• removeNotification(int position): 指定した位置にあるメニュー項目からバッジを削除します。

 6. スタイルと色のカスタマイズ

• setBackgroundStyle(int backgroundStyle): 下部ナビゲーション バーの背景スタイルを設定するために使用されます。

• setDefaultBackgroundColor(int color): ナビゲーション バーのデフォルトの背景色を設定します。
• setAccentColor(int color)：選択した項目の色を設定します。
• setInactiveColor(int color)：選択されていない項目の色を設定します。
• setTitleState(int state): タイトルの表示モードを設定します。オプションの値は STATE_ALWAYS_SHOW、STATE_ALWAYS_HIDE、STATE_SHOW_WHEN_ACTIVE です。
• setTitleTextSize(int textSize)：タイトルの文字サイズを設定します。

7. アニメーション効果 

• setColored(boolean colored)：選択した項目のカラーアニメーション効果を有効にするかどうかを設定します。
• setBehaviorTranslationEnabled(boolean enabled)：下部ナビゲーションバーのスライド効果を有効にするかどうかを設定します。

8.下部のナビゲーション バーを非表示にします。

• hideBottomNavigation(boolean hide): 下部のナビゲーション バーを表示または非表示にします。

 9. 設定モード

• setMode(int モード) :

1. MODE_FIXED: 固定モード

   • このモードは、ナビゲーション バーのメニュー項目の数が 3 以下の場合にお勧めします。
   • 固定モードでは、すべてのメニュー項目が下部のナビゲーション バーに均等に配置され、サイズも同じになります。

2. MODE_SHIFTING: 移動モード

   • このモードは、ナビゲーション バーのメニュー項目の数が 3 つを超える場合にお勧めします。
   • モバイル モードでは、現在選択されているメニュー項目が強調表示され、選択されていない他のメニュー項目は縮小して上に移動します。

10.bottomNavigationの初期化

•  Initialise(): 下部ナビゲーション バーの初期化を完了するために使用されます。

 (2) よく使われるカテゴリー

1. BottomNavigationBar: ボトム ナビゲーション バーのメイン クラス。ボトム ナビゲーション アイテムの作成と管理に使用されます。このクラスを通じて、ナビゲーション バーのモード、背景スタイル、メニュー項目、およびその他のプロパティを設定し、ナビゲーション項目の選択イベントをリッスンすることができます。
2. BadgeItem: バッジ クラス。ナビゲーション バーのメニュー項目にバッジを表示するために使用されます。これには 2 つのサブクラスがあります:TextBadgeItem :メニュー項目にテキストの字幕を表示するために使用されます。ShapeBadgeItem:メニュー項目に円、四角などの形状アイコンを表示するために使用されます。 
3. BottomNavigationItem:各メニュー項目の作成に使用される下部ナビゲーション項目のクラス。このクラスを通じて、アイコン、タイトル、選択状態のアイコンを設定することができます。
4. OnTabSelectedListener: 下部のナビゲーション バーのタブからリスナー インターフェイスを選択します。このインターフェイスを実装すると、タブの選択されたイベントを監視し、対応するコールバック メソッドで処理できます。

5. BadgeAnimation:バッジ アニメーション クラスは、バッジの出現と消滅のアニメーション効果を定義するために使用されます。

 TextBadgeItem常用方法：

• setText(String text)：コーナーマークに表示する文字内容を設定します。
• setBackgroundColor(int color)：コーナーマークの背景色を設定します。
• setTextColor(int color)：下付き文字の色を設定します。
• setHideOnSelect(boolean hideOnSelect): メニュー項目選択時にコーナーマークを非表示にするかどうかを設定します (デフォルトは false)。
• setAnimationDuration(long duration): コーナー マークのアニメーションの継続時間をミリ秒単位で設定します。
• show()およびhide(): バッジを手動で表示または非表示にします。 
•  setShape(Shape shape)：コーナーマークの形状を設定します。

 ShapeBadgeItem常用方法：

• setIconDrawable(Drawable icon)：メニュー項目のアイコンを設定します。
• setInactiveIconDrawable(Drawable icon)：メニュー項目の未選択状態のアイコンを設定します。 
• setText(String text)：メニュー項目のテキスト内容を設定します。
•  setInactiveColor(int color)：メニュー項目の非選択状態の色を設定します。
• setActiveColor(int color)：メニュー項目の選択状態の色を設定します。
• setBadgeItem(BadgeItem badgeItem)：メニュー項目のコーナーマークを設定します。

3.bottomNavigationの使用例 

主な活動： 

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() {
        // 设置固定模式
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        // 设置点击事件
        mBottomNavigationBar.setTabSelectedListener(this);
        List<BottomNavigationItem> items= getBottomNavigationItem();
        mBottomNavigationBar.addItem(items.get(0))
                .setFirstSelectedPosition(0)
                .addItem(items.get(1))
                .addItem(items.get(2))
                // 此方法应在所有自定义方法结束时调用。此方法将考虑所有更改并重新绘制选项卡。
                .initialise();
                setDefaultFragment();
    }

    private List<BottomNavigationItem> getBottomNavigationItem() {
        initBadgeItem();
        // 用来存item的集合
        List<BottomNavigationItem> items = new ArrayList<>();
        // 创建Item1
        BottomNavigationItem homeItem = new BottomNavigationItem(R.drawable.home,"首页");
        // 设置被点击时的颜色
        homeItem.setActiveColor(R.color.purple_500).setBadgeItem(mShapeBadgeItem);
        // 设置没有被点中的颜色
//        homeItem.setInActiveColor(R.color.teal_200);
        // 设计没有被点中时的图片资源
//        homeItem.setInactiveIconResource(R.drawable.ic_launcher_foreground);
        items.add(homeItem);

        // 创建Item2
        BottomNavigationItem messageItem = new BottomNavigationItem(R.drawable.message,"信息");
        // 设置被点击时的颜色设置没有被点中的颜色
        messageItem.setActiveColor(R.color.purple_500)
//        .setInActiveColor(R.color.teal_200)
        .setBadgeItem(mTextBadgeItem);

//        .setInactiveIconResource(R.drawable.ic_launcher_foreground);
        items.add(messageItem);

        // 创建Item2
        BottomNavigationItem personage = new BottomNavigationItem(R.drawable.person,"个人信息");
        // 设置被点击时的颜色设置没有被点中的颜色
        personage.setActiveColor(R.color.purple_500);
//                .setInActiveColor(R.color.teal_200)
//                .setInactiveIconResource(R.drawable.ic_launcher_foreground);
        items.add(personage);
        return items;
    }

    /**
     * 设置徽章
     */
    private void initBadgeItem() {
        mTextBadgeItem = new TextBadgeItem();
        mTextBadgeItem.setText("99+")
                .setTextColor("#ffffff")
                .setBorderWidth(5)
                .setBackgroundColor("#ff4083")
                .setHideOnSelect(false); // 选中是否隐藏
//                .setGravity(Gravity.TOP); // 设置位置
        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一起使用
    }
    /**
     * 设置默认开启的fragment
     */
    private void setDefaultFragment() {
        mFragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = mFragmentManager.beginTransaction();
        firstFragment = new FirstFragment();
        transaction.add(R.id.tb, firstFragment);
        transaction.commit();
    }
    /**
     * 隐藏当前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;//每次点击赋值
        //开启事务
        transaction = mFragmentManager.beginTransaction();
        // 隐藏当前的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;
        }
        // 事务提交
        transaction.commit();
    }

    @Override
    public void onTabUnselected(int position) {
        // 没有被选中时，调用该方法
    }

    @Override
    public void onTabReselected(int position) {
        // 再次选中时，调用此方法
    }

}

コード分​​析:

MainActivityクラスは、下部のナビゲーション バーを含むアクティビティです。このメソッドでは、onCreate()を呼び出すことでinitBottomNavigationBar()下部のナビゲーション バーが初期化されます。

メソッド内initBottomNavigationBar():

• 下部のナビゲーション バーのモードを に設定すると、 MODE_SHIFTINGユーザーがクリックするとタブが移動します。
• 下部ナビゲーション バーのクリック イベント リスナーを現在のアクティビティ ( this) として設定します。
• メソッドを呼び出して getBottomNavigationItem() 下部ナビゲーション バーのタブ コレクションを取得し、それを下部ナビゲーション バーに追加します。
• このメソッドを呼び出して initialise() 下部ナビゲーション バーの初期化を完了し、デフォルトで表示されるフラグメントを設定します。

メソッド内getBottomNavigationItem():

• 下部に 3 つのナビゲーション タブを作成しました BottomNavigationItem。
• アイコン、テキスト、クリック時色、非クリック時色、非クリック時アイコンリソースをそれぞれ設定します。
• タブをリストに追加して戻ります。

これに加えて、他のメソッドも定義されています。

• initBadgeItem(): 2 つのバッジ (TextBadgeItem と ShapeBadgeItem) を初期化し、そのプロパティを設定します。
• setDefaultFragment(): デフォルトで表示されるフラグメントを に設定します FirstFragment。
• hideFragment(FragmentTransaction transaction): 現在表示されているフラグメントを非表示にします。
• onTabSelected(int position): タブが選択されたときにイベントを処理し、位置に応じて異なるフラグメントを切り替えます。
• onTabUnselected(int position): タブの選択解除のイベントを処理します。
• onTabReselected(int position): タブが再度選択されたときのイベントを処理します。

概要: このコードは、下部のタブをクリックすると別のフラグメントの表示に切り替わる下部ナビゲーション バーを含むアクティビティです。必要に応じて、下部のナビゲーション バーのスタイルを変更したり、タブを追加したり、対応するフラグメントを設定したりできます。

 最初のフラグメント:

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="第一个Fragment"
        android:textSize="30sp" />
</LinearLayout>

アクティビティメイン: 

<?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 と同じです。

実行結果:

 

 

 4. まとめ

        BottomNavigationBar は、モバイル アプリケーションで一般的に使用される一般的なユーザー インターフェイスのデザイン パターンです。以下に、BottomNavigationBar の長所と短所をまとめます。

アドバンテージ：

1. 直感的なナビゲーションを提供する: 下部ナビゲーション バーは通常、画面の下部に配置されており、ユーザーは主要な機能やナビゲーション オプションに簡単にアクセスできます。このレイアウトは、ユーザーの自然な操作習慣により沿っており、直感的なナビゲーション エクスペリエンスを提供します。
2. 画面スペースの節約: ナビゲーション オプションを下部に配置すると、画面上部のスペースが節約され、アプリケーションのコンテンツの表示にさらに使用できます。特に大画面デバイスの場合、この設計により画面スペースが有効に活用されます。
3. 指で簡単操作：下部のナビゲーションバーが指の自然な位置に近いため、携帯端末の姿勢を頻繁に変えることなく、親指で簡単に操作できます。
4. 現在の場所を強調する: 現在のアクティビティまたは選択したナビゲーション オプションを強調表示することで、下部のナビゲーション バーはユーザーが自分の位置をより明確に把握し、状況に応じたナビゲーションを提供できるようにします。

欠点:

1. 画面スペースの制限: 下部のナビゲーション バーは画面上部のスペースを節約しますが、画面下部でも一定の高さを占めます。一部のアプリケーションでは、これにより、利用可能なコンテンツ表示領域が減少する場合があります。
2. オプション数の制限: 下部ナビゲーション バーは、通常、主要な機能またはナビゲーション オプションが 5 つ以下のアプリケーションに適しています。オプションが多すぎると、ナビゲーション バーが混雑し、識別や操作が困難になる場合があります。
3. デザインの一貫性: ボトム ナビゲーションは一般的なデザイン パターンですが、すべてのアプリで機能するわけではありません。下部のナビゲーション バーの使用を選択する場合は、それがアプリの全体的なデザイン スタイルとユーザーの期待と一致していることを確認してください。

        要約すると、BottomNavigationBar には、直観的で省スペースで操作が簡単であるという利点がありますが、画面スペースの制限やオプションの数が限られているなどの欠点もあります。アプリを設計するときは、下部のナビゲーション バーを使用するかどうかを慎重に検討し、それがアプリの全体的なデザインと一貫していることを確認する必要があります。