{"id":45551,"date":"2021-11-09T02:50:25","date_gmt":"2021-11-08T17:50:25","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45551"},"modified":"2021-11-12T16:31:29","modified_gmt":"2021-11-12T07:31:29","slug":"layouts-in-jetpack-compose-%eb%aa%a9%eb%a1%9d-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45551","title":{"rendered":"Layouts in Jetpack Compose – \ubaa9\ub85d \ub9cc\ub4e4\uae30"},"content":{"rendered":"\n

\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc544\uc774\ud15c \ubaa9\ub85d\uc744 \ud45c\ud604\ud558\ub294 \uac83\uc740 \uc77c\ubc18\uc801\uc778 \ud328\ud134\uc774\ub2e4. Jetpack Compose\ub294 \uc774 \ud328\ud134\uc744 Row\uc640 Column\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc880 \ub354 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc900\ub2e4. \ub610\ud55c \ud604\uc7ac \ubcf4\uc5ec\uc9c0\ub294 \uc544\uc774\ud15c\ub4e4\uc5d0 \ub300\ud574\uc11c\ub9cc \uc870\ud569\ud558\uace0 \uc804\uac1c\ud558\ub3c4\ub85d \ud558\ub294 lazy \ubaa9\ub85d\ub3c4 \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\n

Column \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uc5ec 100\uac1c\uc758 \uc544\uc774\ud15c\uc744 \uac16\ub294 \uc218\uc9c1\ud615 \ubaa9\ub85d\uc744 \uc0dd\uc131\ud574\ubcf4\uc790.<\/p>\n\n\n\n

@Composable
fun SimpleList() {
    Column {
        repeat(100) {
            Text(\"Item #$it\")
        }
    }
}<\/code><\/pre>\n\n\n\n
Column\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc2a4\ud06c\ub864\uc740 \ub2e4\ub8e8\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0, \uba87\uba87 \uc544\uc774\ud15c\uc740 \ud654\uba74 \ubc16\uc744 \ubc97\uc5b4\ub098 \ubcf4\uc774\uc9c0 \uc54a\uac8c\ub41c\ub2e4. Modifier\uc5d0 verticalScroll\uc744 \ucd94\uac00\ud558\uc5ec Column\ub0b4\uc5d0\uc11c \uc2a4\ud06c\ub864\uc744 \ud65c\uc131\ud654 \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Lazy \ubaa9\ub85d<\/h2>\n\n\n\n
Column\uc740 \ubaa8\ub4e0 \uc544\uc774\ud15c\ub4e4\uc744 \ub80c\ub354\ub9c1 \ud55c\ub2e4. \uc2ec\uc9c0\uc5b4 \ud654\uba74\uc5d0\ub098\uc624\uc9c0 \uc54a\ub294 \uc544\uc774\ud15c\uae4c\uc9c0 \ub80c\ub354\ub9c1 \ud558\ub824\uace0 \ud55c\ub2e4. \uc774\ub7f0 \uc810 \ub54c\ubb38\uc5d0 \uc131\ub2a5 \uc774\uc288\uac00 \ubc1c\uc0dd\ud558\uace0, \ubaa9\ub85d\uc758 \uc0ac\uc774\uc988\uac00 \ucee4\uc9c0\uba74 \ucee4\uc9c8\uc218\ub85d \ub354\uc6b1 \ubb38\uc81c\uac00 \ub41c\ub2e4. \uc774\ub7f0 \ubb38\uc81c\ub97c \ud68c\ud53c\ud558\uae30 \uc704\ud574, LazyColumn\uc744 \uc0ac\uc6a9\ud55c\ub2e4. LazyColumn\uc740 \ud654\uba74\uc5d0 \ubcf4\uc774\ub294 \uc544\uc774\ud15c\ub9cc \ub80c\ub354\ub9c1\ud55c\ub2e4. \uc774\ub294 \uc131\ub2a5\uc744 \uc99d\ub300\uc2dc\ud0a4\uace0, Modifier\uc758 scroll\ud56d\ubaa9\uc744 \uc0ac\uc6a9\ud560 \ud544\uc694\uac00 \uc5c6\uc5b4\uc9c4\ub2e4.<\/p>\n\n\n\n
Note<\/strong> : Jetpack\uc5d0 \ud3ec\ud568\ub41c LazyColumn\uc740 \uc548\ub4dc\ub85c\uc774\ub4dc View\uc758 RecyclerView\uc640 \ub3d9\ub4f1\ud558\ub2e4.<\/p><\/blockquote>\n\n\n\n
LazyColumn\uc740 DSL\uc744 \uc81c\uacf5\ud558\ub294\ub370, \uc774\ub97c \ud1b5\ud574 \ubaa9\ub85d \ub0b4\uc6a9\uc744 \ubb18\uc0ac\ud55c\ub2e4. \ubaa9\ub85d\uc758 \uc0ac\uc774\uc988\ub97c \ucde8\ud558\ub294 items\ub77c\ub294 \uac83\uc744 \uc0ac\uc6a9\ud560 \uac83\uc778\ub370, \uc774\ub294 \ubc30\uc5f4 \ub610\ub294 \ub9ac\uc2a4\ud2b8\ub97c \uc9c0\uc6d0\ud55c\ub2e4. \ub354 \ub9ce\uc740 \uc815\ubcf4\ub294 \ubaa9\ub85d \ubb38\uc11c<\/a>\uc5d0\uc11c \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n
@Composable\nfun LazyList() {\n\u00a0 \u00a0 \/\/ \uc2a4\ud06c\ub864 \uc704\uce58\ub97c \uc800\uc7a5\ud55c\ub2e4. \uc774 state\ub294 \ub610\ud55c \uc2a4\ud06c\ub864\uc744 \uc774\ub3d9\ud560 \ub54c\ub3c4 \uc0ac\uc6a9\ub41c\ub2e4.\n\u00a0 \u00a0 val scrollState = rememberLazyListState()\n\n\u00a0 \u00a0 LazyColumn<\/strong>(state = scrollState) {\n\u00a0 \u00a0 \u00a0 \u00a0 items<\/strong>(100) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Text(\"Item #$it\")\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc774\ubbf8\uc9c0 \ubcf4\uc5ec\uc8fc\uae30<\/h2>\n\n\n\n
\uc55e\uc11c PhotographCard, Image\ub97c \ud1b5\ud574 Bitmap\uc744 \ub610\ub294 \ubca1\ud130 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub098\ud0c0\ub0b4\ub294 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub77c\ub294 \uac83\uc744 \uc54c\uc544\ubcf4\uc558\ub2e4. \ub9cc\uc57d \uc774\ubbf8\uc9c0\ub97c \uc6d0\uaca9\uc73c\ub85c\ubd80\ud130 \uac00\uc838\uc624\uba74, \ub2e4\uc74c\uc758 \ub2e8\uacc4\ub4e4\uc744 \ud1b5\ud574 \ucc98\ub9ac\uac00 \ub41c\ub2e4. \uc560\uc14b\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud55c \ub4a4 \ube44\ud2b8\ub9f5\uc73c\ub85c \ub514\ucf54\ub529\uc744 \ud558\uace0, Image\ub85c \ub9c8\uce68\ub0b4 \ucd5c\uc885 \ub80c\ub354\ub9c1 \ud55c\ub2e4.<\/p>\n\n\n\n
\uc774\ub7ec\ud55c \ub2e8\uacc4\ub4e4\uc744 \uac04\ub2e8\ud788 \ud558\uae30 \uc704\ud574, \uc774\ub7ec\ud55c \uc791\uc5c5\ub4e4\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \uc218\ud589\ud558\ub294 \ucef4\ud3ec\uc800\ube14\uc744 \uc81c\uacf5\ud558\ub294 Coil \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
Note:<\/strong>\u00a0\uc5ec\uae30 \uc544\ub798\uc5d0\uc11c \ub098\uc624\ub294 \uc0d8\ud50c \ucf54\ub4dc\ub294 Coil<\/a>\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \ud558\uc9c0\ub9cc Appcompanist(v0.14.0)<\/a>\uc5d0\uc11c Coil\uacfc Glide\ub294 deprecated \ub418\uc5c8\uace0, \ub9c8\uce68\ub0b4 Appcompanist(v0.16.0)<\/a>\uc5d0\uc11c \uc774 \ub458\uc774 \uc81c\uac70 \ub418\uc5c8\ub2e4. \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 \ucf54\ud2c0\ub9b0 \uc2ac\ub799\ucc44\ub110 \uc544\uce74\uc774\ube0c<\/a>\ub97c \ud655\uc778\ud558\uc790. \ud604\uc7ac\ub294 Coil Compose<\/a>\ub85c \uc774\uc8fc \ud558\ub294 \uac83\uc744 \ucd94\ucc9c\ud558\uace0 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
\ud504\ub85c\uc81d\ud2b8 \ub0b4 build.gradle \ud30c\uc77c\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc774 Coil \uc758\uc874\uc131\uc744 \ucd94\uac00 \ud55c\ub2e4.<\/p>\n\n\n\n
\/\/ \ucd5c\uc2e0\ubc84\uc804<\/a>\uc744 \ud655\uc778\ud558\uc790.\nimplementation(\"io.coil-kt:coil-compose:1.4.0\")\n<\/code><\/pre>\n\n\n\n
\uc6d0\uaca9 \uc774\ubbf8\uc9c0\ub97c \uac00\uc838\uc640\uc57c \ud558\ubbc0\ub85c, INTERNET \uad8c\ud55c\uc744 \uba54\ub2c8\ud398\uc2a4\ud2b8 \ud30c\uc77c\uc5d0 \ucd94\uac00\ud558\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
<!-- AndroidManifest.xml -->
<uses-permission android:name=\"android.permission.INTERNET\" \/><\/code><\/pre>\n\n\n\n
\uc774\uc81c \ud56d\ubaa9\uc744 \ucef4\ud3ec\uc800\ube14\ub85c \ub9cc\ub4e4\uc5b4 \uc544\uc774\ud15c index\uc640 \ud568\uaed8 \uc774\ubbf8\uc9c0\ub97c \ub098\ud0c0\ub0b4\ubcf4\uc790<\/p>\n\n\n\n
@Composable
fun ImageListItem(index: Int) {
    Row(verticalAlignment = Alignment.CenterVertically) {

        Image(
            painter = rememberImagePainter(
                data = \"https:\/\/developer.android.com\/images\/brand\/Android_Robot.png\"
            ),
            contentDescription = \"Android Logo\",
            modifier = Modifier.size(50.dp)
        )
        Spacer(Modifier.width(10.dp))
        Text(\"Item #$index\", style = MaterialTheme.typography.subtitle1)
    }
}<\/code><\/pre>\n\n\n\n
\ub2e4\uc74c\uc740 Text \ucef4\ud3ec\uc800\ube14\uc744 ImageListItem\uacfc \ubc14\uafd4\ubcf4\uc790.<\/p>\n\n\n\n
@Composable\nfun ImageList() {\n\u00a0 \u00a0 \/\/ \uc2a4\ud06c\ub864 \ud3ec\uc9c0\uc158\uc744 \uc800\uc7a5\ud558\ub294 state\n\u00a0 \u00a0 val scrollState = rememberLazyListState()\n\n\u00a0 \u00a0 LazyColumn(state = scrollState) {\n\u00a0 \u00a0 \u00a0 \u00a0 items(100) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ImageListItem(it)\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ubaa9\ub85d \uc2a4\ud06c\ub864\ud558\uae30<\/h2>\n\n\n\n
\uc774\uc81c \uc218\ub3d9\uc73c\ub85c \ubaa9\ub85d \uc2a4\ud06c\ub864 \ud3ec\uc9c0\uc158\uc744 \uc81c\uc5b4\ud574\ubcf4\uc790. \ubc84\ud2bc \ub450\uac1c\ub97c \ucd94\uac00\ud558\uc5ec \ubaa9\ub85d \uc704, \uc544\ub798\ub85c \ubd80\ub4dc\ub7fd\uac8c \uc2a4\ud06c\ub864 \ud560 \uc218 \uc788\uac8c \ud55c\ub2e4. \uc2a4\ud06c\ub864 \ud558\ub294 \ub3d9\uc548\uc5d0 \ubaa9\ub85d \ub80c\ub354\ub9c1\uc774 \ube14\ub77d\ud0b9 \ub418\ub294 \uac83\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud574, \uc2a4\ud06c\ub864 API\ub294 suspend \ud568\uc218\ub85c \ub418\uc5b4 \uc788\ub2e4. \uadf8\ub7ec\ubbc0\ub85c \uc774 API\ub97c \ud638\ucd9c\ud560 \ub54c\ub294 \ucf54\ub8e8\ud2f4 \ub0b4\uc5d0\uc11c \ud638\ucd9c\ud574\uc57c\ud55c\ub2e4. \uadf8\ub7ec\uae30 \uc704\ud574\uc11c rememberCoroutineScope\ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec CoroutineScope\ub97c \uc0dd\uc131\ud558\uace0, \ubc84\ud2bc \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub85c\ubd80\ud130 \ucf54\ub8e8\ud2f4\uc744 \uc0dd\uc131\ud55c\ub2e4. \uc774 CoroutineScope\ub294 \ud638\ucd9c\ud558\ub294 \uacf3\uc758 \uc0dd\uba85\uc8fc\uae30\ub97c \ub530\ub978\ub2e4. \ucef4\ud3ec\uc800\ube14 \uc218\uba85\uc8fc\uae30\uc5d0 \uad00\ud55c \ub354 \ub9ce\uc740 \ub0b4\uc6a9\uacfc \ubd80\uc791\uc6a9\uc740 \ucef4\ud3ec\uc800\ube14 \uc218\uba85\uc8fc\uae30 \ubb38\uc11c<\/a>\ub97c \ud655\uc778\ud558\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
val listSize = 100\n\/\/ \uc2a4\ud06c\ub864 \ud3ec\uc9c0\uc158\uc744 state\ub85c \uc800\uc7a5\nval scrollState = rememberLazyListState()\n\/\/ \uc2a4\ud06c\ub864 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2e4\ud589\ub420 \ucf54\ub8e8\ud2f4 \uc2a4\ucf54\ud504\ub97c \uc800\uc7a5\ud55c\ub2e4.\nval coroutineScope = rememberCoroutineScope()<\/code><\/pre>\n\n\n\n
\ucd5c\uc885\uc801\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uc81c\uc5b4\ud558\uae30 \uc704\ud55c \ub450\uac1c\uc758 \ubc84\ud2bc\uc744 \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc774\ubc88 \uc139\uc158 \ucd5c\uc885 \ucf54\ub4dc<\/h2>\n\n\n\n
@Composable
fun ImageListItem(index: Int) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = rememberImagePainter(
                data = \"https:\/\/developer.android.com\/images\/brand\/Android_Robot.png\"
            ),
            contentDescription = \"Android Logo\",
            modifier = Modifier.size(50.dp)
        )
        Spacer(Modifier.width(10.dp))
        Text(\"Item #$index\", style = MaterialTheme.typography.subtitle1)
    }
}

@Composable
fun ScrollingList() {
    val listSize = 100
    \/\/ We save the scrolling position with this state
    val scrollState = rememberLazyListState()
    \/\/ We save the coroutine scope where our animated scroll will be executed
    val coroutineScope = rememberCoroutineScope()

    Column {
        Row {
            Button(onClick = {
                coroutineScope.launch {
                    \/\/ 0 is the first item index
                    scrollState.animateScrollToItem(0)
                }
            }) {
                Text(\"Scroll to the top\")
            }

            Button(onClick = {
                coroutineScope.launch {
                    \/\/ listSize - 1 is the last index of the list
                    scrollState.animateScrollToItem(listSize - 1)
                }
            }) {
                Text(\"Scroll to the end\")
            }
        }

        LazyColumn(state = scrollState) {
            items(listSize) {
                ImageListItem(it)
            }
        }
    }
}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc544\uc774\ud15c \ubaa9\ub85d\uc744 \ud45c\ud604\ud558\ub294 \uac83\uc740 \uc77c\ubc18\uc801\uc778 \ud328\ud134\uc774\ub2e4. Jetpack Compose\ub294 \uc774 \ud328\ud134\uc744 Row\uc640 Column\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc880 \ub354 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc900\ub2e4. \ub610\ud55c \ud604\uc7ac \ubcf4\uc5ec\uc9c0\ub294 \uc544\uc774\ud15c\ub4e4\uc5d0 \ub300\ud574\uc11c\ub9cc \uc870\ud569\ud558\uace0 \uc804\uac1c\ud558\ub3c4\ub85d \ud558\ub294 lazy \ubaa9\ub85d\ub3c4 \uc81c\uacf5\ud55c\ub2e4. Column \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uc5ec 100\uac1c\uc758 \uc544\uc774\ud15c\uc744 \uac16\ub294 \uc218\uc9c1\ud615 \ubaa9\ub85d\uc744 \uc0dd\uc131\ud574\ubcf4\uc790. Column\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc2a4\ud06c\ub864\uc740 \ub2e4\ub8e8\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0, \uba87\uba87 \uc544\uc774\ud15c\uc740 \ud654\uba74 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45551"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45551"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45551\/revisions"}],"predecessor-version":[{"id":45558,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45551\/revisions\/45558"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}