{"id":45593,"date":"2021-11-12T14:46:05","date_gmt":"2021-11-12T05:46:05","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45593"},"modified":"2021-11-12T16:31:13","modified_gmt":"2021-11-12T07:31:13","slug":"layouts-in-jetpack-compose-constraint-layout","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45593","title":{"rendered":"Layouts in Jetpack Compose &#8211; Constraint Layout"},"content":{"rendered":"\n<p>ConstraintLayout\uc740 \ucef4\ud3ec\uc800\ube14\uc744 \ub2e4\ub978 \ucef4\ud3ec\uc800\ube14\ub4e4\uc5d0 \uad00\ub828\uc9c0\uc5b4 \ud654\uba74\uc0c1\uc5d0 \ubc30\uce58 \ud560 \uc218 \uc788\uac8c \ud558\uace0, \uc5ec\ub7ec\uac1c\uc758 Row, Column \ubc0f Box\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc5d0 \ub300\ud55c \ub300\uc548\uc774 \ub41c\ub2e4. ConstraintLayout\uc740 \ub354 \ubcf5\uc7a1\ud55c \uc815\ub82c\uc774 \ud544\uc694\ud558\uac70\ub098, \ub354 \ud070 \ub808\uc774\uc544\uc6c3\ub4e4\uc744 \uad6c\ud604\ud560 \ub54c \uc720\uc6a9\ud558\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Note<\/strong>: View\uc2dc\uc2a4\ud15c\uc5d0\uc11c ConstraintLayout\uc740 flat\ud55c View\uacc4\uce35\uc744 \uac16\ub294\uac83\uc774 \uc131\ub2a5\uc0c1\uc73c\ub85c \ub354 \uc88b\uae30 \ub54c\ubb38\uc5d0, \ud06c\uace0 \ubcf5\uc7a1\ud55c \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4 \ub54c \ucd94\ucc9c\ud588\uc5c8\ub2e4. \ud558\uc9c0\ub9cc Compose\uc5d0\uc11c\ub294 \ud6a8\uc728\uc801\uc73c\ub85c \uae4a\uc740 \ub808\uc774\uc544\uc6c3 \uacc4\uce35\uc744 \ub2e4\ub8f0\uc218 \uc788\uae30 \ub54c\ubb38\uc5d0, \uc774\ub7f0 \ubd80\ubd84\uc774 \uac71\uc815\uac70\ub9ac\ub294 \uc544\ub2c8\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>\ucef4\ud3ec\uc988 Constraint Layout \uc758\uc874\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc774 build.gradle\uc5d0 \ucd94\uac00 \ud560 \uc218 \uc788\ub2e4. \ucd5c\uc2e0\ubc84\uc804\uc740 <a href=\"https:\/\/developer.android.com\/jetpack\/androidx\/releases\/constraintlayout?hl=ko\">\uacf5\uc2dd\ubb38\uc11c<\/a>\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ build.gradle\nimplementation \"androidx.constraintlayout:constraintlayout-compose:1.0.0-rc01\"<\/code><\/pre>\n\n\n\n<p>\ucef4\ud3ec\uc988\uc758 ConstraintLayout\ub294 <a href=\"https:\/\/kotlinlang.org\/docs\/reference\/type-safe-builders.html\">DSL<\/a>\ub85c \ub3d9\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<ul><li><em>createRefs()<\/em>(\ub610\ub294 <em>createRef()<\/em>)\uc744 \uc0ac\uc6a9\ud558\uc5ec \ucc38\uc870\ub97c \ud560 \uc218 \uc788\uace0 <em>ConstraintLayout<\/em>\ub0b4\uc5d0 \uc788\ub294 \uac01 \ucef4\ud3ec\uc800\ube14\uc740 \uc5f0\uad00\ub41c \ucc38\uc870\ub97c \uac16\ub294 \uac83\uc744 \ud544\uc694\ub85c \ud55c\ub2e4.<\/li><li>Constraint(\uc81c\uc57d\uc870\uac74)\ub294 <em>constrainAs<\/em>\ub77c\ub294 modifier\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc81c\uacf5\ub41c\ub2e4. \uc774\ub294 \ub9e4\uac1c\ubcc0\uc218\ub85c \ucc38\uc870\ub97c \ucde8\ud558\uace0, \ub78c\ub2e4\uc2dd\uc758 \ubab8\uccb4\uc5d0\uc11c \uc81c\uc57d\uc870\uac74\uc744 \uba85\uc2dc \ud558\ub3c4\ub85d \ud55c\ub2e4.<\/li><li>Constraints\ub294 <em>linkTo<\/em>\ub97c \uc0ac\uc6a9 \ub610\ub294 \ub2e4\ub978 \uc720\uc6a9\ud55c \uba54\uc11c\ub4dc\ub4e4\uc744 \uc0ac\uc6a9\ud558\uc5ec \uba85\uc2dc\ub41c\ub2e4.<\/li><li><em>parent<\/em>\ub294 ConstraintLayout \ucef4\ud3ec\uc800\ube14 \ucabd\uc73c\ub85c \uc81c\uc57d\uc870\uac74\uc744 \uba85\uc2dc\ud560 \ub54c \uc0ac\uc6a9\ub420 \uc218 \uc788\ub294 \uc774\ubbf8 \uc874\uc7ac\ud558\ub294 \ucc38\uc870 \ubc29\uc2dd\uc774\ub2e4.<\/li><\/ul>\n\n\n\n<p>\ub2e8\uc21c\ud55c \uc608\uc81c\uc640 \ud568\uaed8 \uc2dc\uc791\ud574\ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nfun ConstraintLayoutContent() {\n    ConstraintLayout {\n\n        \/\/ \ucef4\ud3ec\uc800\ube14\uc744 \ud1b5\uc81c\ud558\uae30 \uc704\ud574 \ucc38\uc870\ub4e4\uc744 \uc0dd\uc131\ud55c\ub2e4.\n        val (button, text) = createRefs()\n        Button(\n            onClick = { \/* Do something *\/ },\n            \/\/ \"button\" \ucc38\uc870\ub97c Button \ucef4\ud3ec\uc800\ube14\uc5d0 \ubc30\uc815\ud55c\ub2e4.\n            \/\/ \uadf8\ub9ac\uace0 ConstraintLayout\uc758 top\uc5d0 \uc81c\uc57d\uc870\uac74\uc744 \uc124\uc815\ud55c\ub2e4.\n            modifier = Modifier.constrainAs(button) {\n                top.linkTo(parent.top, margin = 16.dp)\n            }\n        ) {\n            Text(\"Button\")\n        }\n\n        \/\/ \"text\" \ucc38\uc870\ub97c Text \ucef4\ud3ec\uc800\ube14\uc5d0 \ubc30\uc815\ud55c\ub2e4.\n        \/\/ \uadf8\ub9ac\uace0 Button \ucef4\ud3ec\uc800\ube14 bottom\uc5d0 \uc81c\uc57d\uc870\uac74\uc744 \uc124\uc815\ud55c\ub2e4.\n        Text(\"Text\", Modifier.constrainAs(text) {\n            top.linkTo(button.bottom, margin = 16.dp)\n        })\n    }\n}\n\n@Preview\n@Composable\nfun ConstraintLayoutContentPreview() {\n\u00a0 \u00a0 LayoutsCodelabTheme {\n\u00a0 \u00a0 \u00a0 \u00a0 ConstraintLayoutContent()\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n<p>\uc704 \ucf54\ub4dc\ub294 <em>Button<\/em>\uc758 top \uc81c\uc57d\uc870\uac74\uc740 parent\uc5d0 \uc124\uc815\ud558\uace0, margin\uc744 <em>16.dp<\/em> \uc801\uc6a9\ud55c\ub2e4. \uadf8\ub9ac\uace0 <em>Text<\/em>\ub294 <em>Button<\/em>\uc758 bottom\ubd80\ubd84\uc5d0 \uc81c\uc57d\uc870\uac74\uc744 \uc124\uc815\ud558\uace0, margin\uc744 <em>16.dp<\/em> \uc124\uc815\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-72fcb81ab2c0483c.png\" alt=\"\" class=\"wp-image-45594\" width=\"323\" height=\"365\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-72fcb81ab2c0483c.png 431w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-72fcb81ab2c0483c-266x300.png 266w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/><\/figure>\n\n\n\n<p>\ub9cc\uc57d \ud14d\uc2a4\ud2b8\ub97c \uc218\ud3c9\uc801\uc73c\ub85c \uc911\uc2ec\uc5d0 \ub450\uae30\ub97c \uc6d0\ud55c\ub2e4\uba74, <em>centerHorizontallyTo<\/em> \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec <em>Text<\/em>\uc758 <em>start<\/em> \ubc0f <em>end<\/em>\ub97c parent\uc758 \uac00\uc7a5\uc790\ub9ac \ubd80\ubd84\uc5d0 \uc124\uc815\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nfun ConstraintLayoutContent() {\n\u00a0 \u00a0 ConstraintLayout {\n\u00a0 \u00a0 \u00a0 \u00a0 ... \/\/ Same as before\n\n\u00a0 \u00a0 \u00a0 \u00a0 Text(\"Text\", Modifier.constrainAs(text) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 top.linkTo(button.bottom, margin = 16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \ud14d\uc2a4\ud2b8\ub97c ConstraintLayout \uc911\uc559\uc5d0 \uc815\ub82c\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 centerHorizontallyTo(parent)\n\u00a0 \u00a0 \u00a0 \u00a0 })\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n<p>\ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-729a1b4c03f1f187.png\" alt=\"\" class=\"wp-image-45595\" width=\"323\" height=\"364\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-729a1b4c03f1f187.png 430w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-729a1b4c03f1f187-266x300.png 266w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/><\/figure>\n\n\n\n<p><em>ConstraintLayout<\/em>\uc758 \uc0ac\uc774\uc988\ub294 \ucee8\ud150\uce20\ub97c \uac10\uc300\ub9cc\ud07c \uac00\ub2a5\ud55c \uc791\uc740 \uc0ac\uc774\uc988\uac00 \ub41c\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 <em>Text<\/em>\uac00 parent \ub300\uc2e0 <em>Button<\/em>\uc758 \uc911\uc559\uc5d0 \uc788\ub294 \uac83\ucc98\ub7fc \ubcf4\uc778\ub2e4. \ub9cc\uc57d \ub2e4\ub978 \ud06c\uae30 \uc870\uc808\uc774 \ud544\uc694\ud55c \uacbd\uc6b0, \uc0ac\uc774\uc988\ub97c \uc870\uc808\ud560 \uc218 \uc788\ub294 modifiers(\uc608\ub97c\ub4e4\uba74 <em>fillMaxSize<\/em>, <em>size<\/em>)\ub97c Compose\uc758 \ub2e4\ub978 \ub808\uc774\uc544\uc6c3\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c <em>ConstraintLayout<\/em> \ucef4\ud3ec\uc800\ube14\uc5d0 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Helper<\/h2>\n\n\n\n<p>DSL\uc740 \ub610\ud55c guidline, barrier \ubc0f chain\uc744 \uc0dd\uc131\uc744 \uc9c0\uc6d0\ud55c\ub2e4. \uc608\uc2dc\ub97c \ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nfun ConstraintLayoutContent() {\n\u00a0 \u00a0 ConstraintLayout {\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ ConstraintLayout\ub0b4\uc5d0 3\uac00\uc9c0 \ucef4\ud3ec\uc800\ube14\ub4e4\uc744 \uc704\ud55c \ub808\ud37c\ub7f0\uc2a4\ub4e4\uc744 \uc0dd\uc131\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 val (button1, button2, text) = createRefs()\n\n\u00a0 \u00a0 \u00a0 \u00a0 Button(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onClick = { \/* Do something *\/ },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 modifier = Modifier.constrainAs(button1) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 top.linkTo(parent.top, margin = 16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 ) { \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Text(\"Button 1\") \n\u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 Text(\"Text\", Modifier.constrainAs(text) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 top.linkTo(button1.bottom, margin = 16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 centerAround(button1.end)\n\u00a0 \u00a0 \u00a0 \u00a0 })\n\n\u00a0 \u00a0 \u00a0 \u00a0<strong> val barrier = createEndBarrier(button1, text)<\/strong>\n\u00a0 \u00a0 \u00a0 \u00a0 Button(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onClick = { \/* Do something *\/ },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 modifier = Modifier.constrainAs(button2) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 top.linkTo(parent.top, margin = 16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 start.linkTo(<strong>barrier<\/strong>)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 ) { \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Text(\"Button 2\") \n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/code><\/pre>\n\n\n\n<p>button1 \ubc0f text \ucc38\uc870\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \ud558\uc5ec barrier\ub97c \uc0dd\uc131\ud588\ub2e4. \ubbf8\ub9ac\ubcf4\uae30\ub97c \ud1b5\ud574 \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-a4117576ef1768a2.png\" alt=\"\" class=\"wp-image-45596\" width=\"461\" height=\"212\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-a4117576ef1768a2.png 615w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-a4117576ef1768a2-300x138.png 300w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure>\n\n\n\n<ul><li>barrier(\ubc0f \ub2e4\ub978 \ubaa8\ub4e0 helper\ub4e4)\ub294 <em>ConstraintLayout<\/em> \ud568\uc218 \ubab8\uccb4\uc5d0\uc11c \uc0dd\uc131\ub420 \uc218 \uc788\ub2e4. \ud558\uc9c0\ub9cc <em>constrainAs<\/em>\ub294 \uc544\ub2c8\ub2e4.<\/li><li><em>linkTo<\/em>\ub294 guideline \ubc0f barrier\uc640 \ud568\uaed8 \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \ub808\uc774\uc544\uc6c3\uc758 \uac00\uc7a5\uc790\ub9ac \ubd80\ubd84\uc5d0 \uc81c\uc57d\uc870\uac74\uc744 \uc124\uc815\ud560 \uc218 \uc788\ub2e4.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Dimension \ucee4\uc2a4\ud140\ud558\uae30<\/h2>\n\n\n\n<p>\uae30\ubcf8\uc801\uc73c\ub85c <em>ConstraintLayout<\/em> \ud558\uc704 \uc694\uc18c\ub4e4\uc740 \uadf8\ub4e4\uc758 \ucee8\ud150\uce20 \uc0ac\uc774\uc988\ub97c \uac10\uc2f8\ub294\ub370 \ud544\uc694\ud55c \uc815\ub3c4\uc758 \uc0ac\uc774\uc988\ub97c \uc120\ud0dd\ud558\ub294 \uac83\uc744 \ud5c8\uc6a9\ud558\ub3c4\ub85d \ub418\uc5b4\uc788\ub2e4. \uc608\ub97c \ub4e4\uba74, \uc774\uac83\uc740 <em>Text<\/em>\uc758 \ub0b4\uc6a9\uc774 \ub108\ubb34 \uae38 \ub54c, \ud654\uba74 \uacbd\uacc4 \ubc16\uc73c\ub85c \ub098\uac08 \uc218 \uc788\uc74c\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable<br>fun LargeConstraintLayout() {<br>&nbsp; &nbsp; ConstraintLayout {<br>&nbsp; &nbsp; &nbsp; &nbsp; val text = createRef()<br><br>&nbsp; &nbsp; &nbsp; &nbsp; val guideline = createGuidelineFromStart(fraction = 0.5f)<br>&nbsp; &nbsp; &nbsp; &nbsp; Text(<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \"This is a very very very very very very very long text\",<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Modifier.constrainAs(text) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; linkTo(start = guideline, end = parent.end)<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; )<br>&nbsp; &nbsp; }<br>}<br><br>@Preview<br>@Composable<br>fun LargeConstraintLayoutPreview() {<br>&nbsp; &nbsp; LayoutsCodelabTheme {<br>&nbsp; &nbsp; &nbsp; &nbsp; LargeConstraintLayout()<br>&nbsp; &nbsp; }<br>}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"732\" height=\"50\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-616c19b971811cfa.png\" alt=\"\" class=\"wp-image-45597\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-616c19b971811cfa.png 732w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-616c19b971811cfa-300x20.png 300w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><\/figure>\n\n\n\n<p>\ubd84\uba85\ud788 \uc0ac\uc6a9\uac00\ub2a5\ud55c \uacf5\uac04\ub0b4\uc5d0\uc11c \ud14d\uc2a4\ud2b8\ub97c \uac1c\ud589\ud558\uace0 \uc2f6\uc744 \uac83\uc774\ub2e4. \uc774\ub97c \uc704\ud574\uc11c\ub294 text\uc758 width \ub3d9\uc791\uc744 \ubcc0\uacbd\ud574\uc57c \ud55c\ub2e4. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable<br>fun LargeConstraintLayout() {<br>&nbsp; &nbsp; ConstraintLayout {<br>&nbsp; &nbsp; &nbsp; &nbsp; val text = createRef()<br><br>&nbsp; &nbsp; &nbsp; &nbsp; val guideline = createGuidelineFromStart(0.5f)<br>&nbsp; &nbsp; &nbsp; &nbsp; Text(<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \"This is a very very very very very very very long text\",<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Modifier.constrainAs(text) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; linkTo(guideline, parent.end)<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = Dimension.preferredWrapContent<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; )<br>&nbsp; &nbsp; }<br>}<\/code><\/pre>\n\n\n\n<p>\ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"734\" height=\"83\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-fc41cacd547bbea.png\" alt=\"\" class=\"wp-image-45598\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-fc41cacd547bbea.png 734w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-fc41cacd547bbea-300x34.png 300w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/figure>\n\n\n\n<p>\uc0ac\uc6a9 \uac00\ub2a5\ud55c <em>Dimension<\/em> \ub3d9\uc791\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<ul><li><em>wrapContent<\/em> &#8211; \ucee8\ud150\uce20\ub97c \uac10\uc2f8\uba74\uc11c \ub3d9\uc801\uc73c\ub85c \uc0ac\uc774\uc988\ub97c \ubcc0\ud654\uc2dc\ud0a8\ub2e4. \uc2ec\uc9c0\uc5b4 \uc8fc\uc5b4\uc9c4 \uc81c\uc57d \uc870\uac74\uc744 \uc704\ubc18\ud558\uba74\uc11c \uc0ac\uc774\uc988\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\ub2e4.(\ud654\uba74\ubc16\uc73c\ub85c \ubc97\uc5b4\ub0a0 \uc218 \uc788\uc74c)<\/li><li><em>preferredWrapContent<\/em> &#8211; \uae30\ubcf8\uc801\uc73c\ub85c wrapContent\uc640 \uac19\uc9c0\ub9cc, \uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\ub0b4\uc5d0\uc11c \ucee8\ud150\uce20\ub97c \uac10\uc2fc\ub2e4. (\ud654\uba74 \ubc16\uc744 \ubc97\uc5b4\ub098\uc9c0 \uc54a\uc74c)<\/li><li><em>fillToConstraints<\/em> &#8211; \ub808\uc774\uc544\uc6c3\uc744 \ud655\uc7a5\uc2dc\ucf1c \ud574\ub2f9 dimension\uc758 \uc81c\uc57d\uc870\uac74\uc5d0 \uc758\ud574 \uaddc\uc815\ub41c \uacf5\uac04\uc744 \ucc44\uc6b4\ub2e4.<\/li><li><em>value <\/em>-\uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\uc774 \uc788\uc74c\uc5d0\ub3c4 \ub808\uc774\uc544\uc6c3\uc740 \uace0\uc815\ub41c dp \uac12\uc744 \uac16\ub294\ub2e4. (\ud654\uba74 \ubc16\uc744 \ubc97\uc5b4\ub0a0 \uc218 \uc788\uc74c)<\/li><li><em>preferredValue<\/em> &#8211; \uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\uc744 \uc798 \uc9c0\ud0a4\uba70, \uace0\uc815\ub41c dp\uac12\uc744 \uac16\ub294\ub2e4. (\ud654\uba74 \ubc16\uc744 \ubc97\uc5b4\ub098\uc9c0 \uc54a\uc74c)<\/li><\/ul>\n\n\n\n<p>\ub610\ud55c \uc5b4\ub5a4 <em>Dimension<\/em>\ub4e4\uc740 \uac15\uc81c\ub420 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>width = Dimension.preferredWrapContent.atLeast(100.dp)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Decoupled API<\/h2>\n\n\n\n<p>\uc9c0\uae08\uae4c\uc9c4 \uc608\uc81c\uc5d0\uc11c \uc81c\uc57d\uc870\uac74\ub4e4\uc740 \ucef4\ud3ec\uc800\ube14\ub0b4\uc5d0 \uc801\uc6a9\ub41c modifier\uc640 \ud568\uaed8 inline\uc73c\ub85c \uba85\uc2dc\ub418\uc5b4\uc838 \uc654\ub2e4. \ud558\uc9c0\ub9cc \ub808\uc774\uc544\uc6c3\uc5d0 \uc801\uc6a9\ub41c \uc81c\uc57d\uc870\uac74\ub4e4\uc744 \ubd84\ub9ac\uc2dc\ud0ac \ub54c \uba87\uac00\uc9c0 \uc4f8\ub9cc\ud55c \ub0b4\uc6a9\ub4e4\uc774 \uc788\ub2e4. \uc77c\ubc18\uc801\uc778 \uc608\ub294 \ud654\uba74 \uad6c\uc131\uc744 \uae30\ubc18\uc73c\ub85c \uc81c\uc57d \uc870\uac74\uc744 \uc27d\uac8c \ubcc0\uacbd\ud558\uac70\ub098, 2\uac1c\uc758 \uc81c\uc57d \uc870\uac74 \uc138\ud2b8 \uac04\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub7ec\ud55c \uacbd\uc6b0\uc5d0 <em>ConstraintLayout<\/em>\uc744 \ub2e4\ub978 \ubc29\ubc95\uc73c\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<ol><li><em>ConstraintSet<\/em>\uc744 \ub9e4\uac1c\ubcc0\uc218\ub85c <em>ConstraintLayout<\/em>\uc5d0 \uc804\ub2ec\ud55c\ub2e4.<\/li><li><em>ConstraintSet<\/em>\uc5d0\uc11c Modifier\uc758 <em>layoutId<\/em>\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0dd\uc131\ub41c \ucc38\uc870\ub97c \ucef4\ud3ec\uc800\ube14\uc5d0 \ubc30\uc815\ud55c\ub2e4.<\/li><\/ol>\n\n\n\n<p>\uc704\uc758 \uccab \ubc88\uc9f8 ConstraintLayout \uc608\uc81c\uc5d0 \uc801\uc6a9\ub41c \uc774 API \ubaa8\uc591\uc740 \ud654\uba74 \ub108\ube44\uc5d0 \ucd5c\uc801\ud654\ub418\uc5b4 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nfun DecoupledConstraintLayout() {\n\u00a0 \u00a0 BoxWithConstraints {\n\u00a0 \u00a0 \u00a0 \u00a0 val <strong>constraints<\/strong> = if (maxWidth &lt; maxHeight) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <strong>decoupledConstraints<\/strong>(margin = 16.dp) \/\/ Portrait constraints\n\u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <strong>decoupledConstraints<\/strong>(margin = 32.dp) \/\/ Landscape constraints\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 ConstraintLayout(<strong>constraints<\/strong>) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Button(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 onClick = { \/* Do something *\/ },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 modifier = Modifier.layoutId(\"<strong>button<\/strong>\")\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Text(\"Button\")\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Text(\"Text\", Modifier.layoutId(\"<strong>text<\/strong>\"))\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n}\n\nprivate fun <strong>decoupledConstraints<\/strong>(margin: Dp): ConstraintSet {\n\u00a0 \u00a0 return ConstraintSet {\n\u00a0 \u00a0 \u00a0 \u00a0 val button = createRefFor(\"<strong>button<\/strong>\")\n\u00a0 \u00a0 \u00a0 \u00a0 val text = createRefFor(\"<strong>text<\/strong>\")\n\n\u00a0 \u00a0 \u00a0 \u00a0 constrain(button) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 top.linkTo(parent.top, margin= margin)\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 constrain(text) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 top.linkTo(button.bottom, margin)\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n<p>\ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"564\" height=\"600\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-screenshot-1.png\" alt=\"\" class=\"wp-image-45599\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-screenshot-1.png 564w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-layouts-in-jetpack-compose-constraint-layout-screenshot-1-282x300.png 282w\" sizes=\"(max-width: 564px) 100vw, 564px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Note<\/strong>: <em>Modifier.layoutId<\/em> \ud568\uc218\ub294 tag\uac00 \uc5c6\ub294 id\ub9cc \ub2e8\uc77c \ub9e4\uac1c\ubcc0\uc218\ub85c \uac16\ub294 \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>ConstraintLayout\uc740 \ucef4\ud3ec\uc800\ube14\uc744 \ub2e4\ub978 \ucef4\ud3ec\uc800\ube14\ub4e4\uc5d0 \uad00\ub828\uc9c0\uc5b4 \ud654\uba74\uc0c1\uc5d0 \ubc30\uce58 \ud560 \uc218 \uc788\uac8c \ud558\uace0, \uc5ec\ub7ec\uac1c\uc758 Row, Column \ubc0f Box\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc5d0 \ub300\ud55c \ub300\uc548\uc774 \ub41c\ub2e4. ConstraintLayout\uc740 \ub354 \ubcf5\uc7a1\ud55c \uc815\ub82c\uc774 \ud544\uc694\ud558\uac70\ub098, \ub354 \ud070 \ub808\uc774\uc544\uc6c3\ub4e4\uc744 \uad6c\ud604\ud560 \ub54c \uc720\uc6a9\ud558\ub2e4. Note: View\uc2dc\uc2a4\ud15c\uc5d0\uc11c ConstraintLayout\uc740 flat\ud55c View\uacc4\uce35\uc744 \uac16\ub294\uac83\uc774 \uc131\ub2a5\uc0c1\uc73c\ub85c \ub354 \uc88b\uae30 \ub54c\ubb38\uc5d0, \ud06c\uace0 \ubcf5\uc7a1\ud55c \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4 \ub54c \ucd94\ucc9c\ud588\uc5c8\ub2e4. \ud558\uc9c0\ub9cc Compose\uc5d0\uc11c\ub294 [&hellip;]<\/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\/45593"}],"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=45593"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45593\/revisions"}],"predecessor-version":[{"id":45600,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45593\/revisions\/45600"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}