{"id":45709,"date":"2021-11-19T19:47:01","date_gmt":"2021-11-19T10:47:01","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45709"},"modified":"2021-11-19T19:47:03","modified_gmt":"2021-11-19T10:47:03","slug":"jetpack-compose-theming-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-%ec%8a%a4%ed%83%80%ec%9d%bc","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45709","title":{"rendered":"Jetpack Compose theming – \ucef4\ud3ec\ub10c\ud2b8 “\uc2a4\ud0c0\uc77c”"},"content":{"rendered":"\n

\ucef4\ud3ec\uc988\ub294 Android View \uc2a4\ud0c0\uc77c \ub610\ub294 CSS \uc2a4\ud0c0\uc77c\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8 \uc2a4\ud0c0\uc77c\uc744 \ucd94\ucd9c\ud558\ub294 \uba85\uc2dc\uc801\uc778 \ubc29\ubc95\uc744 \uc81c\uacf5\ud558\uc9c0 \uc54a\ub294\ub2e4. \ubaa8\ub4e0 \ucef4\ud3ec\uc988 \ucef4\ud3ec\ub10c\ud2b8\ub294 Kotlin\uc73c\ub85c \uc791\uc131\ub418\ubbc0\ub85c \ub3d9\uc77c\ud55c \ubaa9\ud45c\ub97c \ub2ec\uc131\ud558\ub294 \ub2e4\ub978 \ubc29\ubc95\uc774 \uc788\ub2e4. \ub300\uc2e0 \ucee4\uc2a4\ud130\ub9c8\uc774\uc988 \ub41c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc758 \uc790\uccb4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub9cc\ub4e4\uace0 \uc571 \uc804\uccb4\uc5d0\uc11c \uc0ac\uc6a9\ud558\uc790.<\/p>\n\n\n\n

\uc6b0\ub9ac\ub294 \uc774\ubbf8 \uc6b0\ub9ac \uc571\uc5d0 \uc544\ub798\uc640 \uac19\uc740 \ucf54\ub4dc \uc791\uc5c5\ub4e4\uc744 \ud574\uc624\uace0 \uc788\ub294 \uc911\uc774\ub2e4.<\/p>\n\n\n\n

@Composable
fun Header(
  text: String,
  modifier: Modifier = Modifier
) {
  Surface(
    color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f),
    contentColor = MaterialTheme.colors.primary,
    modifier = modifier.semantics { heading() }
  ) {
    Text(
      text = text,
      style = MaterialTheme.typography.subtitle2,
      modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp, vertical = 8.dp)
    )
  }
}<\/code><\/pre>\n\n\n\n
Header \ucef4\ud3ec\uc800\ube14\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc571 \uc804\uccb4\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c Text\ub2e4.<\/p>\n\n\n\n
\uc6b0\ub9ac\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub354 \ub0ae\uc740 \uc218\uc900\uc758 \ucef4\ud3ec\ub10c\ud2b8(=\ube4c\ub529\ube14\ub85d)\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc74c\uc744 \ud655\uc778\ud588\uace0, \uc774\ub7ec\ud55c \ub3d9\uc77c\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uba38\ud2f0\ub9ac\uc5bc\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \uc6b0\ub9ac\ub294 Button\uc774 ProvideTextStyle \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc804\ub2ec\ub41c \ucf58\ud150\uce20\uc758 \uae30\ubcf8 \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c\uc744 \uc124\uc815\ud558\ub294 \uac83\uc744 \ubd24\ub2e4. \ub611\uac19\uc740 \uba54\ucee4\ub2c8\uc998\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc790\uc2e0\ub9cc\uc758 \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c\uc744 \uc124\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
@Composable
fun LoginButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonConstants.defaultButtonColors(
            backgroundColor = MaterialTheme.colors.secondary
        ),
        onClick = onClick,
        modifier = modifier
    ) {
        ProvideTextStyle(...) { \/\/ set our own text style
            content()
        }
    }
}<\/code><\/pre>\n\n\n\n
\uc774 \uc608\uc81c\uc5d0\uc11c\ub294 \ud45c\uc900 Button \ud074\ub798\uc2a4\ub97c \ub798\ud551\ud558\uc5ec LoginButton\uc758 “\uc2a4\ud0c0\uc77c”\uc744 \ub9cc\ub4e4\uace0, \ub2e4\ub978 backgroundColor \ubc0f \ud14d\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c\uacfc \uac19\uc740 \ud2b9\uc815 \uc18d\uc131\uc744 \uc9c0\uc815\ud55c\ub2e4.<\/p>\n\n\n\n
\ub610\ud55c \uae30\ubcf8\uc801\uc778 \uc2a4\ud0c0\uc77c\uc774\ub780 \uac1c\ub150 \uc5c6\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 \ud0c0\uc785\uc758 \uae30\ubcf8 \uc678\ud615\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud558\ub294 \ubc29\ubc95\uc774 \uc788\ub2e4. \ub2e4\uc2dc \ub9d0\ud558\uc790\uba74, \ub77c\uc774\ube0c\ub7ec\ub9ac \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac10\uc2f8\uace0 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud558\ub294 \uc790\uc2e0\ub9cc\uc758 \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc744 \ub9cc\ub4e4\uace0\uc790 \ud558\ub294 \ubaa9\uc801\uc744 \uc774\ub8f0 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \uc571 \uc804\uccb4\uc5d0\uc11c \ubaa8\ub4e0 \ubc84\ud2bc\uc758 \ubaa8\uc591\uc744 \ucee4\uc2a4\ud140\ud558\uace0 \uc2f6\uc9c0\ub9cc \ub2e4\ub978(\ubc84\ud2bc\uc774 \uc544\ub2cc) \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\ub294 small shape \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud558\uace0 \uc2f6\uc9c0 \uc54a\ub2e4\uace0 \uac00\uc815\ud574 \ubcf4\uc790. \uc774\ub97c \ub2ec\uc131\ud558\ub824\uba74 \uc790\uc2e0\ub9cc\uc758 \ucef4\ud3ec\uc800\ube14\uc744 \ub9cc\ub4e4\uace0 \ub3c4\ucc98\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
@Composable\nfun AcmeButton(\n  \/\/ \uc18c\ube44\uc790\uac00 \ubcc0\uacbd\ud560 \uc218 \uc788\ub294 \ubc84\ud2bc \ub9e4\uac1c\ubcc0\uc218\ub97c \ub178\ucd9c\ud55c\ub2e4.\n) {\n  val acmeButtonShape: Shape = ...\n  Button(\n    shape = acmeButtonShape,\n    \/\/ \ub2e4\ub978 \ub9e4\uac1c\ubcc0\uc218\ub4e4\n  )\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\ucef4\ud3ec\uc988\ub294 Android View \uc2a4\ud0c0\uc77c \ub610\ub294 CSS \uc2a4\ud0c0\uc77c\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8 \uc2a4\ud0c0\uc77c\uc744 \ucd94\ucd9c\ud558\ub294 \uba85\uc2dc\uc801\uc778 \ubc29\ubc95\uc744 \uc81c\uacf5\ud558\uc9c0 \uc54a\ub294\ub2e4. \ubaa8\ub4e0 \ucef4\ud3ec\uc988 \ucef4\ud3ec\ub10c\ud2b8\ub294 Kotlin\uc73c\ub85c \uc791\uc131\ub418\ubbc0\ub85c \ub3d9\uc77c\ud55c \ubaa9\ud45c\ub97c \ub2ec\uc131\ud558\ub294 \ub2e4\ub978 \ubc29\ubc95\uc774 \uc788\ub2e4. \ub300\uc2e0 \ucee4\uc2a4\ud130\ub9c8\uc774\uc988 \ub41c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc758 \uc790\uccb4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub9cc\ub4e4\uace0 \uc571 \uc804\uccb4\uc5d0\uc11c \uc0ac\uc6a9\ud558\uc790. \uc6b0\ub9ac\ub294 \uc774\ubbf8 \uc6b0\ub9ac \uc571\uc5d0 \uc544\ub798\uc640 \uac19\uc740 \ucf54\ub4dc \uc791\uc5c5\ub4e4\uc744 \ud574\uc624\uace0 \uc788\ub294 \uc911\uc774\ub2e4. Header \ucef4\ud3ec\uc800\ube14\uc740 \uae30\ubcf8\uc801\uc73c\ub85c […]<\/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\/45709"}],"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=45709"}],"version-history":[{"count":2,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45709\/revisions"}],"predecessor-version":[{"id":45717,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45709\/revisions\/45717"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}