[Google Compose Camp] Jetpack Compose Unit 1/BirthdayCard

📢Preview() 함수는 안드로이드 스튜디오에서 design 창에서 미리보기 화면

📢setContent 함수 안이 빌드했을 때 보이는 실제 화면

Pathway2. Greeting Card 프로젝트

📢 design 창에서 기기의 전체 화면을 보고 싶을 때

@Preview( showSystemUi = true)

onCreate( ) 함수

: 이 앱의 진입점이며 다른 함수를 호출하여 사용자 인터페이스를 빌드한다. Android 앱에서는 onCreate( ) 함수가 main( ) 함수의 역할을 한다.

setContent( ) 함수

: onCreate( ) 함수 안에 있으며 레이아웃을 정의하는 데 사용된다. @Composable 주석으로 표시된 모든 함수는 setContent( ) 함수 또는 다른 구성 가능한 함수에서 호출할 수 있습니다. 주석은 Jetpack Compose에서 이 함수가 UI를 생성하는 데 사용된다고 Kotlin 컴파일러에 알립니다.

구성 가능한 함수

구성 가능한 함수는 일반 함수와 비슷하지만 몇 가지 차이점이 있다.

• 함수 이름은 대문자로 표기
• 함수 앞에 @Composable 주석을 추가
• @Composable 함수는 아무것도 반환할 수 없다.

DefaultPreview() 함수

미리보기 함수가 되려면 @Preview 주석을 추가해야 한다. 전체 앱을 빌드하지 않고도 앱이 어떻게 표시되는지 확인할 수 있는 함수이다. @Preview 주석은 showBackground라는 매개변수를 사용하고 showBackground가 true로 설정되면 앱 미리보기에 배경이 추가된다.

Surface 배경 색상 변경

Surface는 배경 색상이나 테두리와 같은 모양을 개발자가 변경할 수 있는 UI 섹션을 나타내는 컨테이너이다.

배경 색상 변경하는 방법

1. 배경 색상을 변경하고 싶은 텍스트를 드래그 한 후
2. alt + Enter > Surround with widget > Surround with container 를 누르면 Box 컨테이너가 추가된다.
   Box 컨테이너는 기본적으로 제공되는 컨테이너이고 다른 컨테이너 유형으로 변경할 수 있다.

Surface(color = Color.Blue) {
        Text(text = "Hello My name is $name!")
}

Modifier

modifier = Modifier.fillMaxSize() # 화면 전체 채우기

modifier = Modifier.fillMaxHeight() # 높이 전체 채우기

modifier = Modifier.fillMaxHeight() # 높이 전체 채우기

modifier = Modifier.padding(24.dp)

📢 Color 함수 부분 에러날 때

import androidx.compose.ui.graphics.Color

을 import하고도 빨간 밑줄이 뜬다면 Color뒤에 마침표를 붙이고 원하는 색상을 지정해주면 사라진다.

Pathway3-1. GreetingCard 프로젝트

Jetpack Compose

Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 툴킷입니다. Compose는 적은 양의 코드, 강력한 도구 및 직관적인 Kotlin 기능으로 Android에서 UI 개발을 간소화하고 가속합니다. Compose를 사용하면 데이터를 받아서 UI 요소를 내보내는 함수, 즉 구성 가능한 함수라는 함수 집합을 정의하여 UI를 빌드할 수 있습니다.

구성 가능한 함수

구성 가능한 함수는 Compose에서 UI의 기본 빌드 블록입니다.
구성 가능한 함수의 특징은 다음과 같습니다.

• 구성 가능한 함수는 @Composable 주석으로 주석 처리됩니다. 모든 구성 가능한 함수에는 이 주석이 있어야 합니다.
• UI 일부를 설명합니다.
• 아무것도 반환하지 않습니다.
• 몇 개의 입력을 받아서 화면에 표시되는 내용을 생성합니다.
• 여러 UI 요소를 내보낼 수도 있습니다.

구성 가능한 함수 이름

아무것도 반환하지 않으면서 @Composable 주석을 달고 있는 구성 가능한 함수는 파스칼 표기법을 사용하여 이름을 지정해야 합니다.
Compose 함수 이름의 특징은 다음과 같습니다.

명사여야 함: DoneButton()
동사 또는 동사구이면 안 됨: DrawTextField()
명사화된 전치사이면 안 됨: TextFieldWithLink()
형용사이면 안 됨: Bright()
부사이면 안 됨: Outside()
명사 앞에는 명사를 설명하는 형용사를 붙일 수도 있음: RoundIcon()

매개변수가 있는 주석

다음은 @Preview 주석에 매개변수가 없는 예

---

배경을 미리 보여주는 주석

---

미리보기 제목으로 주석 달기

---

미리보기 제목 및 시스템 UI(휴대전화 화면)를 포함하는 주석

Jetpack Compose의 리소스

항상 프로젝트의 res/ 디렉터리에 있는 특정 하위 디렉터리에 각 유형의 리소스를 배치해야 한다.

리소스는 코드에서 사용하는 추가 파일과 정적인 콘텐츠입니다. 예를 들어 비트맵, 사용자 인터페이스 문자열, 애니메이션 지침 등이 있습니다.

Jetpack Compose는 Android 프로젝트에 정의된 리소스에 액세스할 수 있습니다. 프로젝트의 R 클래스에서 생성된 리소스 ID로 리소스에 액세스할 수 있습니다.

이미지와 문자열 등 애플리케이션 리소스는 독립적인 유지관리가 가능하도록 항상 코드로부터 분리해야 합니다. Android는 런타임에 현재 구성을 근거로 적절한 리소스를 사용합니다. 예를 들어 화면 크기에 따라 다른 UI 레이아웃을 제공하거나 언어 설정에 따라 다른 문자열을 제공할 수 있습니다.

painterResource() 함수는 드로어블 이미지 리소스를 로드하고 리소스 ID(이 경우 R.drawable.androidparty)를 인수로 사용합니다.

painterResource() 함수를 호출한 후 Image 컴포저블을 추가하고 image를 이름이 지정된 painter 인수로 전달합니다.

📢 Image 함수 부분 에러날 때

import androidx.compose.foundation.Image

계속 에러가 난다면 contentDescription = null 추가

painterResource( ), 이미지 리소스

painterResource() 함수는 드로어블 이미지 리소스를 로드하고 리소스 ID(이 경우 R.drawable.androidparty)를 인수로 사용합니다.

val image = painterResource(R.drawable.androidparty)
    Image(
        painter = image,
        contentDescription = null
    )

Box 레이아웃 추가

❌ ??? 갑분 패딩 ??? ❌
패딩은 수정자로 사용되므로 모든 컴포저블에 적용할 수 있습니다. 컴포저블의 각 면의 경우 padding 수정자는 패딩 값을 정의하는 선택적 인수를 사용합니다.

Column, Row 및 Box는 컴포저블 콘텐츠를 인수로 사용하는 구성 가능한 함수이므로 이러한 레이아웃 요소 내에 항목을 배치할 수 있습니다.
Row 컴포저블 내의 각 하위 요소는 한 행에 가로로 나란히 배치.

Text(
     text = from,
     fontSize = 24.sp,
     modifier = Modifier
          .fillMaxWidth()
          .wrapContentWidth(Alignment.End)
          .padding(start = 16.dp, end = 16.dp)
 )

-문자열

하드코딩 문자열은 앱 코드에 직접 작성된 문자열입니다. 하드코딩 문자열로 인해 앱을 다른 언어로 번역하기가 더 어렵고 앱의 다른 위치에서 문자열을 재사용하기가 더 힘듭니다. 문자열을 리소스 파일로 추출하여 이러한 문제를 해결할 수 있습니다. 코드에서 문자열을 하드코딩하는 대신 문자열을 파일에 넣고 문자열 리소스의 이름을 지정한 후 문자열을 사용할 때마다 이름을 사용합니다. 이름은 문자열을 변경하거나 다른 언어로 번역하더라도 동일하게 유지됩니다.
1. 문자열을 드래그한 후 전구 > Extract string resource
Resource name 에는 쓰일 이름을 적고 Resource value에는 실제 문자열 입력
이렇게 하면 하드코딩 문자열이 stringResource() 함수로 대체된다.