{"id":45778,"date":"2021-11-24T13:22:39","date_gmt":"2021-11-24T04:22:39","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45778"},"modified":"2021-11-24T13:22:41","modified_gmt":"2021-11-24T04:22:41","slug":"migrating-to-jetpack-compose-xml%ec%9d%84-%eb%b2%97%ec%96%b4%eb%82%98-%ec%bb%b4%ed%8f%ac%ec%a0%80%eb%b8%94-%ec%83%9d%ec%84%b1%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45778","title":{"rendered":"Migrating to Jetpack Compose – XML\uc744 \ubc97\uc5b4\ub098 \ucef4\ud3ec\uc800\ube14 \uc0dd\uc131\ud558\uae30"},"content":{"rendered":"\n

\uc2dd\ubb3c\uc758 \uc774\ub984\uc744 \ub9c8\uc774\uadf8\ub808\uc774\uc158\ud558\ub294 \uac83\uc73c\ub85c \uc2dc\uc791\ud574\ubcf4\uc790. \ubcf4\ub2e4 \uc815\ud655\ud558\uac8c\ub294 fragment_plant_detail.xml\uc5d0\uc11c \uc81c\uac70\ud55c @+id\/plant_detail_name\uc758 id\ub97c \uac00\uc9c4 TextView\ub2e4. \ub2e4\uc74c\uc740 XML \ucf54\ub4dc\ub2e4.<\/p>\n\n\n\n

<TextView
    android:id=\"@+id\/plant_detail_name\"
    ...
    android:layout_marginStart=\"@dimen\/margin_small\"
    android:layout_marginEnd=\"@dimen\/margin_small\"
    android:gravity=\"center_horizontal\"
    android:text=\"@{viewModel.plant.name}\"
    android:textAppearance=\"?attr\/textAppearanceHeadline5\"
    ... \/><\/code><\/pre>\n\n\n\n
textAppearanceHeadline5 \uc2a4\ud0c0\uc77c\uc774 \uc788\uace0, \uac00\ub85c \uc5ec\ubc31\uc774 8.dp\uc774\uace0, \ud654\uba74\uc758 \uac00\ub85c \uc911\uc559\uc5d0 \uc5b4\ub5bb\uac8c \ubc30\uce58\ub418\ub294\uc9c0 \ud655\uc778\ud558\uc790. \ub2e8, \ud45c\uc2dc\ud560 \uc81c\ubaa9\uc740 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \uacc4\uce35\uc5d0\uc11c \uac00\uc838\uc628 PlantDetailViewModel\uc5d0 \uc758\ud574 \ub178\ucd9c\ub41c LiveData\uc5d0\uc11c \uad00\ucc30(observe)\ub41c\ub2e4.<\/p>\n\n\n\n
LiveData \uad00\ucc30\uc740 \ub098\uc911\uc5d0 \ub2e4\ub8e8\uae30 \ub54c\ubb38\uc5d0, \uac00\uc815\uc744 \uba3c\uc800 \ud574\ubcf4\uc790. \uc774\ub984\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uace0 \uadf8 \uc774\ub984\uc774 \uc6b0\ub9ac\uac00 PlantDetailDescription.kt \ub0b4\uc5d0\uc11c \uc0dd\uc131\ud558\ub294 \uc0c8\ub85c\uc6b4 PlantName \ucef4\ud3ec\uc800\ube14\uc758 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ub41c\ub2e4\uace0 \uac00\uc815\ud55c\ub2e4. \uc774 \ucef4\ud3ec\uc800\ube14\uc740 PlantDetailDescription \ucef4\ud3ec\uc800\ube14\ub85c\ubd80\ud130 \ub098\uc911\uc5d0 \ud638\ucd9c\ub41c\ub2e4.<\/p>\n\n\n\n
PlantDetailDescription.kt<\/h4>\n\n\n\n
@Composable
private fun PlantName(name: String) {
    Text(
        text = name,
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}

@Preview
@Composable
private fun PlantNamePreview() {
    MaterialTheme {
        PlantName(\"Apple\")
    }
}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ud45c\ud604\ub41c\ub2e4.<\/p>\n\n\n\n
\"96f0ac15d8cd0745.png\"\/<\/figure>\n\n\n\n
Note:<\/strong>\u00a0\uc218\ud589 \uc911\uc778 \uc791\uc5c5\uc744 \ud655\uc778\ud560 \ub54c\ub9c8\ub2e4 \uc5d0\ubbac\ub808\uc774\ud130\ub97c \ubc30\ud3ec\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub418\ub3c4\ub85d Compose \ubbf8\ub9ac \ubcf4\uae30(Preview) \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
\ud45c\uc2dc \uc870\uac74:<\/p>\n\n\n\n
  • Text\uc758 \uc2a4\ud0c0\uc77c\uc740 XML \ucf54\ub4dc\uc5d0\uc11c textAppearanceHeadline5\uc5d0 \ub9e4\ud551\ub418\ub294 MaterialTheme.typography.h5\ub2e4.<\/li>
  • Modifier\ub294 Text\ub97c \uc7a5\uc2dd\ud558\uc5ec XML \ubc84\uc804\ucc98\ub7fc \ubcf4\uc774\ub3c4\ub85d \uc870\uc815\ud55c\ub2e4.<\/li>
  • fillMaxWidth Modifier\ub294 XML \ucf54\ub4dc\uc758 android:layout_width=”match_parent”\uc5d0 \ud574\ub2f9\ud55c\ub2e4.<\/li>
  • margin_small\uc758 \uc218\ud3c9 padding\uc740 View \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 dimension Resource \ud5ec\ud37c \ud568\uc218\ub85c\ubd80\ud130 \uc628 \uac12\uc774\ub2e4.<\/li>
  • wrapContentWidth\ub97c \uc0ac\uc6a9\ud558\uc5ec Text\ub97c \uc218\ud3c9\uc73c\ub85c \uc815\ub82c\ud55c\ub2e4.<\/li><\/ul>\n\n\n\n
    Note<\/strong>: \ucef4\ud3ec\uc988\ub294 dimens.xml \ubc0f strings.xml \ud30c\uc77c, \uc989 dimensionResource(id) \ubc0f stringResource(id)\uc5d0\uc11c \uac12\uc744 \uac00\uc838\uc624\ub294 \ud3b8\ub9ac\ud55c \uba54\uc11c\ub4dc\ub97c \uc81c\uacf5\ud55c\ub2e4.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    \uc2dd\ubb3c\uc758 \uc774\ub984\uc744 \ub9c8\uc774\uadf8\ub808\uc774\uc158\ud558\ub294 \uac83\uc73c\ub85c \uc2dc\uc791\ud574\ubcf4\uc790. \ubcf4\ub2e4 \uc815\ud655\ud558\uac8c\ub294 fragment_plant_detail.xml\uc5d0\uc11c \uc81c\uac70\ud55c @+id\/plant_detail_name\uc758 id\ub97c \uac00\uc9c4 TextView\ub2e4. \ub2e4\uc74c\uc740 XML \ucf54\ub4dc\ub2e4. textAppearanceHeadline5 \uc2a4\ud0c0\uc77c\uc774 \uc788\uace0, \uac00\ub85c \uc5ec\ubc31\uc774 8.dp\uc774\uace0, \ud654\uba74\uc758 \uac00\ub85c \uc911\uc559\uc5d0 \uc5b4\ub5bb\uac8c \ubc30\uce58\ub418\ub294\uc9c0 \ud655\uc778\ud558\uc790. \ub2e8, \ud45c\uc2dc\ud560 \uc81c\ubaa9\uc740 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \uacc4\uce35\uc5d0\uc11c \uac00\uc838\uc628 PlantDetailViewModel\uc5d0 \uc758\ud574 \ub178\ucd9c\ub41c LiveData\uc5d0\uc11c \uad00\ucc30(observe)\ub41c\ub2e4. LiveData \uad00\ucc30\uc740 \ub098\uc911\uc5d0 \ub2e4\ub8e8\uae30 \ub54c\ubb38\uc5d0, \uac00\uc815\uc744 \uba3c\uc800 \ud574\ubcf4\uc790. \uc774\ub984\uc744 \uc0ac\uc6a9\ud560 \uc218 […]<\/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\/45778"}],"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=45778"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45778\/revisions"}],"predecessor-version":[{"id":45779,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45778\/revisions\/45779"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}