하단 내비게이션 바(BottomNavigationView)

 

안녕하세요! 오늘은 캡스톤 진행을 하면서 꼭 필요한 UI 요소 중 하나인 BottomNavigationView 에 대해 소개하겠습니다.

숙소 대시보드 화면

 

저희 팀은 일차적으로 메인 대시보드 화면을 이렇게 만들어 보았습니다. 그 중 초록색 영역으로 표시한 부분은 하단네비게이션뷰(BottomNavigationView)라고 합니다. 안드로이드 공식 문서를 한번 살펴보겠습니다.

 

공식 문서

 

1) 정의

"Represents a standard bottom navigation bar for application" → "애플리케이션용 표준 하단 내비게이션 바를 나타낸다"

 

2) 사용하는 이유 및 제한 요건

"Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations." → "하단 내비게이션 바는 사용자들이 한 번의 탭으로 탐색하고 전환하는 것을 용이하게 한다. 하단 내비게이션 바는 어플리케이션이 3개에서 5개의 최상단 목적지가 있을 때 사용되어야 한다." 

 

이때, 최상단 목적지는 뒤로 가기 버튼을 눌렀을 때 이전 화면으로 넘어가지 않고 앱이 종료되는 화면을 의미합니다.

 

공식 문서에서 어느 정도 개념적으로 짚고, 이제 구현하는 과정으로 넘어가겠습니다!

UI (User Interface) 

UI 구조

 

3가지로 나눠져있는 것을 볼 수 있는데요. 액티비티안에 프래그먼트와 하단 네비게이션뷰가 있는 구조입니다. 

즉, 액티비티 기준으로는  FragmentContainerView 와 BottomNavigationView 총 2가지 뷰가 필요합니다. 

FragmentContainerView

Fragment 를 담고있는 뷰를 의미합니다. 코드를 한번 볼까요?

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/nav_host_fragment_main"
    android:name="androidx.navigation.fragment.NavHostFragment"
    app:defaultNavHost="true"
    app:navGraph="@navigation/navigation" />

 

 

여기서 name, defaultHost, navGraph 에 대해서 알아야합니다. 먼저, name 에 지정된 NavHostFragment 는 내비게이션 그래프에 따라 프래그먼트를 전환해줍니다. defaultNavHost 를 참으로 할 경우, 기본 내비게이션 호스트로 지정하여 뒤로가기 버튼 이를 기준으로 동작합니다. navGraph 같은 경우는 화면(프래그먼트)간의 전환에 필요한 네비게이션 관련 파일을 연결해줍니다. 해당 파일을 한번 살펴볼게요.

화면 간 이동(navigation)

 

navigation XML 파일에서는 이동할 프래그먼트를 정의해주면 됩니다.

<navigation 
    android:id="@+id/navigation"
    app:startDestination="@+id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.example.smartstay.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />
        
    ...
    
</navigation>

 

startDestination 에 어떤 화면(프래그먼트)에서 시작할건지 지정해주고, 안에 들어있는 프래그먼트는 원하는 수만큼 지정해주면 됩니다.

 

BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        app:menu="@menu/bottom_nav_menu" />

 

우리가 결국 필요한 UI 인 BottomNavigationView 를 만들기 위해서는 각 항목을 보일 메뉴가 필요합니다. 아까 공식문서에서 이런 말이 적혀있었습니다.

 

"The bar contents can be populated by specifying a menu resource file. Each menu item title, icon and enabled state will be used for displaying bottom navigation bar items." → "바의 내용은 메뉴 리소스 파일을 지정함으로써 채워질 수 있습니다. 각각의 메뉴 항목의 제목, 아이콘, 활성화 상태는 하단 내비게이션 바 항목을 보여주기 위해 사용될 것입니다."

 

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="홈" />

    <item
        android:id="@+id/navigation_favorites"
        android:icon="@drawable/ic_favorites"
        android:title="찜" />

    <item
        android:id="@+id/navigation_profiles"
        android:icon="@drawable/ic_profiles"
        android:title="내 정보" />

</menu>

 

이렇게 메뉴 파일에서 각 아이템의 아이디, 아이콘(이미지), 제목을 지정해줍니다. 여기서 주의할 점은 menu id와 navigation 에서의 fragment id 를 동일하게 해야합니다. 왜냐하면 menu id 를 가지고 navGraph 에서 동일한 프래그먼트 id 를 찾아서 해당 화면으로 이동하는 구조이기 때문입니다. XML(UI) 에서의 코드 준비는 다 했으니, 기능 구현으로 넘어갈게요!

 

기능(동작) 구현

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val bottomNavigationView: BottomNavigationView = binding.navView
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment_main) as NavHostFragment
        val navController = navHostFragment.navController
        bottomNavigationView.setupWithNavController(navController)
    }
}

 

FragmentContainerView 를 NavHostFragment 로 형변환(캐스팅)한 후 navController 를 찾습니다. 이후 찾은 navController 를 하단 네비게이션 뷰와 연결해주면 됩니다! 코드가 어떻게 동작하는지 볼게요.

시연 영상

시연 영상

 

이렇게 하단 내비게이션 바의 각 항목을 클릭했을 때 화면이 전환되는 것을 볼 수 있습니다 🫠

신기하지 않나요? 필자는 이런 눈에 보이는 요소때문에 앱을 만드는 것에 자연스레 관심을 가지게 되었답니다 ㅎㅎ (전공 중 유일하게 흥미를 가진 과목) 채팅 기능을 가진 숙소 어플을 완성해나가는 과정을 여러분들도 궁금해하면 좋겠다는 바람이 있네요. 다음에는 또 다른 기능을 주제로 들고오겠습니다. 감사합니다😄