[kotlin] 메뉴 및 네비게이션 드로어 구현을 위한 Material Components 활용 방법

20 Dec 2023

kotlin

안녕하세요! 이번에는 코틀린 언어를 사용하여 안드로이드 앱에서 Material Components를 활용하여 메뉴와 네비게이션 드로어를 구현하는 방법에 대해 알아보겠습니다. Material Components 라이브러리는 Google에서 제공하는 UI 컴포넌트 라이브러리로, 앱의 디자인을 간편하게 향상시킬 수 있는 다양한 기능을 제공합니다.

Material Components 라이브러리 추가

먼저, 앱의 build.gradle 파일에 Material Components 라이브러리를 추가해야 합니다. 아래와 같이 의존성을 추가하세요.

implementation 'com.google.android.material:material:1.3.0'

의존성을 추가한 후, 앱을 빌드하고 Material Components를 사용할 준비가 되었습니다.

메뉴 구현

메뉴를 구현하기 위해서는 res 폴더 아래에 menu 폴더를 생성한 후 메뉴 아이템을 정의할 XML 파일을 만들어야 합니다. 예를 들면, main_menu.xml 파일에 다음과 같이 메뉴 아이템을 추가할 수 있습니다.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_search"
        android:title="Search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        app:showAsAction="never" />
</menu>

그 다음, 액티비티나 프래그먼트에서 메뉴를 사용하려면 다음과 같이 작업을 수행할 수 있습니다.

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.main_menu, menu)
    return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            // 검색 기능 실행
            true
        }
        R.id.action_settings -> {
            // 설정 화면으로 이동
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

네비게이션 드로어 구현

네비게이션 드로어를 구현하기 위해서는 DrawerLayout과 NavigationView를 사용할 수 있습니다. 예를 들면, 다음과 같이 레이아웃을 구성할 수 있습니다.

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 메인 내용 -->
    </FrameLayout>

    <!-- 네비게이션 드로어 view -->
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start">
        <!-- 네비게이션 드로어 내용 -->
    </com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

위와 같이 DrawerLayout 안에 메인 내용을 담은 FrameLayout과 네비게이션 드로어를 담은 NavigationView를 사용하여 네비게이션 드로어를 구현할 수 있습니다. 네비게이션 드로어의 메뉴 아이템은 메뉴를 구현하는 것과 유사하게 XML 파일에 정의한 후, 액티비티나 프래그먼트에서 네비게이션 드로어를 다룰 수 있습니다.

간단히 코틀린에서 Material Components를 활용하여 메뉴와 네비게이션 드로어를 구현하는 방법에 대해 알아보았습니다. Material Components를 사용하면 간편하게 앱의 디자인을 개선할 수 있으며, 사용자 경험을 향상시킬 수 있는 다양한 기능들을 제공합니다. 여러분도 Material Components를 활용하여 더 나은 안드로이드 앱을 만들어보세요!

참고 자료: Material Components - Android Developers

더 많은 정보를 원하시면 공식 문서를 확인해보세요. 감사합니다!

목차

Material Components 라이브러리 추가

메뉴 구현

네비게이션 드로어 구현