Android
아래쪽 탐색보기
수색…
소개
Bottom Navigation View는 머지 않아 머티리얼 디자인 가이드 라인 에 포함되어 있지만 앱에 구현하기가 쉽지 않습니다.
일부 응용 프로그램은 자체 솔루션을 구축했으며 다른 일부는 제 3 자 오픈 소스 라이브러리를 사용하여 작업을 완료했습니다.
이제 디자인 지원 라이브러리에이 하단 탐색 모음이 추가 된 것을 볼 수 있습니다. 사용 방법에 대해 살펴 보겠습니다.
비고
기본 구현
BottomNavigationView
를 추가하려면 다음 단계를 수행하십시오.
-
build.gradle
에 종속성을 추가하십시오.
compile 'com.android.support:design:25.1.0'
- 레이아웃에
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"/>
- 보기를 채우는 메뉴 를 만듭니다.
<!-- 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>
- 클릭 이벤트에 대한 리스너 부착 :
//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:itemIconTint
및app:itemTextColor
동일한 selectorbottom_navigation_view_selector
를 사용하여 텍스트와 아이콘 색상을 동일하게 유지했습니다. 그러나 디자인에 텍스트와 아이콘의 색상이 다른 경우 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의 지원 라이브러리가 직접 함수 호출로 업데이트되면이를 업데이트하십시오.