[Week1] Codelab - part3

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 내의 각 하위 요소는 가로로 나란히 배치됩니다.

 

안드로이드 앱에 이미지 추가

1. Android 스튜디오에서 View > Tool Windows > Resource Manager를 클릭하거나 Project 창 옆에 있는 Resource Manager 탭을 클릭합니다.
2. +(모듈에 리소스 추가) > Import Drawables를 클릭합니다.
3. 파일 브라우저에서 다운로드한 이미지 파일을 선택한 다음 Open을 클릭합니다.
4. 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()

이미지 크기가 미리보기에서는 제대로 나오지만 에뮬레이터에는 꽉 차게 나오는 문제

-> 구글링 필요

 

퀴즈

1. 앱에서 리소스를 가져오고 만들고 관리하고 사용할 수 있는 도구 창은 무엇인가요?
   -> Resource Manager
2. 드로어블 이미지 리소스를 로드하는 데 사용되는 함수는 무엇인가요?
   -> painterResource() 함수
3. 음성 안내 지원에 사용되는 접근성 텍스트를 추가하는 데 사용되는 함수 매개변수는 무엇인가요?
   -> contentDescription