your own miracle

반응형

 

 

 

 

Bottom Navigation 이란?

 

앱 하단에 위치한 탐색 모음이다. 사용자가 탭 한 번으로 최상위 카테고리에 쉽게 접근 및 전환이 가능하도록 만든다. 탐색 모음을 하단에 배치한 것은 모바일 디바이스 사용성에 대한 연구 결과에 따른 것으로, 메인 기능 및 자주 사용되는 작업은 화면 아래쪽에 배치하는 것이 편리하기 때문이다.

 

 

사용방법 

 

1. build.gradle에 implementation 해준다. ( ※ Android Studio 4.1.1 버전의 경우 기본 설정되어있다)

 

 

2.  res 폴더 우클릭 - New - Android Resource File

 

 

3. 파일명 설정 후 Resource type을 'Menu'로 바꿔준다. 그리고 확인

 

 

4. 생성한 파일에 코드를 작성한다

 

 

5. 하단 내비게이션이 들어갈 레이아웃에 코드를 추가한다

 

 

6.  MainActivity에 코드를 추가한다

 

 

유의할 점

1. 하단 내비게이션의 메뉴 개수는 3~5개 일 때 사용하며, 모바일 혹은 태블릿 환경에서 사용한다

2. 하단 네비게이션과 탭을 결합하면 사용자에게 혼동을 줄 수 있기 때문에 주의가 필요하다

3. 메뉴의 이름은 짧고 의미 있게 설정한다. 화면에서 텍스트가 잘려서는 안 된다

4. 아이콘은 단일 색상으로 활성/비활성이 뚜렷이 구분되어야 하며, 대비가 높은 색상을 사용해야 한다

5. 하단 내비게이션의 크기는 고정되어있어야 하며 스크롤하거나 수평으로 움직여서는 안 된다

 

 

 


참고

 

BottomNavigationView  |  Android 개발자  |  Android Developers

From class android.view.ViewGroup void addChildrenForAccessibility(ArrayList arg0) void addFocusables(ArrayList arg0, int arg1, int arg2) void addKeyboardNavigationClusters(Collection arg0, int arg1) boolean addStatesFromChildren() void addTouchables(Array

developer.android.com

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

 

모바일을 위한 UX 디자인  -하단 내비게이션

(출처 : https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/와 https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.cycyhsnzi의 기사를 번역 및 가공한 컨텐츠 입니

brunch.co.kr

 

안드로이드 Bottom Navigation View 예제

안드로이드에서 하단 바로 선택할 수 있는 게 Bottom Navigation View입니다. 시작하기 build.gradle에 아래 정의를 추가해줍니다. implementation 'com.android.support:design:29.0.0' implementation 'com.goog..

imleaf.tistory.com

 

728x90
반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band