Android: BottomNavigationBar——Control de la barra de navegación inferior

BottomNavigationBar es un control de la barra de navegación inferior para aplicaciones de Android, que a menudo se usa para cambiar rápidamente entre diferentes páginas de la aplicación. Proporciona una navegación intuitiva y fácil de usar que permite a los usuarios acceder fácilmente a los distintos módulos de la aplicación.

Paquetes de dependencia:

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

2. Métodos comunes y clases comunes de BottomNavigationBar

(1) Métodos comúnmente utilizados

BottomNavigationBar proporciona una serie de métodos comúnmente utilizados para personalizar y administrar la apariencia y el comportamiento de la barra de navegación inferior. La siguiente es una introducción detallada a los métodos comunes de BottomNavigationBar y sus ejemplos de llamada:

1. Agregar elementos de menú

addItem(BottomNavigationItem item): Agrega un elemento de menú a la barra de navegación.

2. Eliminar elementos del menú

removeItem(int position): elimina el elemento del menú en la posición especificada de la barra de navegación.

3. Configure el oyente seleccionado.

setOnTabSelectedListener(OnTabSelectedListener listener): establece el oyente de selección de la barra de navegación.

4. Configure el elemento seleccionado actualmente

setCurrentItem(int position, boolean animate): establece el elemento del menú seleccionado actualmente.

setFirstSelectedPosition (int position) : establece el elemento seleccionado predeterminado.

5. Configurar insignias

setNotification(String text, int position): muestra la insignia en el elemento del menú en la ubicación especificada.

removeNotification(int position): elimina la insignia del elemento del menú en la ubicación especificada.

6. Personalización de estilo y color.

setBackgroundStyle (int backgroundStyle): se utiliza para establecer el estilo de fondo de la barra de navegación inferior.

setDefaultBackgroundColor(int color): establece el color de fondo predeterminado de la barra de navegación.
setAccentColor(int color): establece el color del elemento seleccionado.
setInactiveColor(int color): establece el color de los elementos no seleccionados.
setTitleState(int state): Establece el modo de visualización del título. Los valores opcionales son STATE_ALWAYS_SHOW, STATE_ALWAYS_HIDE y STATE_SHOW_WHEN_ACTIVE.
setTitleTextSize(int textSize): establece el tamaño de fuente del título.

7. Efectos de animación

setColored(boolean colored): establezca si se habilitará el efecto de animación de color del elemento seleccionado.
setBehaviorTranslationEnabled(boolean enabled): establezca si se habilitará el efecto deslizante de la barra de navegación inferior.

8. Oculte la barra de navegación inferior.

hideBottomNavigation(boolean hide): muestra u oculta la barra de navegación inferior.

9. Modo de configuración

```
setMode(modo int):
```

MODE_FIXED: modo fijo
- Este modo se recomienda cuando el número de elementos del menú en la barra de navegación es menor o igual a 3.
- En modo fijo, todos los elementos del menú se distribuyen uniformemente en la barra de navegación inferior y tienen el mismo tamaño.
MODE_SHIFTING: modo en movimiento
- Este modo se recomienda cuando el número de elementos del menú en la barra de navegación es mayor a 3.
- En el modo móvil, el elemento del menú seleccionado actualmente se resalta, mientras que otros elementos del menú no seleccionados se reducen y se mueven hacia arriba.

10.Inicializar navegación inferior

inicializar(): se utiliza para completar la inicialización de la barra de navegación inferior.

(2) Categorías de uso común

BottomNavigationBar: la clase principal de la barra de navegación inferior, utilizada para crear y administrar elementos de navegación inferior. A través de esta clase, puede configurar el modo, el estilo de fondo, los elementos del menú y otras propiedades de la barra de navegación, y escuchar el evento de selección del elemento de navegación.
BadgeItem: clase de insignia , utilizada para mostrar insignias en elementos del menú en la barra de navegación. Tiene dos subclases:TextBadgeItem se utiliza para mostrar subtítulos de texto en elementos del menú. ShapeBadgeItem: Se utiliza para mostrar iconos de formas en elementos del menú, como círculos, cuadrados, etc.
BottomNavigationItem: La clase del elemento de navegación inferior utilizada para crear cada elemento del menú. A través de esta clase, puede configurar el ícono, el título y el ícono en el estado seleccionado.
OnTabSelectedListener: Seleccione la interfaz del oyente en la pestaña en la barra de navegación inferior . Al implementar esta interfaz, el evento seleccionado de la pestaña se puede monitorear y procesar en el método de devolución de llamada correspondiente.
BadgeAnimation: La clase de animación de insignia se utiliza para definir los efectos de animación de aparición y desaparición de la insignia.

`TextBadgeItem常用方法`:

setText(String text): establece el contenido del texto que se muestra en la marca de la esquina.
setBackgroundColor(int color): establece el color de fondo de la marca de la esquina.
setTextColor(int color): establece el color del texto del subíndice.
setHideOnSelect(boolean hideOnSelect): establezca si se ocultará la marca de la esquina cuando se seleccione el elemento del menú. El valor predeterminado es falso.
setAnimationDuration(long duration): establece la duración de la animación de la marca de esquina, en milisegundos.
show()y hide(): mostrar y ocultar manualmente la insignia.
setShape(Shape shape): establece la forma de la marca de la esquina.

`ShapeBadgeItem常用方法`:

setIconDrawable(Drawable icon): establece el icono del elemento del menú.
setInactiveIconDrawable(Drawable icon): establece el icono del estado no seleccionado del elemento del menú.
setText(String text): establece el contenido del texto del elemento del menú.
setInactiveColor(int color): establece el color del estado no seleccionado del elemento del menú.
setActiveColor(int color): establece el color del estado seleccionado del elemento del menú.
setBadgeItem(BadgeItem badgeItem): establece la marca de esquina para el elemento del menú.

3. Ejemplos de uso de bottomNavigation

Actividad principal:

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) {
        // 再次选中时，调用此方法
    }

}

Análisis de código:

MainActivityLa clase es una actividad que contiene una barra de navegación inferior. En el método, la barra de navegación inferior se inicializa onCreate()llamando a .initBottomNavigationBar()

En initBottomNavigationBar()método:

Configurar el modo de la barra de navegación inferior MODE_SHIFTINGsignifica que las pestañas se moverán cuando el usuario haga clic.
Establezca el detector de eventos de clic de la barra de navegación inferior como la actividad actual ( this).
Llame getBottomNavigationItem() al método para obtener la colección de pestañas de la barra de navegación inferior y agréguela a la barra de navegación inferior.
Llame initialise() al método para completar la inicialización de la barra de navegación inferior y configurar el fragmento mostrado de forma predeterminada.

En getBottomNavigationItem()método:

Creé tres pestañas de navegación inferiores BottomNavigationItem.
El icono, el texto, el color al hacer clic, el color cuando no se hace clic y el recurso del icono cuando no se hace clic se configuran respectivamente.
Agrega pestañas a una lista y regresa.

Además de esto, se definen otros métodos:

initBadgeItem(): Inicializa dos insignias ( TextBadgeItem y ShapeBadgeItem) y establece sus propiedades.
setDefaultFragment(): establece el fragmento mostrado predeterminado en FirstFragment.
hideFragment(FragmentTransaction transaction): Oculta el fragmento mostrado actualmente.
onTabSelected(int position): Maneja el evento cuando se selecciona la pestaña y cambia diferentes fragmentos según la posición.
onTabUnselected(int position): Maneja el evento de deselección de pestaña.
onTabReselected(int position): Maneja el evento cuando la pestaña se selecciona nuevamente.

Resumen: este código es una actividad que contiene una barra de navegación inferior que cambia para mostrar diferentes fragmentos al hacer clic en la pestaña inferior. Puede modificar el estilo de la barra de navegación inferior, agregar más pestañas y configurar los fragmentos correspondientes según sea necesario.

Primer fragmento:

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;
    }
}

actividad_primer_fragmento:

<?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>

actividad_principal:

<?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>

Nota: Los códigos de SecondFragment, ThirdFragment y FirstFragment son los mismos, y sus archivos de diseño también son los mismos que Activity_first_fragment.

resultado de ejecución:

4. Resumen

BottomNavigationBar es un patrón de diseño de interfaz de usuario común que se usa comúnmente en aplicaciones móviles. El siguiente es un resumen de las ventajas y desventajas de BottomNavigationBar:

ventaja:

1. Proporcione una navegación intuitiva: la barra de navegación inferior generalmente se encuentra en la parte inferior de la pantalla, lo que permite a los usuarios acceder fácilmente a las funciones principales y opciones de navegación. Este diseño está más en línea con los hábitos operativos naturales de los usuarios y proporciona una experiencia de navegación intuitiva.
2. Ahorre espacio en la pantalla: colocar las opciones de navegación en la parte inferior puede ahorrar espacio en la parte superior de la pantalla y usarlo más para mostrar el contenido de la aplicación. Especialmente para dispositivos de pantalla grande, este diseño aprovecha mejor el espacio de la pantalla.
3. Fácil de operar con los dedos: dado que la barra de navegación inferior está cerca de la posición natural de los dedos, los usuarios pueden usar fácilmente sus pulgares para navegar sin cambiar frecuentemente la postura del dispositivo portátil.
4. Enfatizar la ubicación actual: al resaltar la actividad actual o la opción de navegación seleccionada, la barra de navegación inferior puede ayudar a los usuarios a saber más claramente dónde se encuentran y proporcionar navegación contextual.

defecto:

1. Limitación de espacio en la pantalla: aunque la barra de navegación inferior ahorra espacio en la parte superior de la pantalla, también ocupa cierta altura en la parte inferior de la pantalla. Para algunas aplicaciones, esto puede reducir el área de visualización de contenido disponible.
2. Limitación del número de opciones: una barra de navegación inferior generalmente es adecuada para aplicaciones con no más de cinco funciones principales u opciones de navegación. Si hay demasiadas opciones, la barra de navegación puede llenarse y ser difícil de identificar y operar.
3. Coherencia del diseño: la navegación inferior es un patrón de diseño común, pero no funciona para todas las aplicaciones. Al elegir utilizar una barra de navegación inferior, asegúrese de que sea coherente con el estilo de diseño general de su aplicación y las expectativas del usuario.

En resumen, BottomNavigationBar ofrece las ventajas de ser intuitivo, ahorrar espacio y fácil de operar, pero también tiene algunas desventajas, como limitaciones de espacio en la pantalla y un número limitado de opciones. Al diseñar su aplicación, debe considerar cuidadosamente si desea utilizar una barra de navegación inferior y asegurarse de que sea coherente con el diseño general de la aplicación.