\uc548\ub4dc\ub85c\uc774\ub4dc\ub294 \uba40\ud2f0\ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \ub54c \ud654\uba74 \uac04 \uc804\ud658\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud55c \uc5ec\ub7ec \uac00\uc9c0 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uadf8 \uc911\uc5d0\uc11c\ub3c4 \uc778\uae30 \uc788\ub294 \ubc29\ubc95 \uc911 \ud558\ub098\uac00 \ubc14\ub85c \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0(Navigation Drawer)<\/strong>\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub97c \ud1b5\ud574 \ub4dc\ub85c\uc5b4 \ud654\uba74\uc744 \uad6c\uc131\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc0c1\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub294 \uc0ac\uc6a9\uc790\uac00 \ub2e4\uc591\ud55c \uc571\uc758 \uc139\uc158\uc73c\ub85c \uc190\uc27d\uac8c \uc774\ub3d9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 UI \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \ud654\uba74\uc758 \uc67c\ucabd\uc5d0\uc11c \uc2ac\ub77c\uc774\ub4dc\ud558\uc5ec \ud45c\uc2dc\ub418\uba70, \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uc6a9\uc790\uac00 \uc0c1\ub2e8\uc5d0 \uc788\ub294 \ud584\ubc84\uac70 \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud558\uac70\ub098 \uc2a4\uc640\uc774\ud504\ud558\uc5ec \uc5f4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\ub97c \uc5f4\uace0 \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. “Empty Activity”\ub97c \uc120\ud0dd\ud558\uc5ec \uae30\ubcf8 \uad6c\uc870\ub85c \uc2dc\uc791\ud569\ub2c8\ub2e4. Kotlin\uc744 \uc5b8\uc5b4\ub85c \uc120\ud0dd\ud558\uace0, \ud328\ud0a4\uc9c0 \uc774\ub984 \ubc0f \uc800\uc7a5 \uacbd\ub85c\ub97c \uc124\uc815\ud55c \ud6c4 “Finish”\ub97c \ud074\ub9ad\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \ud544\uc694\ud55c \uc885\uc18d\uc131\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 \uc704\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 Material Design \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc774\ud6c4 Gradle Sync\ub97c \ud1b5\ud574 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc801\uc6a9\ud558\uc138\uc694.<\/p>\n \uba54\uc778 \uc561\ud2f0\ube44\ud2f0\uc758 \ub808\uc774\uc544\uc6c3 \ud30c\uc77c\uc778 \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\uc5d0 \ud544\uc694\ud55c \uba54\ub274 \ud56d\ubaa9\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\uc640 \uba54\uc778 \uc561\ud2f0\ube44\ud2f0\ub97c \uc5f0\uacb0\ud558\uae30 \uc704\ud574 \ub4dc\ub85c\uc5b4\ub97c \uc5f4\uac70\ub098 \ub2eb\uc73c\ub824\uba74 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4 \uc694\uc18c\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c Toolbar\uc758 \ud584\ubc84\uac70 \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud558\uc5ec \ub4dc\ub85c\uc5b4\ub97c \uc5ec\ub294 \uad6c\uc870\ub85c \uc124\uc815\ud569\ub2c8\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub97c MainActivity.kt\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n \uc704\uc758 \ucf54\ub4dc\ub294 \ub4dc\ub85c\uc5b4 \ub808\uc774\uc544\uc6c3\uc758 \ub0b4\ube44\uac8c\uc774\uc158 \uc544\uc774\ucf58(\ud584\ubc84\uac70 \uc544\uc774\ucf58)\uc744 \ud074\ub9ad\ud588\uc744 \ub54c \ub4dc\ub85c\uc5b4\ub97c \uc5fd\ub2c8\ub2e4.<\/p>\n \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\uc640 \ud568\uaed8 \ub2e4\uc911 Fragment\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 Fragment\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\ub3c4 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. Fragment\ub294 UI\ub97c \uad6c\uc131\ud558\ub294 \ub3c5\ub9bd\uc801\uc778 \ubaa8\ub4c8\ub85c, \uc5ec\ub7ec \ud654\uba74 \uad6c\uc131\uc5d0\uc11c \ubc18\ubcf5\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uba3c\uc800, Fragment \ud074\ub798\uc2a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 “HomeFragment”, “ProfileFragment”, “SettingsFragment”\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n \uac01 Fragment\uc5d0 \ub300\ud55c \ub808\uc774\uc544\uc6c3 \ud30c\uc77c\uc744 \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uac01 Fragment\uc5d0 \ub300\ud55c XML \ub808\uc774\uc544\uc6c3 \ud30c\uc77c\uc758 \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n \uba54\ub274 \ud56d\ubaa9 \ud074\ub9ad \uc2dc \ud574\ub2f9 Fragment\ub85c \uc804\ud658\ud558\ub294 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4. \uc571\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uae30 \uc704\ud574 \uc5ec\ub7ec \uac00\uc9c0 \ubc29\ubc95\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ube44\ub3d9\uae30 \uc791\uc5c5<\/strong>\uc774\ub098 \ub370\uc774\ud130 \uce90\uc2f1<\/strong> \uae30\ubc95\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \ubcf4\ub2e4 \ubd80\ub4dc\ub7fd\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc774\uc81c Kotlin\uc744 \uc774\uc6a9\ud574 \uc548\ub4dc\ub85c\uc774\ub4dc \uc571 \uac1c\ubc1c\uc5d0\uc11c \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub6f0\uc5b4\ub09c \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub294 \ud604\ub300 \uc548\ub4dc\ub85c\uc774\ub4dc \uc571\uc5d0\uc11c \ud544\uc218\uc801\uc778 \uc694\uc18c \uc911 \ud558\ub098\uc774\uba70, \ub2e4\uc591\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604\ud558\ub294 \ub370 \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc55e\uc73c\ub85c\uc758 \uac1c\ubc1c \uacfc\uc815\uc5d0\ub3c4 \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub97c \uc801\uadf9 \ud65c\uc6a9\ud574 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4!<\/p>\n1. \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub780?<\/h2>\n
2. \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\uc758 \uc7a5\uc810<\/h2>\n
\n
3. \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0 \uad6c\uc131\ud558\uae30<\/h2>\n
Step 1: \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h3>\n
Step 2: Gradle Dependencies \uc124\uc815<\/h3>\n
build.gradle<\/code> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n\n
\n dependencies {\n implementation 'com.google.android.material:material:1.5.0'\n }\n <\/code>\n <\/pre>\nStep 3: XML \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30<\/h3>\n
activity_main.xml<\/code>\uc744 \uc218\uc815\ud558\uc5ec \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uae30\ubcf8 \uad6c\uc870\uc758 \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n\n
\n <androidx.drawerlayout.widget.DrawerLayout\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <FrameLayout\n android:id=\"@+id\/content_frame\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n \n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"\uba54\uc778 \ucee8\ud150\uce20\"\n android:layout_gravity=\"center\"\/>\n\n <\/FrameLayout>\n\n <com.google.android.material.navigation.NavigationView\n android:id=\"@+id\/nav_view\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"match_parent\"\n android:layout_gravity=\"start\"\n app:headerLayout=\"@layout\/nav_header\"\n app:menu=\"@menu\/nav_menu\"\/>\n\n <\/androidx.drawerlayout.widget.DrawerLayout>\n <\/code>\n <\/pre>\nStep 4: \ub0b4\ube44\uac8c\uc774\uc158 \uba54\ub274 \uc0dd\uc131<\/h3>\n
res\/menu\/nav_menu.xml<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c \ub0b4\uc6a9\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4:<\/p>\n\n
\n <menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\n <item\n android:id=\"@+id\/nav_home\"\n android:title=\"\ud648\"\/>\n <item\n android:id=\"@+id\/nav_profile\"\n android:title=\"\ud504\ub85c\ud544\"\/>\n <item\n android:id=\"@+id\/nav_settings\"\n android:title=\"\uc124\uc815\"\/>\n <\/menu>\n <\/code>\n <\/pre>\nStep 5: \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0\uc640 \uc561\ud2f0\ube44\ud2f0 \uc5f0\uacb0\ud558\uae30<\/h3>\n
MainActivity.kt<\/code> \ud30c\uc77c\uc744 \uc218\uc815\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uae30\ubcf8\uc801\uc778 \ucf54\ub4dc\ub97c \ud3ec\ud568\ud55c \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n\n
\n package com.example.navigationdrawer\n\n import android.os.Bundle\n import androidx.appcompat.app.AppCompatActivity\n import androidx.drawerlayout.widget.DrawerLayout\n import com.google.android.material.navigation.NavigationView\n import androidx.appcompat.widget.Toolbar\n import android.view.MenuItem\n import android.content.Intent\n\n class MainActivity : AppCompatActivity() {\n\n private lateinit var drawerLayout: DrawerLayout\n private lateinit var navView: NavigationView\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n val toolbar: Toolbar = findViewById(R.id.toolbar)\n setSupportActionBar(toolbar)\n\n drawerLayout = findViewById(R.id.drawer_layout)\n navView = findViewById(R.id.nav_view)\n\n navView.setNavigationItemSelectedListener { menuItem ->\n when (menuItem.itemId) {\n R.id.nav_home -> {\n \/\/ \ud648 \ud074\ub9ad \uc2dc \ucc98\ub9ac\ud560 \ub0b4\uc6a9\n true\n }\n R.id.nav_profile -> {\n \/\/ \ud504\ub85c\ud544 \ud074\ub9ad \uc2dc \ucc98\ub9ac\ud560 \ub0b4\uc6a9\n true\n }\n R.id.nav_settings -> {\n \/\/ \uc124\uc815 \ud074\ub9ad \uc2dc \ucc98\ub9ac\ud560 \ub0b4\uc6a9\n true\n }\n else -> false\n }.also {\n drawerLayout.closeDrawers() \/\/ \ub4dc\ub85c\uc5b4\ub97c \ub2eb\uc74c\n }\n }\n }\n }\n <\/code>\n <\/pre>\nStep 6: \ub4dc\ub85c\uc5b4 \uc5f4\uae30 \ubc0f \ub2eb\uae30<\/h3>\n
\n
\n toolbar.setNavigationOnClickListener {\n drawerLayout.openDrawer(GravityCompat.START)\n }\n <\/code>\n <\/pre>\n4. \ub2e4\uc911 Fragment \uad00\ub9ac<\/h2>\n
Step 1: Fragment \ud074\ub798\uc2a4 \uc0dd\uc131<\/h3>\n
\n
\n class HomeFragment : Fragment() {\n override fun onCreateView(\n inflater: LayoutInflater, container: ViewGroup?,\n savedInstanceState: Bundle?\n ): View? {\n return inflater.inflate(R.layout.fragment_home, container, false)\n }\n }\n\n class ProfileFragment : Fragment() {\n override fun onCreateView(\n inflater: LayoutInflater, container: ViewGroup?,\n savedInstanceState: Bundle?\n ): View? {\n return inflater.inflate(R.layout.fragment_profile, container, false)\n }\n }\n\n class SettingsFragment : Fragment() {\n override fun onCreateView(\n inflater: LayoutInflater, container: ViewGroup?,\n savedInstanceState: Bundle?\n ): View? {\n return inflater.inflate(R.layout.fragment_settings, container, false)\n }\n }\n <\/code>\n <\/pre>\nStep 2: Fragment \ub808\uc774\uc544\uc6c3 \ud30c\uc77c \uc0dd\uc131<\/h3>\n
\n
\n <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"\ud648 \ud654\uba74\"\/>\n <\/LinearLayout>\n\n <!-- profile.xml -->\n <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"\ud504\ub85c\ud544 \ud654\uba74\"\/>\n <\/LinearLayout>\n\n <!-- settings.xml -->\n <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:orientation=\"vertical\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"\uc124\uc815 \ud654\uba74\"\/>\n <\/LinearLayout>\n <\/code>\n <\/pre>\nStep 3: Fragment \uc804\ud658 \ucc98\ub9ac<\/h3>\n
MainActivity.kt<\/code>\uc758 navView.setNavigationItemSelectedListener<\/code> \ubd80\ubd84\uc744 \uc218\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n
\n navView.setNavigationItemSelectedListener { menuItem ->\n val fragment: Fragment = when (menuItem.itemId) {\n R.id.nav_home -> HomeFragment()\n R.id.nav_profile -> ProfileFragment()\n R.id.nav_settings -> SettingsFragment()\n else -> HomeFragment()\n }\n supportFragmentManager.beginTransaction()\n .replace(R.id.content_frame, fragment)\n .commit()\n drawerLayout.closeDrawer(GravityCompat.START)\n true\n }\n <\/code>\n <\/pre>\n5. \ub0b4\ube44\uac8c\uc774\uc158 \ubdf0 \ucd5c\uc801\ud654\ud558\uae30<\/h2>\n
\uacb0\ub860<\/h2>\n
\ucc38\uace0 \uc790\ub8cc<\/h2>\n