안드로이드 스튜디오 BottomNavigationView 하단탭 만들기 - 1

 

Fragment 란?

 

하나의 액티비티 안에 여러 화면을 구현하는 것이다. 예를들어 카카오톡에서 하단의 탭을 누르면 해당화면으로 전환되는것을 말한다. 액티비티위에 Fragment가 존재하므로 Activity 전체를 덮으면 화면이 전환되는것처럼 보이게 된다.

 

navigation 라이브러리 설치

 

모델수준 그래들에 아래와 같이 탭바용 라이브러리를 설치한다. 코드 입력하고 꼭 Sync Now를 클릭해야 한다.

 

    implementation 'androidx.navigation:navigation-fragment:2.5.3'
    implementation 'androidx.navigation:navigation-ui:2.5.3'

 

 

RelativeLayout 으로 변경

 

layout의 activity_main에서 Code로 진입하여 constraintlayout을 RelativeLayout 으로 변경 하여 준다.

 

 

bottomnavigation 사용하기

 

layout의 activity_main에서 Design으로 진입하여 bottomNavigationView를 RelativeLayout 트리 아래로 끌어온다.

 

 

BottomNavigationView 화면설정을 아래와 같이 해준다.

 

 

Resource Manager

 

Navigatiion Resource File 선택

 

 

팝업창이 뜨면 File name를 입력한다. 필자는 배운대로 my_nav라고 입력하였다.

 

 

아래와 같이 Create new destination을 선택한다.

 

 

Fragment 화면을 만들어 준다. 

 

 

Fragement Name를 지어주고 Finish를 클릭한다.

 

 

이번실습에서 필자는 총 5개의 플레그먼트를 만들었다.

Create new destination를 눌러서 원하는 개수의 Fragment만큼 생성해 준다.

 

 

NavHostFragment 사용

layout의 activity_main에서 Design으로 진입해서 NavHostFragment를 끌어놓는다.

 

 

NavHostFragment를 끌어놓으면 Navigation Graphs 팝업이 뜨는데 여기서 미리 만들어놓은 my_nav를 선택하고 ok클릭!

 

 

layout의 activity_main에서 Code로 진입하여 하나의 뷰가 다른뷰 위로 위치하도록 코드를 추가한다.

 

android:layout_above="@id/bottomNavigationView"

 

 

각각의 fragment xml파일에서 Fragment의 text이름을 변경해준다.

 

 

Menu 만들기

 

Resource Manager에서 Menu ->  " + " 버튼을 클릭하여 Menu Resource File 눌러준다.

 

 

File name "bottom_menu" 를 입력하고 ok버튼을 클릭한다.

 

 

activity_main Design모드에서 플러그먼트와 같은 수의 Menu Item을 끌어다 놓는다. 현재 실습예제에는 5개의 Fragment를 만들었으므로 5개의 Item을 가지고 온다.

 

 

탭바에 넣을 이미지 가져오기

 

Item에 적용할 이미지를 가지고 온다.

Resource Manager에서 Drawble를 선택하고 " + "버튼을 눌러서 Vector Asset를 선택한다.

 

 

Asset Studio에서 Clip art를 클릭하고, 탭바에 적용할 이미지를 골라서 불러온다.

 

 

bottom_menu.xml Code모드에서 각각의 Item에 id, Drawble로 생성한 이미지, title를 설정한다.

 

 

bottomnavigation 세팅

 

activity_main Code모드에서 BottomNavigation에서 메뉴를 세팅한다.

 

app:menu="@menu/bottom_menu">

 

 

하단탭이 4개이상일때 문제해결

 

Fragment가 4개이상일때는 타이틀이 안보일 수 있다. 이때 아래와 같은 코드를 삽입한다.

app:labelVisibilityMode="labeled"

 

 

이번시간에는 Fragment 5개를 사용하여 하단 네비게이션바를 생성했다. 아직은 탭바를 누를때마다 해당 플레그먼트로 이동하지 않는다. 다음시간에는 해당 탭바를 클릭할때 해당 Fragment로 이동하는 로직 구현을 해보겠다.