3 개 이상의 항목이있는 BottomNavigationView : 탭 제목이 숨겨져 있습니다.


85

Android Support Desing Library 25를 사용하여 BottomNavigationView를 사용하고 있습니다.하지만 탭을 전환하면 다른 탭의 제목이 숨겨집니다. 그러나 실제 하단 탐색 뷰에는 숨어있는 문제가 없습니다. 하지만 내 것은 숨어있다.

MyBottomNavigation

하지만 그렇게 보이길 원합니다. 그렇게 할 생각이 있습니까? 내가 무엇을 놓치고 있습니까?

ActualBottomNavigation

내 코드는 다음과 같습니다.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.yunus.ototakip.MainActivity">

<FrameLayout
    android:id="@+id/main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/bottom_navigation"
    android:layout_alignParentTop="true">
</FrameLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@color/beyaz"
    app:itemTextColor="@color/beyaz"
    app:menu="@menu/bottombar_menu" />

bottom_bar_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
 <item
android:id="@+id/bb_menu_arac"
android:enabled="true"
android:icon="@drawable/icon_car"
android:title="@string/araclarim"
app:showAsAction="ifRoom" />
 <item
android:id="@+id/bb_menu_yakin"
android:enabled="true"
android:icon="@drawable/icon_yer"
android:title="@string/yakinimdakiler"
app:showAsAction="ifRoom" />
  <item
android:id="@+id/bb_menu_yaklasan"
android:enabled="true"
android:icon="@drawable/icon_takvim"
android:title="@string/yaklasanlar"
app:showAsAction="ifRoom" />

<item
    android:id="@+id/bb_menu_ipucu"
    android:enabled="true"
    android:icon="@drawable/icon_ipucu"
    android:title="@string/ipuclari"
    app:showAsAction="ifRoom" />
 </menu>

당신은 시도 않았다 app:showAsAction="always대신ifRoom
야신 BELDI

나는했지만, 여전히 숨기고
유누스 Haznedar


1
@YunusHaznedar 항목이 3 개 이상 다음 텍스트는 항상 숨기기 ... 경우
Shashank 베르

1
안녕하세요, @DanXPrado 솔루션을 공유해 주셔서 감사합니다. 귀하의 답변을 수락 한 것으로 표시했습니다. 즐거운 코딩입니다.
Yunus Haznedar 2018

답변:


139

반사를 사용하는 솔루션은 mShiftingMode 필드가 제거 되었기 때문에 더 이상 작동하지 않습니다.

이제 쉽게 할 수있는 방법이 있습니다. 지원 라이브러리 28을 사용하고 XML 선언에 추가 app:labelVisibilityMode="labeled"하기 만하면 BottomNavigationView됩니다.

도움이되기를 바랍니다.


챔피언처럼 작동하지만 원형 스크롤 가능하게 만드는 방법은 무엇입니까?
Shailendra Madda

@ShylendraMadda이 질문과 관련이 없기 때문에 새 질문으로 게시하는 것이 좋습니다.
Danilo Prado

1
이것이 기본 동작이 아닌 이유는 ... app : showAsAction, android : visible, android : enabled 및 기타 여러 해킹으로 몇 시간을 낭비했습니다. 감사!
덴마크 칸

94

최신 정보

지원 라이브러리 28.0.0-alpha1에서 이제 Labels를 추가 할 수 있으므로 removeShiftMode () 가 더 이상 필요하지 않습니다 .

XML에서 :

<android.support.design.widget.BottomNavigationView
    app:labelVisibilityMode="labeled" />

프로그래밍 방식으로 변경하는 경우 :

mBottomNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED); 

이를 위해 : 설계 지원 라이브러리를 28.0.0-alpha1 로 업데이트하십시오.

다음은 좋은 읽기입니다.

이전 지원 라이브러리의 경우 :

당신의 bottom_bar_menu.xml.Change showAsAction속성

<item android:id="@id/menu_item"
android:title="text"
android:icon="@drawable/drawable_resource_name"
android:showAsAction="always|withText" />

build.gradle에서 :

compile 'com.android.support:design:25.3.1'

하단 탐색 3 개 이상의 항목보기 : 사용 removeShiftMode()방법

BottomNavigationViewHelper.java사용 :

import android.annotation.SuppressLint;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import java.lang.reflect.Field;

    public class BottomNavigationViewHelper {
        @SuppressLint("RestrictedApi")
        public static void removeShiftMode(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);
                    // set once again checked value, so view will be updated
                    //noinspection RestrictedApi
                    item.setChecked(item.getItemData().isChecked());
                }
            } catch (NoSuchFieldException e) {
                Log.e("BottomNav", "Unable to get shift mode field", e);
            } catch (IllegalAccessException e) {
                Log.e("BottomNav", "Unable to change value of shift mode", e);
            }
        }
    }

다음을 사용하여 호출하십시오.

BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);
BottomNavigationViewHelper.removeShiftMode(bottomNavigationView);

제목 텍스트의 이동 애니메이션을 비활성화하고 텍스트를 표시 할 수 있습니다.


2
아니요, 아직 숨어 있습니다. "| withText 항상"나는 "항상"및 시도
유누스 Haznedar

1
항목 제목 중 하나가 크면 다른 사람의보기가 차단됩니까? 작은 제목과 당김 이미지하려고 ..
rafsanahmad007

1
이 당신이 다음은 tutotrial에 라인 참조It’s important to note that the maximum number of items we can display is 5. This may change at any point, so it’s important to check this by using the getMaxItem() method provided by the BottomNavigationView class rather than hard-coding the value yourself.
rafsanahmad007

1
좋은 답변, 감사합니다
함자 압둘라

2
리플렉션 솔루션은에서는 잘 작동 com.android.support:design:25.4.0하지만에서는 실패 com.android.support:design:26.1.0하므로 대상 SDK 및 종속성 버전을 약간 롤백합니다.
Evi Song

10

BottomNavigationView의 소스 코드를 스캔 한 후

mShiftingMode = mMenu.size() > 3;

BottomNavigationMenuView.java의 선 (265)는 메뉴의 크기보다 3 이상 동안 탭 타이틀 HID 수 wiil 의미한다. 따라서 탭 제목을 표시하려면 빌드에서 코드를 가져 와서 아래로 변경하면됩니다.

mShiftingMode = mMenu.size() > 5;

PS : BottonNavigationView 최대 탭 카운트해야 당신은에 코드를 얻을 수 3과 5 사이 BottomNavigationViewNew 여기에 이미지 설명 입력


BottomNavigationView를 확장하는 내 CustomBottomView가 있습니다. 대신 해당 속성을 설정하는 방법이 있습니까?
JPM

1
3 개의 탭 제한에 대한 "BottomNavigationMenuView"줄이 표시되지 않습니다. 코드가 변경되었을 수 있습니까?
안드로이드 개발자

8

BottomNavigationViewHelper 클래스 만들기

import android.annotation.SuppressLint;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.util.Log;
import java.lang.reflect.Field;
public class BottomNavigationViewHelper {
    @SuppressLint("RestrictedApi")
    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);
if(menuView.getChildCount()<6)
           {
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // 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);
        }
    }
}   

요구

    BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);
    BottomNavigationViewHelper.disableShiftMode(bottomNavigationView); 

1
그것은 restrictAPI annoation 문제 해결 SuppressLint이
code4j을

3

Kotlin 확장 기능 :

@SuppressLint("RestrictedApi")
fun BottomNavigationView.removeShiftMode(){
    val menuView = this.getChildAt(0) as BottomNavigationMenuView
    try {
        val shiftingMode = menuView.javaClass.getDeclaredField("mShiftingMode")
        shiftingMode.isAccessible = true
        shiftingMode.setBoolean(menuView, false)
        shiftingMode.isAccessible = false
        for (i in 0 until menuView.childCount) {
            val item = menuView.getChildAt(i) as BottomNavigationItemView
            item.setShiftingMode(false)
            // set once again checked value, so view will be updated
            item.setChecked(item.itemData.isChecked)
        }
    } catch (e: NoSuchFieldException) {
        e.printStackTrace()
        Timber.tag("BottomNav").e( e, "Unable to get shift mode field")
    } catch (e: IllegalAccessException) {
        Timber.tag("BottomNav").e( e, "Unable to change value of shift mode")
    }
}

감사합니다. 대단히 감사합니다.
Yunus Haznedar

1
item.setShiftingMode(false)현재item.setShifting(false)
Sim

2

나는 rafsanahmad007 답변을 거의 사용 했지만 Kotlin으로 번역합니다. 미래의 방랑자들을 위해 공유하겠습니다.

@SuppressLint("RestrictedApi")
fun BottomNavigationView.disableShiftMode() {
    val menuView = this.getChildAt(0) as BottomNavigationMenuView
    try {
        val shiftingMode = menuView::class.java.getDeclaredField("mShiftingMode")
        shiftingMode.setAccessible(true)
        shiftingMode.setBoolean(menuView, false)
        shiftingMode.setAccessible(false)
        for (i in 0..(menuView.childCount - 1)) {
            val item = menuView.getChildAt(i) as BottomNavigationItemView
            item.setShiftingMode(false)
            // set once again checked value, so view will be updated
            item.setChecked(item.getItemData().isChecked())
        }
    } catch (e: NoSuchFieldException) {
        Timber.e("Unable to get shift mode field")
    } catch (e: IllegalAccessException) {
        Timber.e("Unable to change value of shift mode")
    }
}

1
이 솔루션이 아닌 이상 유효의 허용 솔루션은 @DanXPrado에 의해 올
jpardogo

나를셔서 들으 알
카르마 메이커

0

이것은 API 26에서 저에게 효과적입니다.

 navigation = (BottomNavigationView) view.findViewById(R.id.bottom_navigation);


     try{disableShiftMode(navigation);}catch(Exception ew){}

호출하려는 Activity 또는 Fragment에서이 메서드를 만듭니다.

 @SuppressLint("RestrictedApi")
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);
            item.setShiftingMode(false);

            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {

    } catch (IllegalAccessException e) {

    }
}

0

이 기능을 사용하여 3 ~ 5 개의 항목에 대해 BottomNevigationView에 텍스트와 아이콘을 모두 표시하고 이동을 중지 할 수 있습니다.

 app:labelVisibilityMode="labeled"

그러나 5 개 항목에 대해 BottmNevigationView에서 긴 텍스트를 자르는 문제에 직면하게됩니다. 이를 위해 BottomNevigationView의 아이콘뿐만 아니라 텍스트 이동을 중지하는 좋은 솔루션을 찾았습니다. 또한 BottomNevigationView의 아이콘과 텍스트 이동을 중지 할 수도 있습니다. 코드의 일부가 여기에 제공됩니다.

1. 아래와 같이 BottomNevigationView에이 코드 줄을 추가합니다.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="@dimen/seventy_dp"
    android:layout_semitransparent="true"
    android:background="@color/colorBottomNev"
    android:showAsAction="always|withText"
    app:itemIconTint="@drawable/bottom_navigation_colors"
    app:itemTextColor="@drawable/bottom_navigation_colors"
    app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"
    app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"
    app:menu="@menu/bottom_navigation_menu"
    app:labelVisibilityMode="labeled"/>

2. 다음과 같이 메뉴 항목을 추가합니다.

 <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_catalogue"
        android:icon="@drawable/catalogue"
        android:title="@string/catalogue"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_contracts"
        android:icon="@drawable/contract"
        android:title="@string/contracts"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_prospects"
        android:icon="@drawable/prospect"
        android:title="@string/prospects"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_performance"
        android:icon="@drawable/performance"
        android:title="@string/performance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_advance"
        android:icon="@drawable/advance"
        android:title="@string/advance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

</menu>

3. style.xml 파일에이 스타일을 추가합니다.

 <style name="BottomNavigationViewTextStyle">
            <item name="android:fontFamily">@font/montmedium</item>
            <item name="android:textSize">10sp</item>
            <item name="android:duplicateParentState">true</item>
            <item name="android:ellipsize">end</item>
            <item name="android:maxLines">1</item>
        </style>

4) Dimen 폴더에 추가

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>
</resources>

링크링크 에서 도움을 받았습니다.이 링크 를 공부하여 도움을받을 수도 있습니다. 감사....


0

빠른 수정은 xml에 app : labelVisibilityMode = "labeled"를 추가합니다.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/bottom_navigation_color_selector"
    app:itemTextColor="@drawable/bottom_navigation_color_selector"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/menu_bottom_navigation" />

노트

  implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:support-v4:28.0.0'

0

이 경우에는 적용되지 않더라도 유의해야 할 사항이 있습니다.

이 패턴은 탐색 할 최상위 대상이 3 ~ 5 개 사이 일 때 사용할 수 있습니다.

아이콘 제목을 표시하려면 다음을 수행하십시오.

  1. 메뉴 (bottom_navigation_menu) 항목 XML이 다음과 같이 구성되어 있는지 확인하십시오.

    <item
        android:id="@+id/action_home"
        android:enabled="true"
        android:icon="@drawable/ic_action_home"
        android:title="HOME"
        app:showAsAction="ifRoom"/>
    
    <item
        android:id="@+id/action_favourites"
        android:enabled="true"
        android:icon="@drawable/ic_action_favourite"
        android:title="FAVOURITES"
        app:showAsAction="ifRoom"/>
    
    <item
        android:id="@+id/action_basket"
        android:enabled="true"
        android:icon="@drawable/ic_action_basket"
        android:title="BASKET"
        app:showAsAction="ifRoom"/>
    

  2. BottomNavigationView 코드 앱에 다음을 추가합니다 : labelVisibilityMode = "labeled"

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@android:color/white"
    app:itemIconTint="@android:color/black"
    app:itemTextColor="@android:color/black"
    app:menu="@menu/bottom_navigation_menu"
    app:labelVisibilityMode="labeled"/>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.