Android: BottomNavigationBar —— Controle da barra de navegação inferior

BottomNavigationBar é um controle da barra de navegação inferior para aplicativos Android, frequentemente usado para alternar rapidamente entre diferentes páginas do aplicativo. Oferece uma navegação intuitiva e fácil de usar que permite ao usuário acessar facilmente os diversos módulos da aplicação.

Pacotes de dependência:

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

2. Métodos comuns e classes comuns de BottomNavigationBar

(1) Métodos comumente usados

BottomNavigationBar fornece uma série de métodos comumente usados para personalizar e gerenciar a aparência e o comportamento da barra de navegação inferior. A seguir está uma introdução detalhada aos métodos comuns de BottomNavigationBar e seus exemplos de chamada:

1. Adicione itens de menu

addItem(BottomNavigationItem item): adiciona um item de menu à barra de navegação.

2. Remova itens do menu

removeItem(int position): remove o item de menu na posição especificada da barra de navegação.

3. Defina o ouvinte selecionado

setOnTabSelectedListener(OnTabSelectedListener listener): Defina o ouvinte de seleção da barra de navegação.

4. Defina o item atualmente selecionado

setCurrentItem(int position, boolean animate): Defina o item de menu atualmente selecionado.

setFirstSelectedPosition(int position) : Define o item selecionado padrão.

5. Configure crachás

setNotification(String text, int position): exibe o emblema no item de menu no local especificado.

removeNotification(int position): remove o emblema do item de menu no local especificado.

6. Personalização de estilo e cor

setBackgroundStyle(int backgroundStyle): usado para definir o estilo de fundo da barra de navegação inferior.

setDefaultBackgroundColor(int color): defina a cor de fundo padrão da barra de navegação.
setAccentColor(int color): Defina a cor do item selecionado.
setInactiveColor(int color): Defina a cor dos itens não selecionados.
setTitleState(int state): Defina o modo de exibição do título. Os valores opcionais são STATE_ALWAYS_SHOW, STATE_ALWAYS_HIDE e STATE_SHOW_WHEN_ACTIVE.
setTitleTextSize(int textSize): Defina o tamanho da fonte do título.

7. Efeitos de animação

setColored(boolean colored): Defina se deseja ativar o efeito de animação colorida do item selecionado.
setBehaviorTranslationEnabled(boolean enabled): defina se deseja ativar o efeito deslizante da barra de navegação inferior.

8. Oculte a barra de navegação inferior.

hideBottomNavigation(boolean hide): mostre ou oculte a barra de navegação inferior.

9. Modo de configuração

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

MODE_FIXED: modo fixo
- Este modo é recomendado quando o número de itens de menu na barra de navegação é menor ou igual a 3.
- No modo fixo, todos os itens do menu são distribuídos uniformemente na barra de navegação inferior e têm o mesmo tamanho.
MODE_SHIFTING: modo de movimento
- Este modo é recomendado quando o número de itens de menu na barra de navegação é maior que 3.
- No modo móvel, o item de menu atualmente selecionado é destacado, enquanto outros itens de menu não selecionados encolhem e movem-se para cima.

10.Inicializar navegação inferior

inicializar(): usado para completar a inicialização da barra de navegação inferior.

(2) Categorias comumente usadas

BottomNavigationBar: a classe principal da barra de navegação inferior, usada para criar e gerenciar itens de navegação inferior. Através desta classe, você pode definir o modo, estilo de fundo, itens de menu e outras propriedades da barra de navegação, e ouvir o evento de seleção do item de navegação.
BadgeItem: classe de emblema , usada para exibir emblemas em itens de menu na barra de navegação. Possui duas subclasses:TextBadgeItem : usada para exibir legendas de texto em itens de menu. ShapeBadgeItem: Usado para exibir ícones de forma em itens de menu, como círculos, quadrados, etc.
BottomNavigationItem: a classe do item de navegação inferior usada para criar cada item de menu. Através desta classe, você pode definir o ícone, o título e o ícone no estado selecionado.
OnTabSelectedListener: selecione a interface do ouvinte na guia da barra de navegação inferior . Ao implementar esta interface, o evento selecionado da aba pode ser monitorado e processado no método de retorno de chamada correspondente.
BadgeAnimation: A classe de animação do crachá é usada para definir os efeitos de animação de aparência e desaparecimento do crachá.

`TextBadgeItem常用方法`：

setText(String text): defina o conteúdo do texto exibido na marca do canto.
setBackgroundColor(int color): Defina a cor de fundo da marca do canto.
setTextColor(int color): Defina a cor do texto subscrito.
setHideOnSelect(boolean hideOnSelect): Defina se deseja ocultar a marca de canto quando o item de menu for selecionado. O padrão é falso.
setAnimationDuration(long duration): defina a duração da animação da marca de canto, em milissegundos.
show()e hide(): Mostrar e ocultar manualmente o emblema.
setShape(Shape shape): defina o formato da marca de canto.

`ShapeBadgeItem常用方法`：

setIconDrawable(Drawable icon): Defina o ícone do item de menu.
setInactiveIconDrawable(Drawable icon): Defina o ícone do estado não selecionado do item de menu.
setText(String text): Defina o conteúdo do texto do item de menu.
setInactiveColor(int color): Defina a cor do estado não selecionado do item de menu.
setActiveColor(int color): Defina a cor do estado selecionado do item de menu.
setBadgeItem(BadgeItem badgeItem): defina a marca de canto para o item de menu.

3. Exemplos de uso de bottomNavigation

Atividade 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álise de código:

MainActivityA aula é uma atividade que contém uma barra de navegação inferior. No método, a barra de navegação inferior é inicializada onCreate()chamando .initBottomNavigationBar()

No initBottomNavigationBar()método:

Definir o modo da barra de navegação inferior como MODE_SHIFTINGsignifica que as guias se moverão conforme o usuário clica.
Defina o ouvinte de evento de clique da barra de navegação inferior como a atividade atual ( this).
Chame getBottomNavigationItem() o método para obter a coleção de guias da barra de navegação inferior e adicione-a à barra de navegação inferior.
Chame initialise() o método para concluir a inicialização da barra de navegação inferior e definir o fragmento exibido padrão.

No getBottomNavigationItem()método:

Criou três guias de navegação inferiores BottomNavigationItem.
O ícone, o texto, a cor quando clicado, a cor quando não clicado e o recurso do ícone quando não clicado são definidos respectivamente.
Adiciona guias a uma lista e retorna.

Além disso, outros métodos são definidos:

initBadgeItem(): inicializa dois emblemas ( TextBadgeItem e ShapeBadgeItem) e define suas propriedades.
setDefaultFragment(): Defina o fragmento exibido padrão como FirstFragment.
hideFragment(FragmentTransaction transaction): oculta o fragmento exibido atualmente.
onTabSelected(int position): Manipule o evento quando a guia for selecionada e alterne diferentes fragmentos de acordo com a posição.
onTabUnselected(int position): Manipula o evento de desmarcação da guia.
onTabReselected(int position): manipula o evento quando a guia é selecionada novamente.

Resumo: Este código é uma atividade que contém uma barra de navegação inferior que alterna para exibir diferentes fragmentos clicando na guia inferior. Você pode modificar o estilo da barra de navegação inferior, adicionar mais guias e definir os fragmentos correspondentes conforme necessário.

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

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

atividade_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: Os códigos de SecondFragment, ThirdFragment e FirstFragment são iguais e seus arquivos de layout também são iguais a Activity_first_fragment.

resultado em execução:

4. Resumo

BottomNavigationBar é um padrão de design de interface de usuário comum comumente usado em aplicativos móveis. A seguir está um resumo das vantagens e desvantagens do BottomNavigationBar:

vantagem:

1. Fornece navegação intuitiva: A barra de navegação inferior geralmente está localizada na parte inferior da tela, permitindo aos usuários acessar facilmente as principais funções e opções de navegação. Este layout está mais alinhado com os hábitos operacionais naturais dos usuários e proporciona uma experiência de navegação intuitiva.
2. Economize espaço na tela: Colocar as opções de navegação na parte inferior pode economizar espaço na parte superior da tela e utilizá-lo mais para exibir o conteúdo do aplicativo. Especialmente para dispositivos de tela grande, esse design aproveita melhor o espaço da tela.
3. Fácil de operar com os dedos: como a barra de navegação inferior está próxima da posição natural dos dedos, os usuários podem usar facilmente os polegares para navegar sem ter que alterar frequentemente a postura do dispositivo portátil.
4. Enfatize a localização atual: Ao destacar a atividade atual ou a opção de navegação selecionada, a barra de navegação inferior pode ajudar os usuários a saberem mais claramente onde estão e fornecer navegação contextual.

deficiência:

1. Limitação de espaço na tela: Embora a barra de navegação inferior economize espaço na parte superior da tela, ela também ocupa uma certa altura na parte inferior da tela. Para alguns aplicativos, isso pode reduzir a área de exibição de conteúdo disponível.
2. Limitação no número de opções: Uma barra de navegação inferior geralmente é adequada para aplicativos com no máximo cinco funções principais ou opções de navegação. Se houver muitas opções, a barra de navegação poderá ficar lotada e difícil de identificar e operar.
3. Consistência de design: a navegação inferior é um padrão de design comum, mas não funciona para todos os aplicativos. Ao escolher usar uma barra de navegação inferior, certifique-se de que ela seja consistente com o estilo geral de design do seu aplicativo e com as expectativas do usuário.

Em resumo, BottomNavigationBar oferece as vantagens de ser intuitivo, economizar espaço e fácil de operar, mas também apresenta algumas desvantagens, como limitações de espaço na tela e número limitado de opções. Ao projetar seu aplicativo, você precisa considerar cuidadosamente se deve usar uma barra de navegação inferior e certificar-se de que ela seja consistente com o design geral do aplicativo.