{"id":2591,"date":"2025-11-02T11:06:19","date_gmt":"2025-11-02T02:06:19","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2591"},"modified":"2025-11-03T07:05:49","modified_gmt":"2025-11-02T22:05:49","slug":"composeexample1","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/11\/02\/composeexample1\/","title":{"rendered":"[Compose]Example1-Layout"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb JetpackCompose\ub294 \uae30\uc874\uc758 xml\ubc29\uc2dd\uacfc\ub294 \ub2e4\ub974\uac8c \ucf54\ud2c0\ub9b0 \ucf54\ub4dc\ub85c UI\ub514\uc790\uc778\uc744 \uad6c\uc131\ud569\ub2c8\ub2e4.
JetpackCompose composes UI designs using Kotlin code, unlike the traditional XML method.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb @Compose \uc5b4\ub178\ud14c\uc774\uc158\uc774 \ubd99\uc5b4 \uc788\ub294 \ud568\uc218\ub97c \ucef4\ud3ec\uc988\ub77c\uace0 \ud569\ub2c8\ub2e4.
A function annotated with @Compose is called a compose.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc774 \ucef4\ud3ec\uc988\ub97c setContent {} \ub0b4\uc5d0\uc11c \uc2e4\ud589\ud569\ub2c8\ub2e4.
Run this compose inside setContent {}.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc544\ub798 \ucf54\ub4dc\ub294 \uae30\ubcf8 \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud55c \ucf54\ub4dc \uc785\ub2c8\ub2e4.
The code below is for the basic layout.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ub098\uba38\uc9c0 \uc124\uba85\uc740 \ucf54\ub4dc \uc8fc\uc11d\uc744 \ucc38\uc870\ud558\uc138\uc694
Please refer to the code comments for the rest of the explanation.<\/p>\n\n\n\n

package com.freelifemakers.jetpackexample1\n\nimport android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.activity.enableEdgeToEdge\nimport androidx.compose.foundation.background\nimport androidx.compose.foundation.layout.Arrangement\nimport androidx.compose.foundation.layout.Box\nimport androidx.compose.foundation.layout.Column\nimport androidx.compose.foundation.layout.Row\nimport androidx.compose.foundation.layout.Spacer\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.foundation.layout.padding\nimport androidx.compose.material3.Scaffold\nimport androidx.compose.material3.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.tooling.preview.Preview\nimport com.freelifemakers.jetpackexample1.ui.theme.JetPackExample1Theme\nimport androidx.compose.ui.Alignment \/\/ Alignment import \ucd94\uac00\nimport androidx.compose.material3.TextField \/\/ add\nimport androidx.compose.foundation.layout.fillMaxWidth \/\/ add\nimport androidx.compose.foundation.layout.height\nimport androidx.compose.foundation.layout.heightIn \/\/ add\nimport androidx.compose.ui.graphics.Color \/\/ add\nimport androidx.compose.foundation.layout.size\nimport androidx.compose.foundation.rememberScrollState\nimport androidx.compose.foundation.verticalScroll\nimport androidx.compose.ui.text.style.TextAlign\nimport androidx.compose.ui.unit.TextUnit\nimport androidx.compose.ui.unit.dp\nimport androidx.compose.ui.unit.sp\n\n\/*----------------------------------------------------------\n* -\ucef4\ud3ec\uc988\/Compose\n* \ud568\uc218\uc5d0 @Composable \uc5b4\ub178\ud14c\uc774\uc158\uc774 \ubd99\uc740\uac83\uc740 \ucef4\ud3ec\uc988\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc74c.\n*\n*  -\ub808\uc774\uc544\uc6c3\n* \uceec\ub7fc,\ub85c\uc6b0(\uc2a4\ud06c\ub864 \uc801\uc6a9)\n*\n* - Modifier\n* Jetpack Compose\uc5d0\uc11c Modifier\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \uafb8\ubbf8\uac70\ub098\n* \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\ub294 \ud544\uc218 \uc694\uc18c.\n* XML \ub808\uc774\uc544\uc6c3\uc5d0\uc11c\uc758 \uc18d\uc131(Attribute)\uacfc \ube44\uc2b7\ud55c \uc5ed\ud560\uc744 \ud558\uc9c0\ub9cc, \ud6e8\uc52c \ub354 \uc720\uc5f0\ud558\uace0 \uac15\ub825\ud568.\n*\n*\n* - Compose\n* Functions annotated with @Composable can be used with Compose.\n*\n* - Layout\n* Columns, Rows (scrolling)\n*\n* - Modifier\n* In Jetpack Compose, modifiers are essential elements used to decorate composable functions or add functionality.\n* They function similarly to attributes in XML layouts,\n* but are much more flexible and powerful.\n*\n*\n* -------------------------------------------------------------*\/\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        enableEdgeToEdge()\n        setContent {\n            JetPackExample1Theme {\n                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->\n\n                    \/\/ \uc2a4\ud06c\ub864 \uc0c1\ud0dc\ub294 Column \ubc14\uae65\uc5d0\uc11c \uc120\uc5b8\n                    \/\/ Scroll state is declared outside the column\n                    val scrollState = rememberScrollState()\n                    Column(\n                        modifier = Modifier\n                            .fillMaxSize()\n                            .verticalScroll(scrollState) \/\/ \uceec\ub7fc\uc5d0 \uc2a4\ud06c\ub864 \/ scroll to column\n                            .padding(innerPadding)\n\n                    ){\n\n                        \/\/ Welcome Message-default\n                        Greeting(\n                            name = \"Android\",\n                            modifier = Modifier.padding(innerPadding)\n                        )\n\n                        \/\/ Column Layout\n                        ColumnScrollExample(\n                            modifier = Modifier.padding(innerPadding)\n                        )\n\n                        \/\/ Row Layout\n                        RowLayoutExample(\n                            modifier = Modifier.padding(innerPadding)\n                        )\n\n                        \/\/ Column Layout\n                        ColumnLayoutExample(\n                            modifier = Modifier.padding(innerPadding)\n                        )\n\n                        \/\/ Box Layout\n                        TextExample(\"Box Alignment Example\", fontSizeParam = 30.sp)\n                        BoxAlignmentExample()\n\n                        Spacer(modifier = Modifier.height(30.dp))\n\n                        TextExample(\"Box Layering Example\", fontSizeParam = 30.sp)\n                        BoxLayeringExample()\n                    }\n                }\n            }\n        }\n    }\n}\n\n\n\/\/ === \ucef4\ud3ec\uc988 \uc601\uc5ed \/ Compose area ===\n\n@Composable\nfun Greeting(name: String, modifier: Modifier = Modifier) {\n    TextExample(\"Greeting Title\")\n    Text(\"Hellow $name\")\n}\n\n\n@Composable\nfun ColumnScrollExample(modifier: Modifier = Modifier) {\n    val scrollState = rememberScrollState()\n\n    Column(\n    ) {\n        TextExample(\"ColumScrollExample\")\n        for (i: Int in 1..20) {\n            Text(\"$i\")\n        }\n    }\n}\n\n@Composable\nfun ColumnLayoutExample(modifier: Modifier) {\n    Column(\n        modifier = modifier,\n\n        \/* verticalArrangement: Arrangement.Vertical\n         * Arrangement.Top (\uae30\ubcf8\uac12)\n         * Arrangement.Center\n         * Arrangement.Bottom\n         * Arrangement.SpaceEvenly\n         * Arrangement.SpaceAround\n         * Arrangement.SpaceBetween\n         *\/\n        verticalArrangement = Arrangement.Top,\n\n        \/* horizontalAlignment: Alignment.Horizontal\n         * Alignment.Start (\uae30\ubcf8\uac12)\n         * Alignment.CenterHorizontally\n         * Alignment.End\n         *\/\n        horizontalAlignment = Alignment.Start\n\n    ) {\n        Text(\"Column Layout Example\")\n        Text(\"1\")\n        Text(\"2\")\n        Text(\"3\")\n        Text(\"4\")\n        Text(\"5\")\n    }\n}\n\n@Composable\nfun RowLayoutExample(modifier: Modifier = Modifier) {\n    Row (\n        modifier = modifier,\n\n        \/* horizontalArrangement: Arrangement.Horizontal\n         * Arrangement.Start (\uae30\ubcf8\uac12)\n         * Arrangement.Center\n         * Arrangement.End\n         * Arrangement.SpaceEvenly\n         * Arrangement.SpaceAround\n         * Arrangement.SpaceBetween\n         *\/\n        horizontalArrangement = Arrangement.Start,\n        \/* verticalAlignment: Alignment.Vertical\n         * Alignment.Top (\uae30\ubcf8\uac12)\n         * Alignment.CenterVertically\n         * Alignment.Bottom\n         *\/\n        verticalAlignment = Alignment.Top\n    ){\n        Text(\"RowLayoutExample\")\n        Text(\"1\")\n        Text(\"2\")\n        Text(\"3\")\n        Text(\"4\")\n        Text(\"5\")\n    }\n}\n\n@Composable\nfun BoxAlignmentExample() {\n    \/\/ \ud14d\uc2a4\ud2b8\uac00 \uacb9\uce58\uc9c0 \uc54a\ub3c4\ub85d Box\uc5d0 \ucda9\ubd84\ud55c \ud06c\uae30 \ud655\ubcf4.\n    \/\/ Make sure the Box is large enough to avoid overlapping text.\n    Box(\n        modifier = Modifier\n            .fillMaxWidth() \/\/ \uac00\ub85c\ub97c \ucd5c\ub300\ub85c \ucc44\uc6b0\uae30 \/ Fill the width to the maximum\n            .height(400.dp) \/\/ \uace0\uc815\ub41c \ub192\uc774 \uc9c0\uc815 \/ Specify a fixed height\n            .background(Color.LightGray) \/\/ Box\uc758 \uc601\uc5ed\uc5d0 \uacbd\uc0c9 \ucd94\uac00 \/ Add a hard border to the box area\n            .padding(8.dp) \/\/ Box \ub0b4\ubd80\uc758 \uc5ec\ubc31 \/ Margin inside the box\n    ) {\n        val fontSize = 16.sp\n\n        \/\/ Modifier.align()\ub97c \uc0ac\uc6a9\ud558\uc5ec Box \ub0b4\ubd80\uc758 \uc704\uce58\ub97c \uc9c0\uc815\ud569\ub2c8\ub2e4.\n        \/\/ Use Modifier.align() to position it inside the Box.\n        Text(\n            text = \"TopStart\",\n            modifier = Modifier.align(Alignment.TopStart),\n            fontSize = fontSize\n        )\n        Text(\n            text = \"TopCenter\",\n            modifier = Modifier.align(Alignment.TopCenter),\n            fontSize = fontSize\n        )\n        Text(\n            text = \"TopEnd\",\n            modifier = Modifier.align(Alignment.TopEnd),\n            fontSize = fontSize\n        )\n\n        Text(\n            text = \"CenterStart\",\n            modifier = Modifier.align(Alignment.CenterStart),\n            fontSize = fontSize\n        )\n        Text(\n            text = \"Center\",\n            modifier = Modifier.align(Alignment.Center),\n            fontSize = fontSize,\n            textAlign = TextAlign.Center\n        )\n        Text(\n            text = \"CenterEnd\",\n            modifier = Modifier.align(Alignment.CenterEnd),\n            fontSize = fontSize\n        )\n\n        Text(\n            text = \"BottomStart\",\n            modifier = Modifier.align(Alignment.BottomStart),\n            fontSize = fontSize\n        )\n        Text(\n            text = \"BottomCenter\",\n            modifier = Modifier.align(Alignment.BottomCenter),\n            fontSize = fontSize\n        )\n        Text(\n            text = \"BottomEnd\",\n            modifier = Modifier.align(Alignment.BottomEnd),\n            fontSize = fontSize\n        )\n    }\n}\n\n@Composable\nfun BoxLayeringExample() {\n    Box(\n        modifier = Modifier\n            .size(200.dp) \/\/ \ud06c\uae30 \uc9c0\uc815 \/ Specify size\n            .background(Color.White) \/\/ \ubc30\uacbd\uc0c9 \/ Background Color\n    ) {\n        \/\/ \uac00\uc7a5 \uc544\ub798 \uae54\ub9ac\ub294 \uc694\uc18c (\ud070 \uc0ac\uac01\ud615)\n        \/\/ The bottommost element (large square)\n        Spacer(\n            modifier = Modifier\n                .size(150.dp)\n                .align(Alignment.Center) \/\/ \uc911\uc559 \uc815\ub82c \/ center alignment\n                .background(Color.Blue)\n        )\n\n        \/\/ \uacb9\uccd0\uc9c0\ub294 \uc694\uc18c (\uc791\uc740 \uc0ac\uac01\ud615)\n        \/\/ Overlapping elements (small squares)\n        Spacer(\n            modifier = Modifier\n                .size(100.dp)\n                .align(Alignment.Center)\n                .background(Color.Red)\n        )\n\n        \/\/ \uac00\uc7a5 \uc704\uc5d0 \ud45c\uc2dc\ub418\ub294 \uc694\uc18c (\ud14d\uc2a4\ud2b8)\n        \/\/ The topmost element (text)\n        Text(\n            text = \"Overlap Text\",\n            color = Color.White,\n            fontSize = 20.sp,\n            modifier = Modifier\n                .align(Alignment.Center)\n                .padding(top = 10.dp)\n        )\n    }\n}\n\n@Composable\nfun TextExample(\n    name: String,\n    modifier: Modifier = Modifier,\n    fontSizeParam: TextUnit = 40.sp\n) {\n    Text(\n        text = \"$name\",\n        modifier = modifier,\n        fontSize = fontSizeParam,\n        textAlign = TextAlign.Center\n    )\n}\n\n\/\/ === \ud504\ub9ac\ubdf0 \uc601\uc5ed \/ Preview Area===\n\/\/ @Composable \ud568\uc218\uc5d0\ub294 @Preview\ub97c \ub2ec \uc218 \uc788\ub2e4.\n\n@Preview(showBackground = true)\n@Composable\nfun GreetingWithDefaultParameter(name: String = \"Default Parameter\") {\n    Text(\n        text = \"Hello world!\"\n    )\n}\n\n@Preview(showBackground = true)\n@Composable\nfun GreetingWithNoParameter() {\n    Text(\n        text = \"Hello MyApp\"\n    )\n}\n\n@Preview(showBackground = true)\n@Composable\nfun GreetingPreview() {\n    JetPackExample1Theme {\n        Greeting(\"Android\")\n    }\n}\n\n<\/code><\/pre>\n\n\n\n
\uc2a4\ud06c\ub9b0 \uc0f7 \/ Screen Shot<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb JetpackCompose\ub294 \uae30\uc874\uc758 xml\ubc29\uc2dd\uacfc\ub294 \ub2e4\ub974\uac8c \ucf54\ud2c0\ub9b0 \ucf54\ub4dc\ub85c UI\ub514\uc790\uc778\uc744 \uad6c\uc131\ud569\ub2c8\ub2e4.JetpackCompose composes UI designs using Kotlin code, unlike the traditional XML method. \ud83d\udc49\ud83c\udffb @Compose \uc5b4\ub178\ud14c\uc774\uc158\uc774 \ubd99\uc5b4 \uc788\ub294 \ud568\uc218\ub97c \ucef4\ud3ec\uc988\ub77c\uace0 \ud569\ub2c8\ub2e4.A function annotated with @Compose is called a compose. \ud83d\udc49\ud83c\udffb \uc774 \ucef4\ud3ec\uc988\ub97c setContent {} \ub0b4\uc5d0\uc11c \uc2e4\ud589\ud569\ub2c8\ub2e4.Run this compose inside setContent {}. \ud83d\udc49\ud83c\udffb \uc544\ub798 \ucf54\ub4dc\ub294 \uae30\ubcf8 \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud55c \ucf54\ub4dc […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,1],"tags":[],"class_list":["post-2591","post","type-post","status-publish","format-standard","hentry","category-kotlin","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2591"}],"version-history":[{"count":10,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2591\/revisions"}],"predecessor-version":[{"id":2604,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2591\/revisions\/2604"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}