web-dev-qa-db-fra.com

Comment changer la taille et la forme d'un élément de navigation de la barre inférieure particulière

J'essaie d'implémenter cette barre inférieure qui contient un article avec une taille plus grande et une forme différente des autres.

bottom bar

Existe-t-il un moyen non hacky pour y parvenir en utilisant le composant natif de navigation inférieure? Je suppose que non, car cela ne semble pas conforme aux spécifications Material Design.

Sinon, quelle serait la meilleure approche à suivre? Je ne vois que 2 façons d'y parvenir, mais aucune ne me semble fiable.

  • Pour chaque "petit objet", ajout d'une barre transparente en haut du dessinable pour atteindre la taille de l'icône de la caméra.
  • Implémentation d'une barre inférieure de 5 éléments avec un "élément fantôme" au milieu, au-dessus duquel je pourrais placer un autre composant. Cela nécessiterait que ce composant soit couplé à la barre inférieure.

[~ # ~] modifier [~ # ~]

C'est ce que j'ai obtenu en augmentant la taille de l'icône comme suggéré par Harshit et fmaccaroni.

Lorsque l'élément n'est pas sélectionné:

item_selected

Lorsque l'élément est sélectionné:

item_selected

Pro: l'icône est plus grande que les autres

Inconvénients: Il est toujours contenu à l'intérieur de la barre inférieure. En outre, il n'est pas centré verticalement lorsqu'il est sélectionné

androidandroid-bottomnav
6
Louis
<Android.support.design.widget.BottomNavigationView
    Android:id="@+id/navigation"
    Android:layout_width="match_parent"
    Android:layout_height="56dp"
    Android:layout_alignParentBottom="true"
    Android:background="?android:attr/windowBackground"
    app:itemIconTint="@color/colorPrimary"
    app:itemTextColor="@Android:color/black"
    app:menu="@menu/navigation"
    Android:clipChildren="false">

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="56dp"
        Android:layout_height="56dp"
        Android:layout_gravity="center"
        Android:layout_marginBottom="8dp"
        app:elevation="6dp"
        Android:scaleType="center" />
</Android.support.design.widget.BottomNavigationView>

ajoutez également Android: clipChildren = "false" à la disposition racine

5
Siddhesh Shirodkar

MODIFIER:

Cette réponse a été écrite avant la mise à jour de Material 2018. Probablement plus le chemin à parcourir. Reportez-vous à la réponse de DPalagi pour des informations à jour.

Après quelques recherches, je suis tombé sur cette bibliothèque . Ils n'ont pas fourni ce que je cherchais, mais ils ont implémenté ce comportement dans l'un de leurs échantillons, ce qui était assez proche de ce dont j'avais besoin.

Voici ce que j'ai obtenu en réutilisant leur idée ( testée uniquement sur l'API 23 ):

<blockquote class="imgur-embed-pub" lang="en" data-id="a/0Oypk"><a href="//imgur.com/0Oypk"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

Il a l'air décent, mais je n'aime pas l'implémentation car la navigation du bas est maintenant divisée entre deux composants.

L'idée est de créer un élément vide au milieu de la barre inférieure et d'ajouter un bouton d'action flottant au-dessus pour créer l'illusion qu'il fait partie de la barre inférieure.

Voici la disposition de ma barre inférieure et du bouton de navigation flottant:

<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
    Android:id="@+id/navigation"
    Android:layout_width="match_parent"
    Android:layout_height="56dp"
    Android:layout_gravity="bottom"
    app:elevation="0dp"
    app:itemIconTint="@drawable/menu_item_selector"
    app:itemTextColor="@drawable/menu_item_selector"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/navigation_items" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="70dp"
    Android:layout_height="70dp"
    Android:layout_marginEnd="8dp"
    Android:layout_marginStart="8dp"
    Android:focusable="true"
    app:backgroundTint="@color/white"
    app:borderWidth="0dp"
    app:elevation="0dp"
    app:fabSize="mini"
    app:layout_constraintBottom_toBottomOf="@id/navigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@drawable/camera_icon" />

Éléments de la barre de navigation:

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:tools="http://schemas.Android.com/tools">
    <item
        Android:id="@+id/action_around_me"
        Android:icon="@drawable/ic_bottombar_around_me"
        tools:ignore="MenuTitle" />

    <item
        Android:id="@+id/action_my_projects"
        Android:icon="@drawable/ic_bottombar_projects"
        tools:ignore="MenuTitle" />

    <!-- Here is the trick -->
    <item
        Android:id="@+id/empty"
        Android:enabled="false"
        tools:ignore="MenuTitle" />

    <item
        Android:id="@+id/action_notifications"
        Android:icon="@drawable/ic_bottombar_notification"
        tools:ignore="MenuTitle" />

    <item
        Android:id="@+id/action_settings"
        Android:icon="@drawable/ic_bottombar_settings"
        tools:ignore="MenuTitle" />
</menu>

Chaque fois que je clique sur le bouton FAB, je désactive la barre inférieure:

private void disableBottomBar() {
    Menu menu = navigationBar.getMenu();
    for (int i = 0; i < menu.size(); i++) {
        // The third item is a an empty item so we do not do anything on it
        if (i != 2) {
            menu.getItem(i).setCheckable(false);
        }
    }
}

Même chose avec setCheckable(true) quand une icône de la barre inférieure est cliquée.

J'espère que cela t'aides.

2
Louis

Depuis la dernière mise à jour Material (2018), il est possible de le faire avec des éléments d'interface utilisateur natifs:

  • BottomAppBar avec app:fabAttached attribut
  • FloatingActionButton avec app:layout_anchor concernant le BottomAppBar
  • Profitez de l'alignement avec app:fabAlignmentMode

Alignment center

Vous pouvez vous référer à ce grand article Medium pour plus de nouveaux éléments matériels et plus de détails sur celui-ci.

J'espère que cela vous aide!

2
DPalagi

La taille des icônes dans la navigation de la barre inférieure peut être modifiée par programme en

BottomNavigationView bottomNavigationView = (BottomNavigationView) 
activity.findViewById(R.id.bottom_navigation_view);

BottomNavigationMenuView menuView = (BottomNavigationMenuView) 
bottomNavigationView.getChildAt(0);

for (int i = 0; i < menuView.getChildCount(); i++) {
final View iconView = 
menuView.getChildAt(i).findViewById(Android.support.design.R.id.icon);

final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();

final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
// set your height here
layoutParams.height = (int) 
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);

// set your width here
layoutParams.width = (int) 
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);

iconView.setLayoutParams(layoutParams);
}

J'ai fait quelque chose comme ça pour changer la taille des éléments de navigation de la barre inférieure comme vous le souhaitez.

Et voici ce que vous pouvez faire:

  1. Prenez une image de grande taille de la même image que vous souhaitez afficher plus grande lorsque vous cliquez dessus et stockez-la dans ce dossier dessinable.

  2. Ensuite, appliquez lorsque vous cliquez sur la barre de navigation inférieure de cet élément particulier, puis définissez l'image précédente plus petite avec l'image plus grande.

Et vous pouvez voir cette bibliothèque utiliser cette bibliothèque pour résoudre votre problème.

1
Harshit Agrawal

En prenant this comme référence, vous pouvez itérer pour chaque enfant de votre BottomNavigationView et modifier la taille de l'élément spécifié:

BottomNavigationView bottomNavigationView = (BottomNavigationView) activity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
    final View iconView = menuView.getChildAt(i).findViewById(Android.support.design.R.id.icon);
    final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();
    final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    // If it is my special menu item change the size, otherwise take other size
    if (i == 2){
        // set your height here
        layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, displayMetrics);
        // set your width here
        layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, displayMetrics);
    }
    else {
        // set your height here
        layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
        // set your width here
        layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    }
    iconView.setLayoutParams(layoutParams);
}
0
fmaccaroni

la manière la plus simple consiste à utiliser setScaleX et setScaleY. par exemple:

final View iconView = 
menuView.getChildAt(2).findViewById(Android.support.design.R.id.icon);
iconView.setScaleY(1.5f);
iconView.setScaleX(1.5f);
0
royaB