2 분 소요

UI (User Interface) : 사용자 인터페이스

오류 수정

Update this project to use a newer compileSdk of at least 34, for example 34.

해당 오류 발생시 버젼 정보 올리면 해결된다고 해서 올렸는데 계속 빌드가 되지 않았다. 원인을 찾아보니 변경 후 Sync (동기화) 작업을 진행 해줘했다

동기화

’’’

출처

https://www.youtube.com/watch?v=WUbOREuoOtk&ab_channel=Hintofeverything ‘’’

Jetpack Compose

안드로이드 UI를 빌드하기위해 사용하는 최신 툴킷

주석

추석 처리는 문자 @ 접두사를 추가하여 사용 주석에는 매개 변수가 있다.

주석에 종류에는 @Composable, @Preview 주석이 있따.

구성 가능한 함수는 @Composable 주석 처리

모든 구성 함수에는 이주석이 있어야합니다 이 주석을 통해 이함수가 데이터를 UI로 변환하게 되어있다는것을 Compose 컴파일러에 알립니다.

’’’ # 컴파일러 작성한 코드를 한 줄씩 보고 컴퓨터가 이해할 수 있는 내용(기계어)으로 변환하는 프로그램 ‘’’

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

구성가능한 함수 이름

  1. 명사여야 함: DoneButton()
  2. 동사 또는 동사구이면 안 됨: DrawTextField()
  3. 명사화된 전치사이면 안 됨: TextFieldWithLink()
  4. 형용사이면 안 됨: Bright()
  5. 부사이면 안 됨: Outside()
  6. 명사 앞에는 명사를 설명하는 형용사를 붙일 수도 있음: RoundIcon()
@Preview 주석을 지정하여 BirthdayCardPreview() 함수에 추가한 코드는 Android 스튜디오의 Design(디자인) 창에서 미리보기를 할 때만 사용합니다. 이러한 변경사항은 앱에 반영되지 않습니다. 

Text(
    text = message,
    fontSize = 100.sp
)

확장 가능한 픽셀(SP)은 글꼴 크기의 측정 단위 androidx.compose.ui.unit.sp 추가해줘야한다

참고: AndroidX(Android 확장 프로그램) 라이브러리에는 핵심 기능을 제공하여 앱 개발을 가속하는 데 도움이 되는 라이브러리 및 클래스 집합이 포함되어 있습니다. androidx 패키지를 사용하여 클래스, 속성 및 기타 아티팩트에 액세스할 수 있습니다.
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message,
        fontSize = 100.sp,
        lineHeight = 116.sp,
    )
}

행열 행 : 칼럼, 세로, Column , 객체 열 : 열 ,가로, Row, 속성

후행 람다 문법

Row {
    Text("First Column")
    Text("Second Column")
}

구성 가능한 함수 Row 에 괄호 대신 중괄호가 사용되었습니다. 이를 후행 람다 문법 이라고 합니다.

마지막 매개변수가 함수일떄 함수를 매개변수로 함수에 전달하는 특수한 문법을 제공합니다. 함수를 이 매개변수로 전달하면 후행 람다 문법을 사용할 수 있습니다.

요약

  1. Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 도구 키트입니다. Jetpack Compose는 더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 Android에서의 UI 개발을 간소화하고 가속합니다.

  2. 앱의 사용자 인터페이스(UI)는 화면에 표시되는 텍스트, 이미지, 버튼, 기타 여러 유형의 요소입니다.

  3. 구성 가능한 함수는 Compose의 기본 구성요소입니다. 구성 가능한 함수는 UI의 일부를 설명하는 함수입니다.

  4. 구성 가능한 함수는 @Composable 주석으로 주석 처리됩니다. 이 주석은 이 함수가 데이터를 UI로 변환한다는 것을 Compose 컴파일러에 알려줍니다.

  5. Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row,, Box입니다. 이러한 요소는 컴포저블 콘텐츠를 사용하는 구성 가능한 함수이므로 내부에 항목을 배치할 수 있습니다. 예를 들어, Row 내의 각 하위 요소는 가로로 나란히 배치됩니다.

출처

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=ko&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-3%3Fhl%3Dko%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-text-composables#1

댓글남기기