{"id":45559,"date":"2021-11-09T03:04:58","date_gmt":"2021-11-08T18:04:58","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45559"},"modified":"2021-11-12T16:31:25","modified_gmt":"2021-11-12T07:31:25","slug":"layouts-in-jetpack-compose-%ec%bb%a4%ec%8a%a4%ed%85%80-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45559","title":{"rendered":"Layouts in Jetpack Compose – \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30"},"content":{"rendered":"\n

\ucef4\ud3ec\uc988\ub294 Column, Row \ub610\ub294 Box\uc640 \uac19\uc740 \uae30\ubcf8 \uc81c\uacf5\ud558\ub294 \ucef4\ud3ec\uc800\ube14\ub4e4\uc744 \ud1b5\ud574 \uc791\uc740 \ub2e8\uc704\uc758 \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc73c\ub85c \ub9cc\ub4e4\uc5b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc77c \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n

\ud558\uc9c0\ub9cc, \uc218\ub3d9\uc73c\ub85c \ud558\uc704 \ucef4\ud3ec\uc800\ube14\uc758 \uc0ac\uc774\uc988\ub97c \uce21\uc815\ud558\uace0 \ubc30\uce58\ud574\uc57c \ud558\ub294 \uac83\ucc98\ub7fc, \ubb34\uc5b8\uac00 \uc571\uc5d0\uc11c \ud2b9\ubcc4\ud55c \uac83\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud560 \ub54c\uac00 \uc788\ub2e4.<\/p>\n\n\n\n

Note<\/strong> : View \uc2dc\uc2a4\ud15c\uc5d0\uc11c \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4dc\ub824\uba74, ViewGroup\uc744 \ud655\uc7a5\ud558\uace0 onMeasure \ubc0f onLayout\uacfc \uac19\uc740 \uba54\uc11c\ub4dc\ub4e4\uc744 \uad6c\ud604\ud574\uc57c \ud55c\ub2e4. \ucef4\ud3ec\uc988\uc5d0\uc11c\ub294 \ub2e8\uc21c\ud788 Layout \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uace0 \ud55c\uac00\uc9c0 \ud568\uc218\ub97c \uc791\uc131\ud558\uba74 \ub41c\ub2e4.<\/p><\/blockquote>\n\n\n\n

\ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc744 \uc5b4\ub5bb\uac8c \uc0dd\uc131\ud558\ub294\uc9c0 \uc0b4\ud3b4\ubcf4\uae30 \uc804, \ucef4\ud3ec\uc988 \ub808\uc774\uc544\uc6c3 \uc6d0\uce59\uc5d0 \ub300\ud574 \uc880\ub354 \uc54c \ud544\uc694\uac00 \uc788\ub2e4.<\/p>\n\n\n\n

\ucef4\ud3ec\uc988 \ub808\uc774\uc544\uc6c3 \uc6d0\uce59<\/h2>\n\n\n\n

\uba87\uba87 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub294 UI\ud2b8\ub9ac\uc5d0 \ucd94\uac00 \ud558\ub294 \uba85\ub839\uc774 \ud638\ucd9c\ub420 \ub54c \uc774\ub97c \ud654\uba74\uc0c1\uc5d0 \ub80c\ub354\ub9c1 \ud558\uae30 \uc704\ud574 UI\uc870\uac01\uc744 \ubc1c\ud589\ud55c\ub2e4. \uac01 \ubc1c\ud589(\ub610\ub294 \uc694\uc18c)\ub294 \ud558\ub098\uc758 \uc0c1\uc704 \uc694\uc18c\uc640 \uc7a0\uc7ac\uc801\uc73c\ub85c \ub9ce\uc740 \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uac16\ub294\ub2e4. \ub610\ud55c, \uc0c1\uc704 \ucef4\ud3ec\uc800\ube14\ub0b4\uc5d0\uc11c (x,y) \uac19\uc740 \ud3ec\uc9c0\uc158 \ubc0f width, height \uac19\uc740 \uc0ac\uc774\uc988\ub97c \uac16\ub294\ub2e4.<\/p>\n\n\n\n

\uac01 UI\uc694\uc18c\ub4e4\uc740 \uc81c\uc57d\uc870\uac74\uc744 \ucda9\uc871\ud558\ub294 \uc0ac\uc774\uc988\ub97c \uce21\uc815\ud55c\ub2e4. \uc81c\uc57d\uc870\uac74\ub4e4\uc740 \uac01 UI\uc694\uc18c\uc758 width \ubc0f height \uc5d0 \ub300\ud55c \ucd5c\uc18c\uce58\uc640 \ucd5c\ub300\uce58\ub97c \uc81c\ud55c\ud55c\ub2e4. \ub9cc\uc57d \uac01 UI\uc694\uc18c\uac00 \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uac16\ub294\ub2e4\uba74, \uc790\uae30 \uc790\uc2e0\uc758 \uc0ac\uc774\uc988\ub97c \uacb0\uc815\ud558\uae30 \uc704\ud574 \uac01 \ud558\uc704 \uc694\uc18c\uc5d0 \ub300\ud55c \uce21\uc815\ub3c4 \ud574\uc57c\ud560 \uc218 \uc788\ub2e4. \uc77c\ub2e8 \uc0ac\uc774\uc988\uac00 \uacb0\uc815\ub418\uace0 \ub098\uba74, \uc790\uc2e0\uc744 \uae30\uc900\uc73c\ub85c \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \ubc30\uce58\ud560 \uc218 \uc788\uac8c \ub41c\ub2e4. \uc774 \ubd80\ubd84\uc740 \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4 \ub54c \ub354 \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n

Compose UI\ub294 \ub2e4\uc911 \ud328\uc2a4 \uce21\uc815\uc744 \ud5c8\uc6a9\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/strong> \uc774\ub294 \ub808\uc774\uc544\uc6c3 \uc694\uc18c\uac00 \ub2e4\ub978 \uce21\uc815 \uad6c\uc131\uc744 \uc2dc\ub3c4\ud558\uae30 \uc704\ud574 \ud558\uc704 \uc694\uc18c\ub97c \ub450 \ubc88 \uc774\uc0c1 \uce21\uc815\ud558\uc9c0 \uc54a\uc74c\uc744 \uc758\ubbf8 \ud55c\ub2e4. \ub2e8\uc77c \ud328\uc2a4 \uce21\uc815\uc740 \uc131\ub2a5\uc5d0 \uc88b\uace0, \ucef4\ud3ec\uc988\uac00 \ud6a8\uacfc\uc801\uc73c\ub85c \uae4a\uc740 UI \ud2b8\ub9ac\ub97c \ucc98\ub9ac\ud560 \uc218 \uc788\uac8c \ud55c\ub2e4. \ub9cc\uc57d \ub808\uc774\uc544\uc6c3 \uc694\uc18c\uac00 \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \ub450\ubc88 \uce21\uc815\ud558\uace0, \uadf8 \ud558\uc704 \uc694\uc18c\uc758 \ud558\uc704 \uc694\uc18c\ub97c \ub610 \ub450\ubc88 \uce21\uc815\ud558\uace0, \uacc4\uc18d \uadf8\ub7ec\ub2e4\ubcf4\uba74 \uc804\uccb4 UI\ub97c \uc804\uac1c\ud558\uae30 \uc704\ud55c \ub2e8\uc77c \uc2dc\ub3c4\ub294 \ub9ce\uc740 \uc791\uc5c5\uc744 \uc218\ud589\ud574\uc57c \ud558\uae30 \ub54c\ubb38\uc5d0 \uc571 \uc131\ub2a5\uc744 \uacc4\uc18d \uc720\uc9c0\ud558\uae30\uac00 \uc5b4\ub835\ub2e4. \uadf8\ub7ec\ub098 \ub54c\ub85c\ub294 \ub2e8\uc77c \ud558\uc704 \uc694\uc18c \uce21\uc815\uc774 \uc54c\ub824 \uc8fc\ub294 \uac83 \uc678\uc5d0 \ucd94\uac00\uc801\uc778 \uc815\ubcf4\uac00 \ud544\uc694\ud55c \uacbd\uc6b0\uac00 \uc788\ub2e4. \uc774\ub7ec\ud55c \uacbd\uc6b0\ub97c \uc704\ud55c \ubc29\ubc95\uc774 \uc788\uc73c\ubbc0\ub85c \ub098\uc911\uc5d0 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n

\ub808\uc774\uc544\uc6c3 Modifier \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n

Modifier\uc758 layout\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc218\ub3d9\uc73c\ub85c \uc0ac\uc774\uc988\ub97c \uce21\uc815\ud558\uace0 \uc694\uc18c\uc758 \uc704\uce58\ub97c \uc81c\uc5b4\ud560 \uc218 \uc788\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c Modifier\uc758 layout\uc744 \uc0ac\uc6a9\ud558\ub294 \uacf5\ud1b5\uc801\uc778 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n

fun Modifier.customLayoutModifier(...) = Modifier.layout { measurable, constraints ->
  ...
})<\/code><\/pre>\n\n\n\n
layout\uc744 \uc0ac\uc6a9\ud574\uc11c \ub450\uac00\uc9c0 \ub78c\ub2e4 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc5bb\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
  • measurable : \ud558\uc704 \uc694\uc18c\uac00 \uce21\uc815\ub418\uace0 \ubc30\uce58\ub41c\ub2e4.<\/li>
  • constraints : \ud558\uc704 \uc694\uc18c\uc758 \ub108\ube44, \ub192\uc774 \ucd5c\uc18c \ubc0f \ucd5c\ub300\uce58<\/li><\/ul>\n\n\n\n
    Text\ub97c \uc2a4\ud06c\ub9b0\uc0c1\uc5d0 \ubcf4\uc5ec\uc8fc\uace0 \uc0c1\ub2e8\uc73c\ub85c\ubd80\ud130 \ud14d\uc2a4\ud2b8\uc758 \uccab\ubc88\uc9f8 \uc904 \ubca0\uc774\uc2a4\ub77c\uc778\uc758 \uac70\ub9ac\ub97c \uc81c\uc5b4\ud558\uace0 \uc2f6\ub2e4\uace0 \uac00\uc815\ud574\ubcf4\uc790. \uc774\uac78 \ud558\ub824\uba74, Modifier\uc758 layout\uc744 \uc0ac\uc6a9\ud574\uc11c \uc218\ub3d9\uc73c\ub85c \ucef4\ud3ec\uc800\ube14\uc744 \ud654\uba74\uc0c1\uc5d0 \ubc30\uce58\ud574\uc57c \ud55c\ub2e4. \ub2e4\uc74c \ub098\uc624\ub294 \uadf8\ub9bc\uc744 \ubcf4\uba74 \uc6d0\ud558\ub294 \ub3d9\uc791\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \uc0c1\ub2e8\uc73c\ub85c\ubd80\ud130 \uccab\ubc88\uc9f8 \ubca0\uc774\uc2a4\ub77c\uc778\uae4c\uc9c0 24dp\uc758 \uac04\uaca9\uc744 \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    firstBaselineToTop \uc774\ub77c\ub294 Modifier\ub97c \uba3c\uc800 \ub9cc\ub4e4\uc5b4\ubcf4\uc790.<\/p>\n\n\n\n
    fun Modifier.firstBaselineToTop(\n  firstBaselineToTop: Dp\n) = this.then(\n    layout { measurable, constraints ->\n       <\/strong> ...\n    }<\/strong>\n)<\/code><\/pre>\n\n\n\n
    \uccab\ubc88\uc9f8 \ud574\uc57c\ud560 \uc77c\uc740 \ucef4\ud3ec\uc800\ube14\uc744 \uce21\uc815\ud558\ub294 \uac83\uc774\ub2e4. \ucef4\ud3ec\uc988 \ub808\uc774\uc544\uc6c3 \uc6d0\uce59<\/em>\uc5d0\uc11c \uc5b8\uae09\ud588\ub4ef\uc774, \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \ud55c\ubc88\ub9cc \uce21\uc815\ud560 \uc218 \uc788\ub2e4<\/strong>.<\/p>\n\n\n\n
    measurable.measure(constraints)\ub97c \ud638\ucd9c\ud558\uc5ec \ucef4\ud3ec\uc800\ube14\uc744 \uce21\uc815\ud558\uc790. measure(constraints)\ub97c \ud638\ucd9c\ud560 \ub54c, \uc8fc\uc5b4\uc9c4 \ub78c\ub2e4 \ub9e4\uac1c\ubcc0\uc218 constraints(\uc81c\uc57d\uc870\uac74)\uc744 \uc0ac\uc6a9\ud558\uac70\ub098 \uc9c1\uc811 constraints\ub97c \uc0dd\uc131\ud558\uc5ec \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. Measurable\uc758 measure() \ud568\uc218 \ud638\ucd9c\uc5d0 \ub300\ud55c \uacb0\uacfc\ub85c Placeable\ub97c \ubc18\ud658\ud55c\ub2e4. Placeable\uc740 placeRelative(x, y)\ub97c \ud638\ucd9c\ud558\uc5ec \uc704\uce58\ub97c \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4. \uc774\uac74 \ub098\uc911\uc5d0 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n
    \uc6b0\ub9ac\uac00 \ub9cc\ub4dc\ub824\uace0 \ud558\ub294 \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc758 \uacbd\uc6b0, \uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\uc744 \uc0ac\uc6a9\ud558\uc5ec \uce21\uc815\ud558\uc790<\/p>\n\n\n\n
    fun Modifier.firstBaselineToTop(\n    firstBaselineToTop: Dp\n) = this.then(\n    layout { measurable, constraints ->\n        val placeable = measurable.measure(constraints)<\/strong>\n\n        ...\n    }\n)<\/code><\/pre>\n\n\n\n
    \uc774\uc81c \ucef4\ud3ec\uc800\ube14\uc758 \uc0ac\uc774\uc988\uac00 \uce21\uc815\ub418\uc5c8\uace0, \ub78c\ub2e4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucf58\ud150\uce20\ub97c \ubc30\uce58\ud558\ub294 layout(width, height)\uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uc5ec \ucef4\ud3ec\uc800\ube14 \uc0ac\uc774\uc988\ub97c \uc9c0\uc815\ud558\uc790. <\/p>\n\n\n\n
    \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ubcf4\uba74, \ucef4\ud3ec\uc800\ube14\uc758 \ub108\ube44\ub294 \uce21\uc815\ub41c \ucef4\ud3ec\uc800\ube14\uc758 \ub108\ube44(placeable.width)\uac00 \ub418\uace0, \uc0c1\ub2e8 \uae30\uc900\uc120 \ub192\uc774\uc5d0\uc11c \uccab \ubc88\uc9f8 \ubca0\uc774\uc2a4\ub77c\uc778\uae4c\uc9c0 \ube80 \uac12\uc774 \ucef4\ud3ec\uc800\ube14\uc758 \ub192\uc774\uac00 \ub41c\ub2e4. (height = placeable.height +placeableY)<\/p>\n\n\n\n
    Note : \uc544\ub798 \uc608\uc81c\ub97c \ubcf4\uba74 layout\ub0b4\uc5d0 layout\uc774 \ud3ec\ud568\ub41c\ub2e4. \ub450 layout\uc774 \ub2e4\ub974\ubbc0\ub85c \ud63c\ub3d9\ud558\uc9c0 \ub9d0\uc790.<\/p><\/blockquote>\n\n\n\n
    fun Modifier.firstBaselineToTop(\n    firstBaselineToTop: Dp\n) = this.then(\n    layout<\/strong> {<\/strong> measurable, constraints ->\n        val placeable = measurable.measure(constraints)\n\n        \/\/ Check the composable has a first baseline\n        check(placeable[FirstBaseline] != AlignmentLine.Unspecified)\n        val firstBaseline = placeable[FirstBaseline]\n\n        \/\/ Height of the composable with padding - first baseline\n        val placeableY = firstBaselineToTop.roundToPx() - firstBaseline\n        val height = placeable.height + placeableY\n        layout(placeable.width, height)<\/strong> {\n            ...\n        }<\/strong>\n    }<\/strong>\n)<\/code><\/pre>\n\n\n\n
    \uc774\uc81c placeable.placeRelative(x, y)\ub97c \ud638\ucd9c\ud558\uc5ec \ud574\ub2f9 \ucef4\ud3ec\uc800\ube14\uc744 \uc2a4\ud06c\ub9b0\uc0c1\uc5d0 \ubc30\uce58\ud560 \uc218 \uc788\ub2e4. placeRelative\ub97c \ud638\ucd9c\ud558\uc9c0 \uc54a\ub294\ub2e4\uba74, \ud574\ub2f9 \ucef4\ud3ec\uc800\ube14\uc740 \ubcf4\uc774\uc9c0 \uc54a\uc744 \uac83\uc774\ub2e4. placeRelative\ub294 \ud604\uc7ac \ubc30\uce58\uac00\ub2a5\ud55c layoutDirection\uc744 \uae30\uc900\uc73c\ub85c \ud3ec\uc9c0\uc158\uc744 \uc790\ub3d9\uc73c\ub85c \uc870\uc815\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
    Warning<\/strong>: \ucee4\uc2a4\ud140 Layout \ub610\ub294 LayoutModifier\ub97c \uc0dd\uc131\ud560 \ub54c, \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\ub294 layout \ud568\uc218\uac00 \ud638\ucd9c\ub420 \ub54c\uae4c\uc9c0 \uacbd\uace0\ub97c \ub098\ud0c0\ub0b8\ub2e4.<\/p><\/blockquote>\n\n\n\n
    fun Modifier.firstBaselineToTop(\n    firstBaselineToTop: Dp\n) = this.then(\n    layout { measurable, constraints ->\n        ...\n\n        \/\/ \uc5ec\ubc31\uc774 \uc788\ub294 \ucef4\ud3ec\uc800\ube14\uc758 \ub192\uc774 - \uccab\ubc88\uc9f8 \ubca0\uc774\uc2a4\ub77c\uc778\n        val placeableY = firstBaselineToTop.roundToPx() - firstBaseline\n        val height = placeable.height + placeableY\n        layout(placeable.width, height) {\n            \/\/ \ucef4\ud3ec\uc800\ube14\uc774 \uc790\ub9ac\uc7a1\uc744 \uc704\uce58\n            placeable.placeRelative(0, placeableY)<\/strong>\n        }\n    }\n)<\/code><\/pre>\n\n\n\n
    \uae30\ub300\ud55c\ub300\ub85c \ub3d9\uc791\ud558\ub294\uc9c0 \ud655\uc778\ud558\uae30 \uc704\ud574, Text\uc0c1\uc758 Modifier\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc124\uc815\ud558\uc790.<\/p>\n\n\n\n
    @Preview
    @Composable
    fun TextWithPaddingToBaselinePreview() {
      LayoutsCodelabTheme {
        Text(\"Hi there!\", Modifier.firstBaselineToTop(32.dp))
      }
    }

    @Preview
    @Composable
    fun TextWithNormalPaddingPreview() {
      LayoutsCodelabTheme {
        Text(\"Hi there!\", Modifier.padding(top = 32.dp))
      }
    }<\/code><\/pre>\n\n\n\n
    \ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \ub808\uc774\uc544\uc6c3 \ucef4\ud3ec\uc800\ube14 \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n
    \ub2e8\uc77c \ucef4\ud3ec\uc800\ube14\uc774 \ud654\uba74\uc0c1\uc5d0 \uc5b4\ub5bb\uac8c \uc0ac\uc774\uc988\ub97c \uce21\uc815\ud558\uace0 \uc804\uac1c\ub418\ub294\uc9c0 \uc81c\uc5b4\ud558\ub294 \ub300\uc2e0, \ucef4\ud3ec\uc800\ube14\ub4e4\uc774 \ud3ec\ud568\ub41c \uadf8\ub8f9\uc5d0 \ub300\ud55c \ud544\uc694\uc131\uc744 \uac16\uac8c \ub41c\ub2e4. \uc774\uac78 \uad6c\ud604\ud558\ub824\uba74, Layout \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc218\ub3d9\uc73c\ub85c \uce21\uc815\ud558\uace0 \ub808\uc774\uc544\uc6c3\ub0b4\uc758 \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \ubc30\uce58\ud55c\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c Layout\uc744 \uc0ac\uc6a9\ud558\ub294 \ucef4\ud3ec\uc800\ube14\uc758 \uacf5\ud1b5 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4:<\/p>\n\n\n\n
    @Composable\nfun CustomLayout(\n    modifier: Modifier = Modifier,\n    \/\/ \ucee4\uc2a4\ud140 layout \uc18d\uc131\n    content: @Composable () -> Unit\n) {\n    Layout(\n        modifier = modifier,\n        content = content\n    ) { measurables, constraints ->\n        \/\/ \uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\ub4e4\ub85c \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uce21\uc815\ud558\uace0, \ubc30\uce58\ud55c\ub2e4.\n    }\n}<\/code><\/pre>\n\n\n\n
    CustomLayout\uc5d0 \uc694\uad6c\ub418\ub294 \ucd5c\uc18c\ud55c\uc758 \ub9e4\uac1c\ubcc0\uc218\ub294 modifier\uc640 content\ub2e4. \uc774\ub7f0 \ub9e4\uac1c\ubcc0\uc218\ub4e4\uc774 Layout\uc5d0 \uc804\ub2ec\ub41c\ub2e4. (MeasurePolicy \ud0c0\uc785\uc778) Layout\uc758 \ud6c4\ud589 \ub78c\ub2e4\uc2dd \ub0b4\uc5d0\uc11c, layout Modifier\ub97c \uc5bb\uc740 \uac83\uacfc \ub3d9\uc77c\ud55c \ub78c\ub2e4 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc5bb\ub294\ub2e4.<\/p>\n\n\n\n
    \uc2e4\uc81c Layout\uc774 \uc791\ub3d9\ud558\ub294 \ubaa8\uc2b5\uc744 \ubcf4\uc5ec\uc8fc\uace0, \ud574\ub2f9 API\ub97c \uc774\ud574\ud558\uae30 \uc704\ud574 Layout\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub9e4\uc6b0 \uae30\ucd08\uc801\uc778 Column\uc744 \uad6c\ud604\ud574\ubcf4\ub3c4\ub85d \ud558\uc790. \ub098\uc911\uc5d0 Layout \ucef4\ud3ec\uc800\ube14\uc758 \uc720\uc5f0\uc131\uc744 \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574 \ub354 \ubcf5\uc7a1\ud55c \uac83\ub3c4 \ub9cc\ub4e4 \uc608\uc815\uc774\ub2e4.<\/p>\n\n\n\n
    \uae30\ubcf8\uc801\uc778 Column \uad6c\ud604\ud558\uae30<\/h2>\n\n\n\n
    \uc6b0\ub9ac\uac00 \ub9cc\ub4e4 \ucee4\uc2a4\ud140 Column \uad6c\ud604\uc740 \uc218\uc9c1\uc801\uc73c\ub85c \uc544\uc774\ud15c\ub4e4\uc744 \uc804\uac1c\ud55c\ub2e4. \ub610\ud55c, \ub2e8\uc21c\uc131\uc744 \uc704\ud574, \uc0c1\uc704 \ucef4\ud3ec\uc800\ube14\ub0b4\uc5d0\uc11c \uc6b0\ub9ac \ub808\uc774\uc544\uc6c3\uc740 \uc0c1\uc704 \ucef4\ud3ec\uc800\ube14\ub0b4\uc5d0\uc11c \uac00\ub2a5\ud55c \ub9ce\uc740 \uacf5\uac04\uc744 \ucc28\uc9c0\ud558\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n
    \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc800\ube14\uc744 \ub9cc\ub4e4\uace0 MyOwnColumn\uc774\ub77c \uc774\ub984\uc744 \uc9d3\ub294\ub2e4. \uadf8\ub9ac\uace0 Layout \ucef4\ud3ec\uc800\ube14 \uacf5\ud1b5 \uad6c\uc870\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
    @Composable\nfun MyOwnColumn(\n    modifier: Modifier = Modifier,\n    content: @Composable () -> Unit\n) {\n    Layout(\n        modifier = modifier,\n        content = content\n    ) { measurables, constraints ->\n        \/\/ \uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\ub4e4\ub85c \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uce21\uc815\ud558\uace0, \ubc30\uce58\ud55c\ub2e4.\n    }\n}<\/code><\/pre>\n\n\n\n
    \uc774\uc804\uacfc \uac19\uc774, \ucc98\uc74c\uc73c\ub85c \ud574\uc57c \ud560 \uc77c\uc740 \ud55c\ubc88\ub9cc \uce21\uc815\ub418\ub294 \ud558\uc704 \uc694\uc18c\ub4e4\uc5d0 \ub300\ud55c \uce21\uc815\uc744 \ud558\ub294 \uac83\uc774\ub2e4. \ub808\uc774\uc544\uc6c3 Modifier\uac00 \uc791\ub3d9\ud558\ub294 \ubc29\uc2dd\uacfc \uc720\uc0ac\ud558\uac8c\ub3c4, \ub78c\ub2e4 \ub9e4\uac1c\ubcc0\uc218\uc778 measurable\ub85c measurable.measure(constraints)\ub97c \ud638\ucd9c\ud558\uc5ec \ubaa8\ub4e0 content\ub97c \uc5bb\uc744 \uc218 \uc788\ub2e4. <\/p>\n\n\n\n
    \uc774\ub7ec\ud55c \uc720\uc988\ucf00\uc774\uc2a4 \ub54c\ubb38\uc5d0 \ud558\uc704 View\ub4e4\uc744 \ub354\uc774\uc0c1 \uc81c\ud55c\ud558\uc9c0 \uc54a\ub294\ub2e4.  \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uce21\uc815\ud560 \ub54c, \ub108\ube44 \ubc0f \ucd5c\ub300 \ub192\uc774\ub97c \uc2e0\uacbd\uc368\uc11c \uac01 \ud589(row)\uc774 \uc62c\ubc14\ub974\uac8c \uc2a4\ud06c\ub9b0\uc0c1\uc5d0 \ubc30\uce58 \ub420 \uc218 \uc788\ub294\uc9c0 \uc54c\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    @Composable\nfun MyOwnColumn(\n    modifier: Modifier = Modifier,\n    content: @Composable () -> Unit\n) {\n    Layout(\n        modifier = modifier,\n        content = content\n    ) { measurables, constraints ->\n\n        \/\/ \ud558\uc704 \ubdf0\ub4e4\uc744 \uc81c\ud55c\ud558\uc9c0 \ub9d0\uace0, \uc8fc\uc5b4\uc9c4 constraints\ub85c \uce21\uc815\ud558\uc790.\n        \/\/ \uce21\uc815\ub41c \ud558\uc704 \uc694\uc18c \ubaa9\ub85d\ub4e4\n        val placeables = measurables.map { measurable ->\n            \/\/ Measure each child\n            measurable.measure(constraints)\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
    \uc774 \ub85c\uc9c1\ub0b4\uc5d0\uc11c \uc9c0\uae08 \uc6b0\ub9ac\ub294 \uce21\uc815\ub41c \ud558\uc704 \uc694\uc18c \ubaa9\ub85d\uc744 \uac16\uac8c \ub41c\ub2e4. \ud654\uba74\uc0c1\uc5d0 \uc774\uac83\ub4e4\uc744 \ubc30\uce58\ud558\uae30 \uc804\uc5d0 \uc6b0\ub9ac\uac00 \ub9cc\ub4e0 Column \uc0ac\uc774\uc988\ub97c \uacc4\uc0b0\ud560 \ud544\uc694\uac00 \uc788\ub2e4. \uc0c1\uc704 \ucef4\ud3ec\uc800\ube14\ub9cc\ud07c \ud06c\uac8c \ub9cc\ub4e4\uae30 \uc704\ud574, \uc0c1\uc704 \ucef4\ud3ec\uc800\ube14\uc774 \uc804\ub2ec\ud55c constraints\ub97c \uadf8\ub300\ub85c \uc0ac\uc6a9\ud55c\ub2e4. \ub2e4\uc74c \ub098\uc624\ub294 \ucf54\ub4dc\uc640 \uac19\uc774 layout(\ub108\ube44, \ub192\uc774) \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uc5ec \uc6b0\ub9ac\uac00 \ub9cc\ub4e4 Column\uc758 \ud06c\uae30\ub97c \uc9c0\uc815\ud55c\ub2e4. layout \uba54\uc11c\ub4dc\ub294 \ud558\uc704 \uc694\uc18c \ubc30\uce58\uc5d0 \uc0ac\uc6a9\ub418\ub294 \ub78c\ub2e4\ub3c4 \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\n
    @Composable\nfun MyOwnColumn(\n    modifier: Modifier = Modifier,\n    content: @Composable () -> Unit\n) {\n    Layout(\n        modifier = modifier,\n        content = content\n    ) { measurables, constraints ->\n        \/\/ \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uce21\uc815\ud55c\ub2e4 - \uc704\uc5d0 \uc788\ub294 \ucf54\ub4dc \uc2a4\ub2c8\ud54f \ucf54\ub4dc\n        ...\n\n        \/\/ Set the size of the layout as big as it can\n        layout(constraints.maxWidth, constraints.maxHeight) {\n            \/\/ \ud558\uc704\uc694\uc18c \ubc30\uce58\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
    \ub9c8\uce68\ub0b4 placeable.placeRelative(x, y)\ub97c \ud638\ucd9c\ud558\uc5ec \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uc2a4\ud06c\ub9b0\uc0c1\uc5d0 \ubc30\uce58\ud55c\ub2e4. \ud558\uc704\uc694\uc18c\ub4e4\uc744 \uc218\uc9c1\uc801\uc73c\ub85c \ubc30\uce58\ud558\uae30 \uc704\ud574, \ubc30\uce58\ud55c \ud558\uc704\uc694\uc18c\ub4e4\uc758 y \uc88c\ud45c\uac12\uc744 \ucd94\uc801\ud558\ub3c4\ub85d \ud55c\ub2e4. MyOwnColumn\uc758 \ucd5c\uc885\ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4<\/p>\n\n\n\n
    @Composable\nfun MyOwnColumn(\n    modifier: Modifier = Modifier,\n    content: @Composable () -> Unit\n) {\n    Layout(\n        modifier = modifier,\n        content = content\n    ) { measurables, constraints ->\n        \/\/ \ud558\uc704 View\ub4e4\uc744 \uc81c\ud55c\ud558\uc9c0 \ub9d0\uace0, \uc8fc\uc5b4\uc9c4 constraint\ub85c \uce21\uc815\n        \/\/ \uce21\uc815\ub41c \ud558\uc704 \uc694\uc18c\ub4e4\n        val placeables = measurables.map { measurable ->\n            \/\/ \uac01 \ud558\uc704 \uc694\uc18c \uce21\uc815\n            measurable.measure(constraints)\n        }\n\n        \/\/ \uc218\uc9c1\uc73c\ub85c \ubc30\uce58\ud558\uae30 \uc704\ud574 \ud558\uc704 \uc694\uc18c\ub4e4\uc758 y \uc88c\ud45c\uac12\uc744 \ucd94\uc801\n        var yPosition = 0\n\n        \/\/ \uac00\ub2a5\ud55c \ub808\uc774\uc544\uc6c3\uc758 \uc0ac\uc774\uc988\ub97c \ud06c\uac8c \uc124\uc815 \n        layout(constraints.maxWidth, constraints.maxHeight) {\n            \/\/ \uc0c1\uc704 \ub808\uc774\uc544\uc6c3\ub0b4 \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \ubc30\uce58\n            placeables.forEach { placeable ->\n                \/\/ \ud654\uba74\uc0c1\uc5d0 \ud56d\ubaa9\ub4e4\uc744 \ubc30\uce58\ud55c\ub2e4\n                placeable.placeRelative(x = 0, y = yPosition)\n\n                \/\/ y \uc88c\ud45c\uac12\uc744 \uae30\ub85d\ud55c\ub2e4.\n                yPosition += placeable.height\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
    \uc2e4\uc804 MyOwnColumn<\/h2>\n\n\n\n
    BodyContent \ucef4\ud3ec\uc800\ube14 \ub0b4\uc5d0 MyOwnColumn\uc744 \uc0bd\uc785\ud558\uc5ec \ud654\uba74\uc0c1\uc5d0 \uc774\ub97c \ub098\ud0c0\ub0b4\ub3c4\ub85d \ud574\ubcf4\uc790. BodyContent\ub0b4\uc5d0 \ub0b4\uc6a9\uc744 \uad50\uccb4\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    @Composable
    fun BodyContent(modifier: Modifier = Modifier) {
        MyOwnColumn(modifier.padding(8.dp)) {
            Text(\"MyOwnColumn\")
            Text(\"places items\")
            Text(\"vertically.\")
            Text(\"We've done it by hand!\")
        }
    }<\/code><\/pre>\n\n\n\n
    \ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \uc774\ub807\uac8c \ub098\uc628\ub2e4.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    \ucef4\ud3ec\uc988\ub294 Column, Row \ub610\ub294 Box\uc640 \uac19\uc740 \uae30\ubcf8 \uc81c\uacf5\ud558\ub294 \ucef4\ud3ec\uc800\ube14\ub4e4\uc744 \ud1b5\ud574 \uc791\uc740 \ub2e8\uc704\uc758 \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc73c\ub85c \ub9cc\ub4e4\uc5b4 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc77c \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4. \ud558\uc9c0\ub9cc, \uc218\ub3d9\uc73c\ub85c \ud558\uc704 \ucef4\ud3ec\uc800\ube14\uc758 \uc0ac\uc774\uc988\ub97c \uce21\uc815\ud558\uace0 \ubc30\uce58\ud574\uc57c \ud558\ub294 \uac83\ucc98\ub7fc, \ubb34\uc5b8\uac00 \uc571\uc5d0\uc11c \ud2b9\ubcc4\ud55c \uac83\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud560 \ub54c\uac00 \uc788\ub2e4. Note : View \uc2dc\uc2a4\ud15c\uc5d0\uc11c \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4dc\ub824\uba74, ViewGroup\uc744 \ud655\uc7a5\ud558\uace0 onMeasure \ubc0f onLayout\uacfc \uac19\uc740 […]<\/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\/45559"}],"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=45559"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45559\/revisions"}],"predecessor-version":[{"id":45579,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45559\/revisions\/45579"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}