BottomNavigationViewラベルを削除します


82

GoogleはBottomNavigationViewを備えた新しいサポートライブラリv25をリリースしました

ここに画像の説明を入力してください

アイテムのラベルを削除する方法はありますか?


1
titleメニューからを削除してみました<item>か?
マイクM.

8
タイトルを削除した後、アイコンの下に余分なパディングがあります。追加するlayout_marginBottom="-16dp"と、このパディングは削除されますが、すべてのビューが小さくなります。
dzikovskyy 2016年

マージンを設定する代わりに、カスタムの高さを設定し、上部にパディングを追加することができます。このようにして、アイコンを中央に配置できます。
ボリング2017年

4
私はちょうどこのようにそれを修正しました:android:paddingTop="8dp" android:layout_marginBottom="-8dp" これはバーが小さくなるのを防ぎます
Palm

回答:


198

ここでのパーティーに遅刻しないことを願っています。

ただし、デザインサポートライブラリ28.0.0-alpha1の時点では、プロパティを使用できます

app:labelVisibilityMode="unlabeled"

ラベルなしのBottomNavigationView

他の値「auto」、「labeled」、「selected」も使用できます。


どのサポートライブラリ?v7またはデザイン?
Sagar Maiyad 2018

デザインサポートライブラリ28.0.0–
Abdul-Aziz-Niazi

最も待っている機能。
bikram 2018

1
これをどのクラスで書きますか?
Explorex

1
@ExplorexこれはAndroidの下部ナビゲーションビューであり、私が言及した属性は、前述のビューのxmlタグで使用される前述のクラスのxml属性です。あなたも、コードでそれを使用することができdeveloper.android.com/reference/com/google/android/material/...
アブドゥル・アジズ・Niazi

21

このスタイルにしますか?

その場合は、BottomNavigationViewExを試すことをお勧めします。


私はこのライブラリが好きではありません。クリックするとアイコンの位置が変更され、クリックするとアイコンの位置が固定されません。
ディカ2018年

18

残念ながら、BottomNavigationViewのこの最初のバージョンには多くの制限がありました。そして今のところ、サポートデザインAPIを使用してタイトルを削除することはできません。したがって、グーグルがそれを実装していない間にこの制限を解決するために、あなたは(リフレクションを使用して)行うことができます:

1.bottom_navigation_menu.xmlファイルからタイトルを空に設定します。

2.BottomNavigationViewを拡張します。

    public class MyBottomNavigationView extends BottomNavigationView {

      public MyBottomNavigationView(Context context, AttributeSet attrs) {
          super(context, attrs);
          centerMenuIcon();
      }

      private void centerMenuIcon() {
          BottomNavigationMenuView menuView = getBottomMenuView();

          if (menuView != null) {
              for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView menuItemView = (BottomNavigationItemView) menuView.getChildAt(i);

                AppCompatImageView icon = (AppCompatImageView) menuItemView.getChildAt(0);

                FrameLayout.LayoutParams params = (LayoutParams) icon.getLayoutParams();
                params.gravity = Gravity.CENTER;

                menuItemView.setShiftingMode(true);
              }
          }
      }

      private BottomNavigationMenuView getBottomMenuView() {
          Object menuView = null;
          try {
              Field field = BottomNavigationView.class.getDeclaredField("mMenuView");
              field.setAccessible(true);
              menuView = field.get(this);
          } catch (NoSuchFieldException | IllegalAccessException e) {
              e.printStackTrace();
          }

          return (BottomNavigationMenuView) menuView;
      }
    }

3.このcustomViewをlayout.xmlに追加します

詳細については、Githubに実装しました


リフレクションを使用する必要はありません。メニュー項目IDを使用しBottomNavigationItemViewて呼び出すことでそれぞれを取得できfindViewById()ます(@NikolaDespotoskiが彼の回答で行っているように)。
フレッドPorciúncula

1
彼らは今ラベルの削除をサポートしていますapp:labelVisibilityMode="unlabeled"
AmjadAlwareh19年

13

1. menu /abc.xmlで設定android:title="";ます

2.リフレクションを使用している以下のヘルパークラスを作成します

import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.widget.AppCompatImageView;
import android.util.Log;
import android.view.Gravity;
import android.widget.FrameLayout;

import java.lang.reflect.Field;

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                item.setPadding(0, 15, 0, 0);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
} 

3.メインアクティビティで、次の行を追加します。

mBottomNav = (BottomNavigationView) findViewById(R.id.navigation);
BottomNavigationViewHelper.disableShiftMode(mBottomNav);

11

無反射アプローチ:

private void removeTextLabel(@NonNull BottomNavigationView bottomNavigationView, @IdRes int menuItemId) {
    View view = bottomNavigationView.findViewById(menuItemId);
    if (view == null) return;
    if (view instanceof MenuView.ItemView) {
        ViewGroup viewGroup = (ViewGroup) view;
        int padding = 0;
        for (int i = 0; i < viewGroup.getChildCount(); i++) {
            View v = viewGroup.getChildAt(i);
            if (v instanceof ViewGroup) {
                padding = v.getHeight();
                viewGroup.removeViewAt(i);
            }
        }
        viewGroup.setPadding(view.getPaddingLeft(), (viewGroup.getPaddingTop() + padding) / 2, view.getPaddingRight(), view.getPaddingBottom());
    }
}

1
テキストの代わりにアイコンを削除したい場合はどうですか
Merhawi Fissehaye 2017年

デフォルトのBottomNavigationコードがすでに存在するメインアクティビティでこれを呼び出すにはどうすればよいですか?@NikolaDespotoski
TiagoIB

@TiagoIBは、メソッドを静的にして、他のクラスに移動するだけです。または、非公開にして、引数を指定して呼び出します。
Nikola Despotoski 2017年

すみませんが、どうすればコードに挿入できますか?prntscr.com/he03j7 @NikolaDespotoski
TiagoIB

6

これは一時的な修正です。追加するだけです。app:itemTextColor="@android:color/transparent"これにより、背景色が何であれ、無効になります。アイコンが高く見えるようになります。


2

シフトアニメーションとラベルの両方を削除したかったのですが、ここでの解決策はどれもうまくいきませんでした。そこで、ここで学んだすべてに基づいて作成したものを次に示します。

public void removeLabels(@IdRes int... menuItemIds) {
    getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override public boolean onPreDraw() {
            getViewTreeObserver().removeOnPreDrawListener(this);

            // this only needs to be calculated once for an unchecked item, it'll be the same value for all items
            ViewGroup uncheckedItem = findFirstUncheckedItem(menuItemIds);
            View icon = uncheckedItem.getChildAt(0);
            int iconTopMargin = ((LayoutParams) uncheckedItem.getChildAt(0).getLayoutParams()).topMargin;
            int desiredTopMargin = (uncheckedItem.getHeight() - uncheckedItem.getChildAt(0).getHeight()) / 2;
            int itemTopPadding = desiredTopMargin - iconTopMargin;

            for (int id : menuItemIds) {
                ViewGroup item = findViewById(id);
                // remove the label
                item.removeViewAt(1);
                // and then center the icon
                item.setPadding(item.getPaddingLeft(), itemTopPadding, item.getPaddingRight(),
                        item.getPaddingBottom());
            }

            return true;
        }
    });
}

@SuppressLint("RestrictedApi")
private ViewGroup findFirstUncheckedItem(@IdRes int... menuItemIds) {
    BottomNavigationItemView item = findViewById(menuItemIds[0]);
    int i = 1;
    while (item.getItemData().isChecked()) {
        item = findViewById(menuItemIds[i++]);
    }
    return item;
}

このメソッドをカスタムに追加しBottomNavigationView、メニュー項目のIDを渡して呼び出すだけです。


1

sanf0rdが答えたように、自分で実装することをお勧めします。しかしAppCompatImageView、私のために働いていません。に変更しましたImageView。そしてに変更されgetChildAtましたfindViewById

また、選択されていないアイテムのすべてのラベルを非表示にします。

private void centerMenuIcon() {
    BottomNavigationMenuView menuView = getBottomMenuView();
    if (menuView != null) {
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView menuItemView = (BottomNavigationItemView) menuView.getChildAt(i);
            TextView smallText = (TextView) menuItemView.findViewById(R.id.smallLabel);
            smallText.setVisibility(View.INVISIBLE);
            //TextView largeText = (TextView) menuItemView.findViewById(R.id.largeLabel);
            ImageView icon = (ImageView) menuItemView.findViewById(R.id.icon);
            FrameLayout.LayoutParams params = (LayoutParams) icon.getLayoutParams();
            params.gravity = Gravity.CENTER;
            menuItemView.setShiftingMode(true);
        }
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.