Jetpack Compose
Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 툴킷입니다. Compose는 적은 양의 코드, 강력한 도구 및 직관적인 Kotlin 기능으로 Android에서 UI 개발을 간소화하고 가속합니다. Compose를 사용하면 데이터를 받아서 UI 요소를 내보내는 함수, 즉 구성 가능한 함수라는 함수 집합을 정의하여 UI를 빌드할 수 있습니다.
Composable 함수
Composable 함수는 Compose에서 UI의 기본 빌드 블록입니다. Composable 함수의 특징은 다음과 같습니다.
- UI 일부를 설명합니다.
- 아무것도 반환하지 않습니다.
- 몇 개의 입력을 받아서 화면에 표시되는 내용을 생성합니다.
- 여러 UI 요소를 내보낼 수도 있습니다.
매개변수가 있는 주석
주석은 매개변수를 받을 수 있습니다. 매개변수는 주석을 처리하는 도구에 추가 정보를 제공합니다. 다음은 @Preview 주석에 매개변수가 있는 예와 매개변수가 없는 예입니다.

Composable 함수 예시
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BirthdayCardTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
}
}
}
}
}
@Composable
fun BirthdayGreetingWithText(message: String) {
Text(
text = message
)
}
@Preview(showBackground = false)
@Composable
fun BirthdayCardPreview() {
BirthdayCardTheme {
BirthdayGreetingWithText( "Happy Birthday Sam!")
}
}

글꼴 크기 변경
Text(
text = message,
fontSize = 36.sp
)
UI 계층 구조
UI 계층 구조는 포함에 기반합니다. 즉, 한 구성요소에 하나 이상의 구성요소를 포함할 수 있으며 상위 요소 및 하위 요소라는 용어가 사용되는 경우도 있습니다. 여기에서 컨텍스트는 상위 UI 요소가 하위 UI 요소를 포함하는 것이며 이 하위 UI 요소는 하위 UI 요소를 차례로 포함할 수 있습니다. 이 섹션에서는 상위 UI 요소 역할을 할 수 있는 열, 행, 상자 컴포저블에 관해 알아봅니다.
Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row, Box 컴포저블입니다.

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
Row{
Text(
text = message,
fontSize = 36.sp,
)
Text(
text = from,
fontSize = 24.sp,
)
}
}

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
Column {
Text(
text = message,
fontSize = 36.sp,
)
Text(
text = from,
fontSize = 24.sp,
)
}
}

요약
- Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 도구 키트입니다. Jetpack Compose는 더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 Android에서의 UI 개발을 간소화하고 가속합니다.
- 앱의 사용자 인터페이스(UI)는 화면에 표시되는 텍스트, 이미지, 버튼, 기타 여러 유형의 요소입니다.
- 구성 가능한 함수는 Compose의 기본 구성요소입니다. 구성 가능한 함수는 UI의 일부를 설명하는 함수입니다.
- 구성 가능한 함수는 @Composable 주석으로 주석 처리됩니다. 이 주석은 이 함수가 데이터를 UI로 변환한다는 것을 Compose 컴파일러에 알려줍니다.
- Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row, Box입니다. 이러한 요소는 컴포저블 콘텐츠를 사용하는 구성 가능한 함수이므로 내부에 항목을 배치할 수 있습니다. 예를 들어, Row 내의 각 하위 요소는 가로로 나란히 배치됩니다.
안드로이드 앱에 이미지 추가
- Android 스튜디오에서 View > Tool Windows > Resource Manager를 클릭하거나 Project 창 옆에 있는 Resource Manager 탭을 클릭합니다.
- +(모듈에 리소스 추가) > Import Drawables를 클릭합니다.
- 파일 브라우저에서 다운로드한 이미지 파일을 선택한 다음 Open을 클릭합니다.
- Android 스튜디오에 이미지의 미리보기가 표시됩니다. Qualifier Type 드롭다운 목록에서 Density를, Value 목록에서 No Density를 선택합니다.
Android 기기는 다양한 화면 크기(예: 휴대전화, 태블릿, TV)로 제공되며 이러한 화면은 픽셀 크기도 다릅니다. 즉, 한 기기에서는 제곱인치당 160픽셀을 사용하지만 다른 기기에서는 같은 공간에 480픽셀을 사용합니다. 이러한 픽셀 밀도의 차이를 고려하지 않으면 시스템이 이미지를 확대하여 흐릿한 이미지, 메모리를 과도하게 사용하는 큰 이미지 또는 부적절한 크기의 이미지를 얻을 수 있습니다.
Android 시스템에서 처리할 수 있는 것보다 큰 이미지의 크기를 조절하면 메모리 부족 오류가 발생합니다. 사진 및 배경 이미지(예: 현재 이미지 androidparty.png)의 경우 drawable-nodpi 폴더에 배치해야 크기 조절 동작이 중지됩니다.
Box Layout
Box 레이아웃은 Compose의 표준 레이아웃 요소 중 하나입니다. Box 레이아웃을 사용하여 요소를 서로 위에 쌓습니다. Box 레이아웃을 사용하면 포함된 요소의 특정 정렬도 구성할 수 있습니다.

텍스트 정렬 및 패딩 추가
wrapContentWidth() 함수에 Alignment.Start 인수를 전달하면 텍스트 컴포저블 또는 하위 요소가 화면의 시작 부분 또는 상위 요소에 맞춰 정렬됩니다.

메시지 Text 컴포저블은 다음 코드 스니펫과 같습니다.
Text(
text = message,
fontSize = 36.sp,
modifier = Modifier
.fillMaxWidth()
.wrapContentWidth(Alignment.Start)
)
패딩
패딩은 수정자로 사용되므로 모든 컴포저블에 적용할 수 있습니다. 컴포저블의 각 면의 경우 padding 수정자는 패딩 값을 정의하는 선택적 인수를 사용합니다.

요약
- Android 스튜디오의 Resource Manager 탭을 사용하면 이미지와 기타 리소스를 추가하고 구성할 수 있습니다.
- Image 컴포저블은 앱에 이미지를 표시하는 UI 요소입니다.
- Image 컴포저블에는 콘텐츠 설명이 있어야 앱의 접근성이 높아집니다.
- 생일 축하 메시지와 같이 사용자에게 표시되는 텍스트는 앱을 다른 언어로 쉽게 번역할 수 있도록 문자열 리소스로 추출해야 합니다.
Practice
Compose Article
한 줄마다 글씨를 한 칸에 꽉 차게 만드는 방법을 모르겠다. 키워드 검색을 어떻게 할지 몰라서 못 찾았는데 다시 구글링해 봐야겠다.
=> Justify로 해결
Compose Quadrant
사분면에 색상 지정
=> backgroundColor = Color.Yellow 이렇게 바로 써주면 됨
사분면에 padding을 주어야 함
=> Column에 Modifier 적용
사분면 안의 글씨 가운데 정렬
=> Column에 다음 두 속성을 주어 정렬
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
/*horizontal은 Alignment, vertical은 Arrangement임*/
Task Completed
이미지 크기가 화면에 꽉차는 문제
(Column 안에 Alignment.CenterHorizontally와 Arrangement.Center 속성만 준 상황)
=> Column에 Modifier의 fillMax() 함수을 부여하여 해결
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
이미지 크기가 미리보기에서는 제대로 나오지만 에뮬레이터에는 꽉 차게 나오는 문제
-> 구글링 필요
퀴즈
- 앱에서 리소스를 가져오고 만들고 관리하고 사용할 수 있는 도구 창은 무엇인가요?
-> Resource Manager - 드로어블 이미지 리소스를 로드하는 데 사용되는 함수는 무엇인가요?
-> painterResource() 함수 - 음성 안내 지원에 사용되는 접근성 텍스트를 추가하는 데 사용되는 함수 매개변수는 무엇인가요?
-> contentDescription