{"id":46064,"date":"2022-05-10T22:13:36","date_gmt":"2022-05-10T13:13:36","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=46064"},"modified":"2022-05-10T22:13:37","modified_gmt":"2022-05-10T13:13:37","slug":"composable-%eb%84%88%ec%9d%98-%ec%9c%84%ec%b9%98%eb%a5%bc-%ec%95%8c%eb%a0%a4%ec%a3%a0-ongloballypositioned","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=46064","title":{"rendered":"Composable, \ub108\uc758 \uc704\uce58\ub97c \uc54c\ub824\uc8e0! (OnGloballyPositioned)"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"969\" height=\"1024\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2022\/05\/www.charlezz.com-composable-ongloballypositioned--2022-05-10--9.46.39-969x1024.png\" alt=\"\" class=\"wp-image-46066\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2022\/05\/www.charlezz.com-composable-ongloballypositioned--2022-05-10--9.46.39-969x1024.png 969w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2022\/05\/www.charlezz.com-composable-ongloballypositioned--2022-05-10--9.46.39-284x300.png 284w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2022\/05\/www.charlezz.com-composable-ongloballypositioned--2022-05-10--9.46.39-768x811.png 768w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2022\/05\/www.charlezz.com-composable-ongloballypositioned--2022-05-10--9.46.39-1454x1536.png 1454w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2022\/05\/www.charlezz.com-composable-ongloballypositioned--2022-05-10--9.46.39.png 1522w\" sizes=\"(max-width: 969px) 100vw, 969px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\ucef4\ud3ec\uc800\ube14\uc758 \ud3ec\uc9c0\uc158\uc740 \uc5b4\ub5bb\uac8c \uad6c\ud560 \uc218 \uc788\ub098<\/h2>\n\n\n\n<p>Android View\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 UI\ub97c \uad6c\ud604\ud560 \ub54c\ub294 root \uc5d0\uc11c \ud558\uc704\uc5d0 \uc788\ub294 view\uc758 \ud3ec\uc9c0\uc158\uc744 \uad6c\ud560 \uc218 \uc788\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \ucef4\ud3ec\uc988\ub85c UI\ub97c \uad6c\ud604\uc2dc\uc5d0\ub294 View\ub294 ComposeView \ud558\ub098\ub9cc \uc874\uc7ac\ud558\uace0, \uce94\ubc84\uc2a4\uc5d0 \ud544\uc694\ud55c Element\ub4e4\uc744 \uadf8\ub9ac\ub294 \ubc29\uc2dd\uc774\ub2e4.\u00a0<\/p>\n\n\n\n<p>\uc704\uc758 \uc774\ubbf8\uc9c0\uc640 \uac19\uc774 \ud2b9\uc815 \ubc84\ud2bc(\ucef4\ud3ec\uc800\ube14) \uc704\uce58\uc5d0 \ub9de\ucdb0 \uc5b4\ub5a0\ud55c \ud31d\uc5c5\uc744 \ub744\uc6b4\ub2e4\uace0 \uac00\uc815\ud560 \ub54c \uc5b4\ub5bb\uac8c \ud3ec\uc9c0\uc158\uc744 \uad6c\ud560 \uc218 \uc788\uc744\uae4c?<\/p>\n\n\n\n<p><strong>\uc0ac\uc2e4 \ucef4\ud3ec\uc988\uc5d0\uc11c\ub3c4 ConstraintLayout\uc73c\ub85c\ub9cc UI\ub97c \uad6c\uc131\ud55c\ub2e4\uba74, \ud2b9\ubcc4\ud55c \uc194\ub8e8\uc158\uc774 \ud544\uc694 \uc5c6\uc744\uc9c0\ub3c4 \ubaa8\ub978\ub2e4.<\/strong> \uadf8\ub807\uc9c0 \uc54a\uc740 \uacbd\uc6b0\uc5d0\ub294 \ucef4\ud3ec\uc800\ube14\uc758 \ud3ec\uc9c0\uc158\uc744 \uc54c\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">OnGloballyPositionedModifier \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>interface OnGloballyPositionedModifier : Modifier, Modifier.Element<\/code><\/pre>\n\n\n\n<p>OnGloballyPositionedModifier\ub294 Modifier\uc758 \uc77c\uc885\uc73c\ub85c, \ucf58\ud150\uce20\uc758 \uc804\uc5ed \ud3ec\uc9c0\uc158\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c \ub808\uc774\uc544\uc6c3\uc758 \ucd5c\uc885 LayoutCoordinates\uc640 \ud568\uaed8 onGloballyPositioned \ucf5c\ubc31\uc744 \ud638\ucd9c\ud55c\ub2e4. \uc88c\ud45c\ub97c \ud3ec\ud568\ud558\uace0 \uc788\ub294 \uc774 \ucf5c\ubc31\uc740 Composition(\uad6c\uc131)\uc774 \ub05d\ub0ac\uc744 \ub54c \ud638\ucd9c \ub428\uc744 \uba85\uc2ec\ud558\uc790.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc88c\ud45c \uad6c\ud558\uae30 \uc608\uc81c<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Column(\n    Modifier.onGloballyPositioned { coordinates ->\n        \/\/ Column\uc758 \uc0ac\uc774\uc988\n        coordinates.size\n        \/\/ \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc708\ub3c4\uc6b0\uc5d0 \uc0c1\ub300\uc801\uc778 Column\uc758 \ud3ec\uc9c0\uc158\n        coordinates.positionInWindow()\n        \/\/ \ucef4\ud3ec\uc988 \ucd5c\uc0c1\uc704\uc5d0 \uc0c1\ub300\uc801\uc778 Column\uc758 \ud3ec\uc9c0\uc158\n        coordinates.positionInRoot()\n        \/\/ \ub808\uc774\uc544\uc6c3\uc5d0 \uc81c\uacf5\ub418\ub294 \uc815\ub82c \ub77c\uc778 (Column\uc758 \uacbd\uc6b0 \ube44\uc5b4\uc788\uc74c)\n        coordinates.providedAlignmentLines\n        \/\/  Column\uc758 \ubd80\ubaa8\uc5d0 \ud574\ub2f9\ud558\ub294 LayoutCoordinates \uc778\uc2a4\ud134\uc2a4\n        coordinates.parentLayoutCoordinates\n    }\n) {\n    ...\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\ubc84\ud2bc \uc704\uce58\uc5d0 \ub9de\uac8c \ud31d\uc5c5 \ub744\uc6b0\uae30<\/h2>\n\n\n\n<p>\uc88c\ud45c\ub97c \uad6c\ud558\uace0\uc790 \ud558\ub294 \ucef4\ud3ec\uc800\ube14\uc5d0 <meta charset=\"utf-8\">OnGloballyPositionedModifier\ub97c \ucd94\uac00\ud558\uc5ec \uc0c1\ub300\uc801\uc778 \ud3ec\uc9c0\uc158\uc744 \uba3c\uc800 \uad6c\ud560 \uc218 \uc788\ub2e4. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nfun \bInformationButton(\n    ...,\n    <strong>onGloballyPositioned:(LayoutCoordinates) -> Unit<\/strong>,\n) {\n    Column(\n        <strong>modifier = modifier.onGloballyPositioned(onGloballyPositioned)<\/strong>\n    ) {\n        ...\n    }\n}<\/code><\/pre>\n\n\n\n<p>state hoisting \uae30\ubc95\uc73c\ub85c \uc804\uc5ed \ud3ec\uc9c0\uc158 \uc815\ubcf4(LayoutCoordinates) \uc774\ubca4\ud2b8\ub97c \uc0c1\uc704\ub85c \uc804\ub2ec\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nprivate fun RequestPaymentScreen(\n    ...\n) {\n    ...\n\n    <strong>var infomationBtnOffset by remember { mutableStateOf(Offset.Zero) }<\/strong>\n\n    Scaffold(\n        topBar = {...},\n        content = {\n\n            ...\n\n            <meta charset=\"utf-8\">InformationButton(\n                \/\/ boundsInRoot\ub294 \ud574\ub2f9 \ucef4\ud3ec\uc800\ube14\uc744 \uac10\uc2f8\ub294  \uc815\ubcf4\ub97c \ubc18\ud658\ud55c\ub2e4.\n                \/\/ Rect\uc758 bottomCenter\ub97c \uc911\uc559 \ud558\ub2e8\ubd80 \ud3ec\uc9c0\uc158(Offset)\uc744 \ubc18\ud658\ud55c\ub2e4.\n                \/\/ \uc774 \uc815\ubcf4\ub97c informationBtnOffset\uc5d0 \uc800\uc7a5\ud558\uc790.\n                <strong>onGloballyPositioned = { layoutCoordinates->\n                    <meta charset=\"utf-8\"><meta charset=\"utf-8\">layoutCoordinates.boundsInRoot().bottomCenter\n                }<\/strong>\n            )\n            \n        },\n        bottomBar = {...}\n    )\n   \n}<\/code><\/pre>\n\n\n\n<p>\uc804\ub2ec \ubc1b\uc740 \uc804\uc5ed \ud3ec\uc9c0\uc158\uc758 \uc0c1\ud0dc\ub97c \uc800\uc7a5\ud558\uace0 State\ub85c \uc800\uc7a5(remember)\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><meta charset=\"utf-8\">\n\n@Composable\nprivate fun RequestPaymentScreen(\n    ...\n) {\n    ...\n\n    <strong>var infomationBtnOffset by remember { mutableStateOf(Offset.Zero) }<\/strong>\n\n    Scaffold(...)\n\n    \/\/ \ud654\uba74\uc704\uc5d0 \ub098\ud0c0\ub0b4\uace0 \uc2f6\uc740 \ud31d\uc5c5\uc744 \ubcf4\uc5ec\uc8fc\uace0, offset \uc815\ubcf4\ub97c \uae30\ubc18\uc73c\ub85c \n    \bPopupGuide(\n        isShowing = ...,\n        offset = <meta charset=\"utf-8\"><strong>infomationBtnOffset<\/strong>,\n        onCloseClick = ...\n    )\n   \n}\n\n@Composable\nfun <meta charset=\"utf-8\">PopupGuide(\n    isShowing: Boolean,\n    <meta charset=\"utf-8\"><strong>offset<\/strong>: Offset,\n    onCloseClick: () -> Unit\n) {\n    val <meta charset=\"utf-8\"><strong>paddingStart<\/strong> = ... \/\/ <strong>offset<\/strong> \uae30\ubc18\uc73c\ub85c \uc2dc\uc791 \ud328\ub529\uac12\uc744 \uacb0\uc815\n    val <strong>paddingTop<\/strong> = <meta charset=\"utf-8\">... \/\/ <strong>offset<\/strong> \uae30\ubc18\uc73c\ub85c \uc0c1\ub2e8 \ud328\ub529\uac12\uc744 \uacb0\uc815\n\n    if (isShowing) {\n        Surface{\n            \bColumn(\n                modifier = Modifier\n                    .padding(\n                        start = <strong>paddingStart<\/strong>,\n                        top = <strong>paddingTop<\/strong>\n                    )\n            ) { ... }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>\ucef4\ud3ec\uc800\ube14\uc758 \uc704\uce58\uc815\ubcf4\ub97c \uae30\ubc18\uc73c\ub85c \ud31d\uc5c5\uc758 \uc704\uce58\ub97c \uc801\uc808\ud558\uac8c \ubc30\uce58\ud560 \uc218 \uc788\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ucef4\ud3ec\uc800\ube14\uc758 \ud3ec\uc9c0\uc158\uc740 \uc5b4\ub5bb\uac8c \uad6c\ud560 \uc218 \uc788\ub098 Android View\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 UI\ub97c \uad6c\ud604\ud560 \ub54c\ub294 root \uc5d0\uc11c \ud558\uc704\uc5d0 \uc788\ub294 view\uc758 \ud3ec\uc9c0\uc158\uc744 \uad6c\ud560 \uc218 \uc788\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \ucef4\ud3ec\uc988\ub85c UI\ub97c \uad6c\ud604\uc2dc\uc5d0\ub294 View\ub294 ComposeView \ud558\ub098\ub9cc \uc874\uc7ac\ud558\uace0, \uce94\ubc84\uc2a4\uc5d0 \ud544\uc694\ud55c Element\ub4e4\uc744 \uadf8\ub9ac\ub294 \ubc29\uc2dd\uc774\ub2e4.\u00a0 \uc704\uc758 \uc774\ubbf8\uc9c0\uc640 \uac19\uc774 \ud2b9\uc815 \ubc84\ud2bc(\ucef4\ud3ec\uc800\ube14) \uc704\uce58\uc5d0 \ub9de\ucdb0 \uc5b4\ub5a0\ud55c \ud31d\uc5c5\uc744 \ub744\uc6b4\ub2e4\uace0 \uac00\uc815\ud560 \ub54c \uc5b4\ub5bb\uac8c \ud3ec\uc9c0\uc158\uc744 \uad6c\ud560 \uc218 [&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":[16],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/46064"}],"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=46064"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/46064\/revisions"}],"predecessor-version":[{"id":46067,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/46064\/revisions\/46067"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=46064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=46064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=46064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}