[Android]기존 xml 코드를 Compose로 마이그레이션 하며 참고할 것

계속해서 추가해 갈 예정

---

1. Color는 xml의 value가 아닌 코틀린 코드로 관리

• 기존 사용법

      <color name="bbdefb">#bbdefb</color>
      <color name="018786">#018786</color>

• Compose 사용법

      val BBDEFB = Color(0xffbbdefb)
      val Color018786 = Color(0xff018786)

• 피드백
  Kotlin 변수명 규칙에 따라 숫자로 시작하는 이름을 사용할 수 없으므로, 018786을 Color018786으로 변경했다. 변수명을 명확하게 하기 위해 'Color'라는 접두사를 추가했다. Compose에서는 Color 객체를 직접 Kotlin 코드에서 정의하므로 XML 파일 대신 코드에서 관리하는 것이 좋다.

---

2. drawable의 xml 파일을 ImageVector로 변경

• 기존 사용법

      <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
          <path android:fillColor="@android:color/white" android:pathData="M12,2C6.47,2 2,6.47 2,12s4.47,10 10,10 10,-4.47 10,-10S17.53,2 12,2zM17,15.59L15.59,17 12,13.41 8.41,17 7,15.59 10.59,12 7,8.41 8.41,7 12,10.59 15.59,7 17,8.41 13.41,12 17,15.59z"/>
      </vector>

• Compose 사용법

      import androidx.compose.foundation.Image
      import androidx.compose.foundation.layout.Box
      import androidx.compose.foundation.layout.padding
      import androidx.compose.runtime.Composable
      import androidx.compose.ui.Modifier
      import androidx.compose.ui.graphics.Color
      import androidx.compose.ui.graphics.SolidColor
      import androidx.compose.ui.graphics.vector.ImageVector
      import androidx.compose.ui.graphics.vector.path
      import androidx.compose.ui.tooling.preview.Preview
      import androidx.compose.ui.unit.dp
      import kotlin.Suppress
  
      val BaselineCancel24: ImageVector
          get() {
              if (_BaselineCancel24 != null) {
                  return _BaselineCancel24!!
              }
              _BaselineCancel24 = ImageVector.Builder(
                  name = "BaselineCancel24",
                  defaultWidth = 24.dp,
                  defaultHeight = 24.dp,
                  viewportWidth = 24f,
                  viewportHeight = 24f
              ).apply {
                  path(fill = SolidColor(Color(0xFF000000))) {
                      moveTo(12f, 2f)
                      curveTo(6.47f, 2f, 2f, 6.47f, 2f, 12f)
                      reflectiveCurveToRelative(4.47f, 10f, 10f, 10f)
                      reflectiveCurveToRelative(10f, -4.47f, 10f, -10f)
                      reflectiveCurveTo(17.53f, 2f, 12f, 2f)
                      close()
                      moveTo(17f, 15.59f)
                      lineTo(15.59f, 17f)
                      lineTo(12f, 13.41f)
                      lineTo(8.41f, 17f)
                      lineTo(7f, 15.59f)
                      lineTo(10.59f, 12f)
                      lineTo(7f, 8.41f)
                      lineTo(8.41f, 7f)
                      lineTo(12f, 10.59f)
                      lineTo(15.59f, 7f)
                      lineTo(17f, 8.41f)
                      lineTo(13.41f, 12f)
                      lineTo(17f, 15.59f)
                      close()
                  }
              }.build()
  
              return _BaselineCancel24!!
          }
  
      @Suppress("ObjectPropertyName")
      private var _BaselineCancel24: ImageVector? = null
  
      @Preview(showBackground = true)
      @Composable
      private fun BaselineCancel24Preview() {
          Box(modifier = Modifier.padding(12.dp)) {
              Image(imageVector = BaselineCancel24, contentDescription = null)
          }
      }

• 피드백
  기존의 vector 파일을 Compose에서 ImageVector로 변환하는 방식이다. 벡터 이미지를 Kotlin 코드에서 관리할 수 있고, ImageVector.Builder를 사용한다. Valkyrie - SVG to ImageVector와 같은 플러그인을 통해 XML 벡터를 변환할 수 있다.

---

3. Theme는 xml이 아닌 코드로 관리

• 기존 사용법

      <style name="DefaultTitleTextStyle" parent="TextAppearance.AppCompat">
          <item name="android:textSize">@dimen/DefaultTitle</item>
          <item name="android:textStyle">bold</item>
      </style>

• Compose 사용법

      @Composable
      fun defaultTitleTextStyle() = TextStyle(
          fontSize = dimensionResource(R.dimen.DefaultTitle).sp(),
          fontWeight = FontWeight.Bold
      )

• 피드백
  Compose에서는 TextStyle을 직접 정의하고, dimensionResource를 통해 dimen 값에 접근할 수 있다. 이는 기존 XML 스타일 정의와 유사하나, Kotlin 코드를 통해 동적으로 스타일을 관리할 수 있는 장점이 있다.