\uc548\ub4dc\ub85c\uc774\ub4dc \uc571 \uac1c\ubc1c\uc5d0 \uc788\uc5b4\uc11c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub294 \ub9e4\uc6b0 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. UI\uac00 \uc9c1\uad00\uc801\uc774\uace0 \uc0ac\uc6a9\ud558\uae30 \uc27d\ub2e4\uba74, \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub418\uba70, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\uacf5\uc5d0 \uae0d\uc815\uc801\uc778 \uc601\ud5a5\uc744 \ubbf8\uce60 \uac83\uc785\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 Kotlin\uacfc Android\uc758 \ud0ed \ub808\uc774\uc544\uc6c3(TAB Layout)<\/strong>\uc744 \ud65c\uc6a9\ud558\uc5ec, \uae30\ubcf8\uc801\uc778 \ud0ed \ubc84\ud2bc\uc744 \uad6c\uc131\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \ud0ed \ub808\uc774\uc544\uc6c3\uc740 \uc5ec\ub7ec \ud654\uba74\uc744 \ud0ed\uc73c\ub85c \ub098\ub204\uc5b4 \uc0ac\uc6a9\uc790\uac00 \uc27d\uac8c \uc804\ud658\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 UI \uad6c\uc131 \uc694\uc18c\uc785\ub2c8\ub2e4. \ud0ed\uc740 \uc8fc\ub85c \uc571\uc758 \uc8fc\uc694 \uae30\ub2a5\uc744 \uad6c\ubd84\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\uba70, \uc0ac\uc6a9\uc790\ub294 \ud654\uba74 \uc0c1\ub2e8\uc5d0\uc11c \uc6d0\ud558\ub294 \ud0ed\uc744 \uc120\ud0dd\ud558\uc5ec \ucf58\ud150\uce20\ub97c \uc2a4\uc704\uce6d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n Android\uc5d0\uc11c \ud0ed\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 TabLayout<\/strong>\uacfc ViewPager<\/strong> \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud65c\uc6a9\ud569\ub2c8\ub2e4. TabLayout\uc740 \uc2e4\uc81c \ud0ed \ubc84\ud2bc\uc744 \ubcf4\uc5ec\uc8fc\uace0, ViewPager\ub294 \ud0ed\uc5d0 \ud574\ub2f9\ud558\ub294 \uc5ec\ub7ec \ud398\uc774\uc9c0\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4. \uc774 \ub450 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud568\uaed8 \uc0ac\uc6a9\ud558\uc5ec \uc2a4\uc640\uc774\ud504 \uac00\ub2a5\ud55c \ud0ed\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \ud0ed \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud574\uc11c\ub294 \uba87 \uac00\uc9c0 \ub2e8\uacc4\ub97c \ub530\ub77c\uc57c \ud569\ub2c8\ub2e4.<\/p>\n \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\ub97c \ud1b5\ud574 \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. Empty Activity<\/strong>\ub97c \uc120\ud0dd\ud558\uace0, Kotlin\uc744 \uc0ac\uc6a9\ud560 \uac83\uc784\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\uc758 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc774\uc81c \ud0ed\uc5d0\uc11c \uc0ac\uc6a9\ud560 Fragment \ud074\ub798\uc2a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ub098\uba38\uc9c0 Fragment\ub4e4\ub3c4 \uc720\uc0ac\ud558\uac8c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n \uc774\uc81c \uc804\uccb4 \ud504\ub85c\uc81d\ud2b8\ub97c \ube4c\ub4dc\ud558\uc5ec \uc2e4\ud589\ud558\uba74, 3\uac1c\uc758 \ud0ed\uc774 \uc788\ub294 \uc571\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \ud0ed\uc744 \uc120\ud0dd\ud560 \ub54c\ub9c8\ub2e4 \ud574\ub2f9\ud558\ub294 Fragment\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \uc774\ubc88\uc5d0\ub294 \uac01 Fragment\uc5d0 \uac04\ub2e8\ud55c \ub0b4\uc6a9\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uac01 Fragment\uc758 \ub808\uc774\uc544\uc6c3 \ud30c\uc77c\uc744 \uc791\uc131\ud574 \uc90d\ub2c8\ub2e4.<\/p>\n TabLayout\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \ub9ce\uc740 \uc2a4\ud0c0\uc77c \uc635\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ud0ed\uc758 \uc0c9\uc0c1, \ud06c\uae30, \uc544\uc774\ucf58 \ub4f1\uc744 \uc870\uc815\ud558\uc5ec \ub354\uc6b1 \ub9e4\ub825\uc801\uc778 UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uba87 \uac00\uc9c0 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n \ud0ed\uc758 \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1\uacfc \ubc30\uacbd \uc0c9\uc0c1\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Kotlin\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc548\ub4dc\ub85c\uc774\ub4dc \uc571\uc5d0\uc11c \ud0ed \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. TabLayout\uacfc ViewPager\ub97c \ud568\uaed8 \uc0ac\uc6a9\ud558\uc5ec \uac04\ud3b8\ud558\uac8c \uc5ec\ub7ec Fragment\ub97c \uc804\ud658\ud558\ub294 UI\ub97c \uad6c\ucd95\ud560 \uc218 \uc788\uc5c8\uc73c\uba70, \uae30\ubcf8\uc801\uc778 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ubc29\ubc95\ub3c4 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \ub2e4\uc591\ud55c API\uc640 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ud65c\uc6a9\ud558\uc5ec, \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ub04c\uc5b4\uc62c\ub9b4 \uc218 \uc788\ub294 \uba4b\uc9c4 \uc571\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4!<\/p>\n \ub2e4\uc74c \uac15\uc88c\uc5d0\uc11c\ub294 \ucd94\uac00\uc801\uc778 \ud0ed\uc758 \ub3d9\uc791 \ubc0f \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \uad6c\ud604\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub9ce\uc740 \uad00\uc2ec \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4!<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"\ubaa9\ucc28<\/h2>\n
\n
\ud0ed \ub808\uc774\uc544\uc6c3\uc758 \uc774\ud574<\/h2>\n
\ud0ed \ub808\uc774\uc544\uc6c3 \uad6c\uc131\ud558\uae30<\/h2>\n
\n
1. \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \ubc0f Gradle \uc124\uc815<\/h3>\n
build.gradle<\/code> \ud30c\uc77c\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \uc758\uc874\uc131\uc744 \ucd94\uac00\ud574 \uc90d\ub2c8\ub2e4:<\/p>\nimplementation 'com.google.android.material:material:1.4.0'<\/code><\/pre>\n2. \ub808\uc774\uc544\uc6c3 \ud30c\uc77c \uc791\uc131<\/h3>\n
res\/layout\/activity_main.xml<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud569\ub2c8\ub2e4:<\/p>\n<androidx.coordinatorlayout.widget.CoordinatorLayout 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 <com.google.android.material.tabs.TabLayout\n android:id=\"@+id\/tabLayout\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n app:tabMode=\"fixed\"\n app:tabGravity=\"fill\"\/>\n\n <androidx.viewpager.widget.ViewPager\n android:id=\"@+id\/viewPager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\/>\n\n <\/androidx.coordinatorlayout.widget.CoordinatorLayout><\/code><\/pre>\n3. \ud0ed\uacfc ViewPager \uc5f0\uacb0<\/h3>\n
MainActivity.kt<\/code> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4:<\/p>\nimport android.os.Bundle\n import androidx.appcompat.app.AppCompatActivity\n import androidx.fragment.app.Fragment\n import androidx.fragment.app.FragmentPagerAdapter\n import androidx.viewpager.widget.ViewPager\n import com.google.android.material.tabs.TabLayout\n\n class MainActivity : AppCompatActivity() {\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n val tabLayout: TabLayout = findViewById(R.id.tabLayout)\n val viewPager: ViewPager = findViewById(R.id.viewPager)\n\n viewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager) {\n override fun getItem(position: Int): Fragment {\n return when (position) {\n 0 -> Fragment1()\n 1 -> Fragment2()\n else -> Fragment3()\n }\n }\n\n override fun getCount(): Int = 3\n \n override fun getPageTitle(position: Int): CharSequence? {\n return when (position) {\n 0 -> \"\ud0ed 1\"\n 1 -> \"\ud0ed 2\"\n 2 -> \"\ud0ed 3\"\n else -> null\n }\n }\n }\n\n tabLayout.setupWithViewPager(viewPager)\n }\n }<\/code><\/pre>\n4. \ud0ed\uc758 Fragment \uc124\uc815<\/h3>\n
Fragment1.kt<\/code>, Fragment2.kt<\/code>, Fragment3.kt<\/code>\ub97c \uac01\uac01 \ub9cc\ub4e4\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\nimport android.os.Bundle\n import androidx.fragment.app.Fragment\n import android.view.LayoutInflater\n import android.view.View\n import android.view.ViewGroup\n\n class Fragment1 : Fragment() {\n override fun onCreateView(\n inflater: LayoutInflater, container: ViewGroup?,\n savedInstanceState: Bundle?\n ): View? {\n return inflater.inflate(R.layout.fragment_1, container, false)\n }\n }<\/code><\/pre>\n\ud0ed \ub808\uc774\uc544\uc6c3\uc758 \uc608\uc81c<\/h2>\n
fragment_1.xml<\/h3>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\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=\"\uccab \ubc88\uc9f8 \ud0ed\uc758 \ub0b4\uc6a9\uc785\ub2c8\ub2e4\"\n android:layout_gravity=\"center\"\/>\n\n <\/FrameLayout><\/code><\/pre>\nfragment_2.xml<\/h3>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\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=\"\ub450 \ubc88\uc9f8 \ud0ed\uc758 \ub0b4\uc6a9\uc785\ub2c8\ub2e4\"\n android:layout_gravity=\"center\"\/>\n\n <\/FrameLayout><\/code><\/pre>\nfragment_3.xml<\/h3>\n
<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\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=\"\uc138 \ubc88\uc9f8 \ud0ed\uc758 \ub0b4\uc6a9\uc785\ub2c8\ub2e4\"\n android:layout_gravity=\"center\"\/>\n\n <\/FrameLayout><\/code><\/pre>\n\ud0ed \ub808\uc774\uc544\uc6c3\uc758 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5<\/h2>\n
\ud0ed \uc0c9\uc0c1 \uc124\uc815<\/h3>\n
tabLayout.setTabTextColors(Color.parseColor(\"#FFFFFF\"), Color.parseColor(\"#FF0000\"))<\/code><\/pre>\n\ud0ed \uc544\uc774\ucf58 \uc124\uc815<\/h3>\n
tabLayout.getTabAt(0)?.setIcon(R.drawable.icon1)\n tabLayout.getTabAt(1)?.setIcon(R.drawable.icon2)\n tabLayout.getTabAt(2)?.setIcon(R.drawable.icon3)<\/code><\/pre>\n\ub9c8\ubb34\ub9ac<\/h2>\n