BottomNavigationView 레이블 제거


82

Google은 BottomNavigationView와 함께 새로운 지원 라이브러리 v25를 출시했습니다.

여기에 이미지 설명 입력

항목 레이블을 제거하는 방법이 있습니까?


1
title메뉴 에서 s를 제거하려고 했습니까 <item>?
Mike M.

8
제목을 제거한 후 아이콘 아래에 추가 패딩이 있습니다. 추가 layout_marginBottom="-16dp"하면이 패딩이 제거되지만 모든 뷰가 더 작아집니다.
dzikovskyy

여백을 설정하는 대신 사용자 지정 높이를 설정하고 상단에 추가 패딩을 추가 할 수 있습니다. 그런 식으로 아이콘을 중앙에 배치 할 수 있습니다.
Bolling 2017 년

4
난 그냥 android:paddingTop="8dp" android:layout_marginBottom="-8dp" 이렇게 고 쳤어요 : 이렇게하면 바가 작아지는 것을 방지합니다
Palm

답변:


199

여기 파티에 너무 늦지 않았 으면 좋겠어요.

그러나 Design Support Library 28.0.0-alpha1부터는 속성을 사용할 수 있습니다.

app:labelVisibilityMode="unlabeled"

레이블이없는 BottomNavigationView

다른 값 "auto", "labeled"및 "selected"도 사용할 수 있습니다.


어떤 지원 라이브러리? v7 또는 디자인?
Sagar Maiyad

디자인 지원 라이브러리 28.0.0
압둘 아지즈-밖으로 빼낼

가장 기다리는 기능.
bikram

1
어떤 수업에서 이것을 작성합니까?
Explorex

1
@Explorex 이것은 안드로이드의 하단 탐색 뷰이며 내가 언급 한 속성은 해당 뷰의 xml 태그에 사용 된 해당 클래스의 xml 속성입니다. 당신도 코드에서 사용할 수 있습니다 developer.android.com/reference/com/google/android/material/...
압둘 아지즈-밖으로 빼낼

21

이 스타일을 원하십니까?

그렇다면 BottomNavigationViewEx 를 사용해 보는 것이 좋습니다 .


이 도서관이 마음에 들지 않습니다. 클릭하면 아이콘 위치를 변경하고 클릭하면 아이콘 위치를 고정 할 수 없습니다.
Dika

18

불행히도이 첫 번째 BottomNavigationView 버전에는 많은 제한이있었습니다. 그리고 지금은 지원 디자인 API를 사용하여 제목을 제거 할 수 없습니다. 따라서 Google이 구현하지 않는 동안이 제한을 해결하려면 다음을 수행하십시오 (반사 사용).

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가 답변 에서하는 것처럼 ).
Fred Porciúncula

1
그들은 이제 레이블 제거를 지원합니다app:labelVisibilityMode="unlabeled"
Amjad Alwareh

13

1. menu / abc.xmlandroid: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

기본 BottomNavigation 코드가 이미있는 기본 활동에서 어떻게 호출 할 수 있습니까? @NikolaDespotoski
TiagoIB

@TiagoIB는 메서드를 정적으로 만들고 다른 클래스로 이동합니다. 또는 비공개로 유지하고 지정된 인수로 호출하십시오.
Nikola Despotoski

실례합니다. 코드에 어떻게 삽입 할 수 있습니까? 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. 그리고 변화 getChildAtfindViewById.

또한 선택하지 않은 항목의 모든 레이블을 숨 깁니다.

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.