{"id":45702,"date":"2021-11-19T19:44:50","date_gmt":"2021-11-19T10:44:50","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45702"},"modified":"2021-11-19T19:44:52","modified_gmt":"2021-11-19T10:44:52","slug":"jetpack-compose-theming-%ed%85%8d%ec%8a%a4%ed%8a%b8-%ec%9e%91%ec%97%85","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45702","title":{"rendered":"Jetpack Compose theming &#8211; \ud14d\uc2a4\ud2b8 \uc791\uc5c5"},"content":{"rendered":"\n<p>\ud14d\uc2a4\ud2b8\ub85c \uc791\uc5c5\ud560 \ub54c, Text \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud558\uace0, \ud14d\uc2a4\ud2b8 \uc785\ub825\uc744 \uc704\ud574 TextField \ubc0f OutlinedTextField\ub97c \uc0ac\uc6a9\ud55c\ub2e4 \uadf8\ub9ac\uace0 \ud14d\uc2a4\ud2b8\uc5d0 \ub2e8\uc77c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uae30 \uc704\ud574 TextStyle\uc744 \uc0ac\uc6a9\ud55c\ub2e4. AnnotatedString\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8\uc5d0 \uc5ec\ub7ec \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\uc774\uc804 \uc139\uc158\uc758 \uc0c9\uc0c1\uc5d0\uc11c \ubcf4\uc558\ub358 \uac83\ucc98\ub7fc, \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud558\ub294 \uba38\ud2f0\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\ub294 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud55c \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ud14c\ub9c8\ub97c \uc120\ud0dd\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Button(...) {<br>&nbsp; Text(\"This text will use MaterialTheme.typography.button style by default\")<br>}<\/code><\/pre>\n\n\n\n<p>\uc774\ub97c \uad6c\ud604\ud558\ub294 \uac83\uc740 \uc0c9\uc0c1\uc791\uc5c5\uc5d0\uc11c \ubd24\ub358 \uac83\ucc98\ub7fc, \uae30\ubcf8 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\ubcf4\ub2e4\ub294 \uc57d\uac04 \ub354 \ubcf5\uc7a1\ud558\ub2e4. \uc774\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud14d\uc2a4\ud2b8 \uc790\uccb4\ub97c \ud45c\uc2dc\ud558\uc9c0 \uc54a\ub294 \uacbd\ud5a5\uc774 \uc788\uae30 \ub54c\ubb38\uc778\ub370, \uc880 \ub354 \uc815\ud655\ud788 \ub9d0\ud558\uc790\uba74 Text \ucef4\ud3ec\uc800\ube14\uc5d0 \uc804\ub2ec\ud560 \uc218 \uc788\ub294 &#8216;Slot API&#8217;\ub97c \uc81c\uacf5\ud558\uae30 \ub54c\ubb38\uc774\ub2e4. \uadf8\ub807\ub2e4\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc5b4\ub5bb\uac8c \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ud14c\ub9c8 \uc2a4\ud0c0\uc77c\uc744 \uc124\uc815\ud560\uae4c? \ub0b4\ubd80\uc801\uc73c\ub85c\ub294 ProvideTextStyle \ucef4\ud3ec\uc800\ube14(\uc790\uccb4\uc801\uc73c\ub85c CompositionLocal\uc744 \uc0ac\uc6a9\ud568)\uc744 \uc0ac\uc6a9\ud558\uc5ec &#8220;\ud604\uc7ac&#8221; TextStyle\uc744 \uc124\uc815\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc608\ub97c\ub4e4\uba74 \ucef4\ud3ec\uc988\uc758 Button \ubc0f Text \ud074\ub798\uc2a4\ub4e4\uc774 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable\nfun Button(\n&nbsp; &nbsp; text: @Composable RowScope.() -&gt; Unit\n) {\n&nbsp; ...\n&nbsp; ProvideTextStyle(MaterialTheme.typography.button) { \/\/ \ud604\uc7ac \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c \uc9c0\uc815\n&nbsp; &nbsp; ...\n&nbsp; &nbsp; text()\n&nbsp; }\n}\n\n\n@Composable\nfun Text(\n&nbsp; &nbsp; style: TextStyle = LocalTextStyle.current \/\/ ProvideTextStyle\uc5d0\uc11c  get the value set by ProvideTextStyle\n) { ...<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c \ud14c\ub9c8\uc5d0 \uc801\uc6a9\ud558\uae30<\/h2>\n\n\n\n<p>\uc0c9\uc0c1\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \ud604\uc7ac \ud14c\ub9c8\uc5d0\uc11c TextStyles\ub97c \uac00\uc838\uc624\ub294 \uac83\uc774 \uac00\uc7a5 \uc88b\uace0, \uc791\uace0 \uc77c\uad00\ub41c \uc2a4\ud0c0\uc77c \uc138\ud2b8\ub97c \uc0ac\uc6a9\ud558\uace0 \uc720\uc9c0 \uad00\ub9ac\ud558\uae30 \uc27d\uac8c \ub9cc\ub4dc\ub294 \uac83\uc774 \uc88b\ub2e4. MaterialTheme.typography\ub294 MaterialTheme \ucef4\ud3ec\uc800\ube14\uc5d0 \uc124\uc815\ub41c Typography \uc778\uc2a4\ud134\uc2a4\ub97c \uac80\uc0c9\ud558\uc5ec \uc815\uc758\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Text(<br>&nbsp; style = MaterialTheme.typography.subtitle2<br>)<\/code><\/pre>\n\n\n\n<p>TextStyle\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud574\uc57c \ud558\ub294 \uacbd\uc6b0 copy\ub97c \uc0ac\uc6a9\ud558\uace0 (data class\uc758) \uc18d\uc131\uc744 \uc7ac\uc815\uc758\ud55c\ub2e4. \ub610\ub294 Text \ucef4\ud3ec\uc800\ube14\uc774 \uc5ec\ub7ec \uc2a4\ud0c0\uc77c \ub9e4\uac1c\ubcc0\uc218\ub97c \uc218\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uc5ec TextStyle\b\uc0c1\uc5d0 \ub36e\uc5b4\uc368\uc9c0\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Text(<br>&nbsp; text = \"Hello World\",<br>&nbsp; style = MaterialTheme.typography.body1.copy(<br>&nbsp; &nbsp; background = MaterialTheme.colors.secondary<br>&nbsp; )<br>)<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Text(<br>&nbsp; text = \"Hello World\",<br>&nbsp; style = MaterialTheme.typography.subtitle2,<br>&nbsp; fontSize = 22.sp \/\/ explicit size overrides the size in the style<br>)<\/code><\/pre>\n\n\n\n<p>\uc571\uc758 \ub9ce\uc740 \uc704\uce58\uc5d0\uc11c TextStyles \ud14c\ub9c8\ub97c \uc790\ub3d9\uc73c\ub85c \uc801\uc6a9\ud55c\ub2e4. \uc608\ub97c \ub4e4\uc5b4 TopAppBar\ub294 \uc81c\ubaa9(title)\uc744 h6\ub77c\ub294 \uc774\ub984\uc73c\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uace0, ListItem\uc740 \uae30\ubcf8 \ubc0f \ubcf4\uc870(secondary) \ud14d\uc2a4\ud2b8\ub97c subtitle1 \ubc0f body2\ub85c \uac01\uac01 \uc2a4\ud0c0\uc77c\ub9c1 \ud55c\ub2e4.<\/p>\n\n\n\n<p>\ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ud14c\ub9c8 \uc2a4\ud0c0\uc77c\uc744 \uc571\uc758 \ub098\uba38\uc9c0 \ubd80\ubd84\uc5d0 \uc801\uc6a9\ud574 \ubcf4\uc790. \uc81c\ubaa9\uc5d0 h6\uc744 \uc0ac\uc6a9\ud558\uace0 \uc791\uc131\uc790 \ubc0f \uba54\ud0c0\ub370\uc774\ud130\uc5d0 body2\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 FeaturedPost\uc5d0\uc11c subtitle2 \ubc0f \ud14d\uc2a4\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud5e4\ub354\ub97c \uc124\uc815\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable<br>fun Header(...) {<br>&nbsp; ...<br>&nbsp; Text(<br>&nbsp; &nbsp; text = text,<br>+ &nbsp; style = MaterialTheme.typography.subtitle2<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/33df571f8ff85c7f.png?hl=ko\" alt=\"33df571f8ff85c7f.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c<\/h2>\n\n\n\n<p>\uc77c\ubd80 \ud14d\uc2a4\ud2b8\uc5d0 \uc5ec\ub7ec \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud574\uc57c \ud558\ub294 \uacbd\uc6b0 AnnotatedString \ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8 \ubc94\uc704\uc5d0 SpanStyles\ub97c \ucd94\uac00\ud558\uc5ec \ub9c8\ud06c\uc5c5\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4. \ub3d9\uc801\uc73c\ub85c \ucd94\uac00\ud558\uac70\ub098 DSL \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec \ucf58\ud150\uce20\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>val text = buildAnnotatedString {<br>&nbsp; append(\"This is some unstyled text\\n\")<br>&nbsp; withStyle(SpanStyle(color = Color.Red)) {<br>&nbsp; &nbsp; append(\"Red text\\n\")<br>&nbsp; }<br>&nbsp; withStyle(SpanStyle(fontSize = 24.sp)) {<br>&nbsp; &nbsp; append(\"Large text\")<br>&nbsp; }<br>}<\/code><\/pre>\n\n\n\n<p>\uc571\uc758 \uac01 \uac8c\uc2dc\ubb3c\uc744 \uc124\uba85\ud558\ub294 \ud0dc\uadf8\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud55c\ub2e4. \ud604\uc7ac \uba54\ud0c0\ub370\uc774\ud130\uc758 \ub098\uba38\uc9c0 \ubd80\ubd84\uacfc \ub3d9\uc77c\ud55c \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uadf8\uac83\ub4e4\uc744 \uad6c\ubcc4\ud558\uae30 \uc704\ud574 overline \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c\uacfc \ubc30\uacbd\uc0c9\uc744 \uc0ac\uc6a9\ud560 \uac83\uc774\ub2e4. PostMetadata \ucef4\ud3ec\uc800\ube14\uc5d0 \ub2e4\uc74c\uc758 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>+ val tagStyle = MaterialTheme.typography.overline.toSpanStyle().copy(<br>+ &nbsp; background = MaterialTheme.colors.primary.copy(alpha = 0.1f)<br>+ )<br>post.tags.forEachIndexed { index, tag -&gt;<br>&nbsp; ...<br>+ withStyle(tagStyle) {<br>&nbsp; &nbsp; append(\" ${tag.toUpperCase()} \")<br>+ }<br>}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/95e883150e70b346.png?hl=ko\" alt=\"95e883150e70b346.png\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud14d\uc2a4\ud2b8\ub85c \uc791\uc5c5\ud560 \ub54c, Text \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud558\uace0, \ud14d\uc2a4\ud2b8 \uc785\ub825\uc744 \uc704\ud574 TextField \ubc0f OutlinedTextField\ub97c \uc0ac\uc6a9\ud55c\ub2e4 \uadf8\ub9ac\uace0 \ud14d\uc2a4\ud2b8\uc5d0 \ub2e8\uc77c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uae30 \uc704\ud574 TextStyle\uc744 \uc0ac\uc6a9\ud55c\ub2e4. AnnotatedString\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8\uc5d0 \uc5ec\ub7ec \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc774\uc804 \uc139\uc158\uc758 \uc0c9\uc0c1\uc5d0\uc11c \ubcf4\uc558\ub358 \uac83\ucc98\ub7fc, \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud558\ub294 \uba38\ud2f0\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\ub294 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud55c \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ud14c\ub9c8\ub97c \uc120\ud0dd\ud55c\ub2e4. \uc774\ub97c \uad6c\ud604\ud558\ub294 \uac83\uc740 \uc0c9\uc0c1\uc791\uc5c5\uc5d0\uc11c \ubd24\ub358 [&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\/45702"}],"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=45702"}],"version-history":[{"count":2,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45702\/revisions"}],"predecessor-version":[{"id":45715,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45702\/revisions\/45715"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}