수색…


소개

Bottom Navigation View는 머지 않아 머티리얼 디자인 가이드 라인 에 포함되어 있지만 앱에 구현하기가 쉽지 않습니다.

일부 응용 프로그램은 자체 솔루션을 구축했으며 다른 일부는 제 3 자 오픈 소스 라이브러리를 사용하여 작업을 완료했습니다.

이제 디자인 지원 라이브러리에이 하단 탐색 모음이 추가 된 것을 볼 수 있습니다. 사용 방법에 대해 살펴 보겠습니다.

비고

응용 프로그램의 표준 탐색 모음을 나타냅니다. 그것은 소재 디자인 하단 탐색의 구현입니다.

모래밭:

기본 구현

BottomNavigationView 를 추가하려면 다음 단계를 수행하십시오.

  1. build.gradle종속성을 추가하십시오.
compile 'com.android.support:design:25.1.0'
  1. 레이아웃에 BottomNavigationView 를 추가합니다.
<android.support.design.widget.BottomNavigationView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_menu"/>
  1. 보기를 채우는 메뉴 를 만듭니다.
<!-- res/menu/bottom_navigation_menu.xml -->

<?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/my_action1"
        android:enabled="true"
        android:icon="@drawable/my_drawable"
        android:title="@string/text"
        app:showAsAction="ifRoom" />
    ....
</menu>
  1. 클릭 이벤트에 대한 리스너 부착 :
//Get the view
BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);
//Attach the listener
bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {

                    case R.id.my_action1:
                        //Do something...
                        break;

                    //...
                }
                return true;//returning false disables the Navigation bar animations
            }
        });

BottomNavigation-Demo 에서 데모 코드를 체크 아웃하십시오.

BottomNavigationView의 사용자 정의

참고 : BottomNavigationView 사용 방법에 대해 알고 있다고 가정합니다.


이 예제에서는 BottomNavigationView 에 selector를 추가하는 방법을 설명합니다. 따라서 UI에서 아이콘과 텍스트를 나타낼 수 있습니다.

Drawable bottom_navigation_view_selector.xml 과 같이 작성하십시오.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:color="@color/bottom_nv_menu_selected" android:state_checked="true" />
    <item android:color="@color/bottom_nv_menu_default" />
</selector>

그리고 레이아웃 파일의 BottomNavigationView 에 아래의 속성을 사용하십시오.

app:itemIconTint="@drawable/bottom_navigation_view_selector" 
app:itemTextColor="@drawable/bottom_navigation_view_selector"

위의 예에서는 app:itemIconTintapp:itemTextColor 동일한 selector bottom_navigation_view_selector 를 사용하여 텍스트와 아이콘 색상을 동일하게 유지했습니다. 그러나 디자인에 텍스트와 아이콘의 색상이 다른 경우 2 개의 다른 선택기를 정의하여 사용할 수 있습니다.


출력은 다음과 유사합니다.

옵션 1

옵션 2

활성화 / 비활성화 상태 처리

메뉴 항목 활성화 / 비활성화를위한 선택기를 작성하십시오.

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_enabled="true" />
    <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
</selector>

design.xml

<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/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

3 개 이상의 메뉴 허용

ShiftMode라는 동작을 비활성화하는 방법은 현재 없기 때문에이 예제는 해결 방법입니다.

그와 같은 기능을 만듭니다.

public static void disableMenuShiftMode(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("BNVHelper", "Unable to get shift mode field", e);
    } catch (IllegalAccessException e) {
        Log.e("BNVHelper", "Unable to change value of shift mode", e);
    }
}

항목 개수가 3 개를 초과하면 메뉴의 이동 동작이 비활성화됩니다.

용법

BottomNavigationView navView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
disableMenuShiftMode(navView);

Proguard 문제 : 다음 줄 proguard 구성 파일을 추가하십시오. 그렇지 않으면 작동하지 않습니다.

-keepclassmembers class android.support.design.internal.BottomNavigationMenuView { 
boolean mShiftingMode; 
}

또는 클래스를 만들고 거기에서이 메서드에 액세스 할 수 있습니다. 원본 답글보기

참고 : 이것은 Reflection 기반의 HOTFIX입니다 . Google의 지원 라이브러리가 직접 함수 호출로 업데이트되면이를 업데이트하십시오.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow