#1 나만 헷갈렸나? Jackpot Compose 공부 중 메모들

Surface

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

기본 레이아웃

1. Column & Row

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables

 

Column

verticalArrangement 및 horizontalAlignment 설정

https://developer.android.com/codelabs/basic-android-kotlin-compose-add-images

 

 

Row

 horizontalArrangement 및 verticalAlignment 설정

https://developer.android.com/codelabs/basic-android-kotlin-compose-add-images

 

Arrangement vs Alignment

구분	Arrangement	Alignment
의미	간격을 조절 (여러 개 아이템 간의 위치)	정렬을 조절 (축 기준으로 어디에 붙일지)
적용 대상	여러 개의 아이템들 사이	각 아이템의 정렬 방향

 

Box

Box 레이아웃을 사용하여 요소를 서로 위에 쌓습니다. Box 레이아웃을 사용하면 포함된 요소의 특정 정렬도 구성할 수 있습니다.

예) 이미지를 배경으로 쓰고 싶을 때

https://developer.android.com/codelabs/basic-android-kotlin-compose-add-images

 

 

텍스트 정렬

Text(
  text = from,
  fontSize = 36.sp,
  modifier = Modifier
   .padding(16.dp)
   .align(alignment = Alignment.End)
)

https://developer.android.com/codelabs/basic-android-kotlin-compose-add-images

 

이미지 추가

1. View > Tool Windows > Resource Manager(보기 > 도구창 > Resource Manager)를 클릭하거나 Project(프로젝트) 창 옆에 있는 Resource Manager 탭을 클릭
2. +  > Import Drawables
3. QUALIFIER TYPE 드롭다운 목록에서 Density를 선택
4. VALUE 목록에서 No Density를 선택
5. Project 탭 > app > res > drawable에 추가한 이미지 확인

주의! Android 시스템에서 처리할 수 있는 것보다 큰 이미지의 크기를 조절하면 메모리 부족 오류가 발생합니다. drawable-nodpi 폴더에 배치해야 크기 조절 동작이 중지됩니다.

 

이미지 조정

Image(
    painter = image,
    contentDescription = null,
    contentScale = ContentScale.Crop,
    alpha = 0.5F
)

 

 

참고

기본 레이아웃 만들기  |  Android Basics Compose - First Android app  |  Android Developers