[kotlin] 탭 레이아웃 및 바텀 네비게이션 구성을 위한 Material Components 사용 방법

20 Dec 2023

kotlin

안녕하세요! 이번에는 안드로이드 앱에서 Material Components를 사용하여 탭 레이아웃과 바텀 네비게이션을 어떻게 구성하는지 알아보겠습니다.

Material Components란?

Material Components는 Google에서 제공하는 디자인 라이브러리로, 안드로이드 앱의 사용자 인터페이스를 구성하는 데 도움을 주는 라이브러리입니다. 이를 사용하면 표준적인 디자인 가이드에 따라 멋진 UI를 손쉽게 구성할 수 있습니다.

탭 레이아웃 구성하기

Material Components를 사용하여 탭 레이아웃을 구성하려면 다음 단계를 따르면 됩니다.

의존성 추가: 먼저 앱의 build.gradle 파일에 Material Components의 의존성을 추가합니다.
```
 implementation 'com.google.android.material:material:1.3.0'
```

XML 레이아웃 구성: TabLayout을 XML 레이아웃에 추가하고 탭과 연결될 ViewPager도 함께 추가합니다.

 <com.google.android.material.tabs.TabLayout
     android:id="@+id/tabLayout"
     ... />

 <androidx.viewpager.widget.ViewPager
     android:id="@+id/viewPager"
     ... />

액티비티 또는 프래그먼트에서 연결: TabLayout과 ViewPager를 연결하여 탭과 페이지를 연결합니다.

 val tabLayout: TabLayout = findViewById(R.id.tabLayout)
 val viewPager: ViewPager = findViewById(R.id.viewPager)
    
 val adapter = MyPagerAdapter(supportFragmentManager)
 viewPager.adapter = adapter
 tabLayout.setupWithViewPager(viewPager)

바텀 네비게이션 구성하기

바텀 네비게이션은 하단에 위치한 탭으로, Material Components를 사용하여 구성할 수 있습니다.

XML 레이아웃에 추가하기: 바텀 네비게이션을 XML 레이아웃에 추가합니다.

 <com.google.android.material.bottomnavigation.BottomNavigationView
     android:id="@+id/bottomNavigation"
     ... />

액티비티 또는 프래그먼트에서 연결: 바텀 네비게이션을 액티비티 또는 프래그먼트에 추가하고 각 항목에 대한 동작을 정의합니다.

 val bottomNavigation: BottomNavigationView = findViewById(R.id.bottomNavigation)
 bottomNavigation.setOnNavigationItemSelectedListener { item ->
     when (item.itemId) {
         R.id.menu_home -> {
             // 홈 화면으로 이동하는 동작 정의
             true
         }
         R.id.menu_profile -> {
             // 프로필 화면으로 이동하는 동작 정의
             true
         }
         else -> false
     }
 }

이제 여러분은 Material Components를 사용하여 안드로이드 앱에 탭 레이아웃과 바텀 네비게이션을 구성할 수 있습니다. 이를 통해 사용자 친화적이고 멋진 UI를 구성할 수 있습니다. Material Components의 다양한 기능과 사용법에 대한 자세한 내용은 공식 문서를 참고하세요.