Unit1- Jetpack Compose란 무엇인가요?

Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 툴킷이다.

Compose를 사용하면 데이터를 받아서 UI요소를 내보내는 함수인 Composable 함수를 정의하여 UI를 빌드할 수 있다. 

compoable 함수는 항상 @Composable 주석이 있어야 한다. 

이 주석을 통해 이 함수가 데이터를 UI로 변환하게 되어 있다는 것을 Compose 컴파일러에 알린다. 

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

compoable 함수

- 매개변수를 허용하여 앱 로직이 UI를 설명하거나 수정할 수 있게 해준다

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

에서는 UI요소가 String을 허용하므로 사용자에게 이름으로 인사할 수 있다.

 

- 함수는 아무것도 반환하지 않는다. UI를 내보내는 composable 함수는 UI요소를 구성하는 대신 원하는 화면 상태를 기술하므로 반환할 내용이 없다. 즉 composable 함수는 UI를 기술하기만 하며 UI를 구성하거나 만들지는 않으므로 반환할 항목이 없다. 

 

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BirthdayCardTheme {
        Greeting("Android")
    }
}

composable 함수는 다른 composable 함수를 호출할 수 있다. 

 

composable 함수의 이름 : 파스칼 표기법 : 복합어에서 각 단어의 첫 글자를 대문자로 표기 (vs 카멜 표기법: 첫 번째 단어는 대문자로 쓰지 않음)

 

Design창

composable 함수는 함수를 미리 볼 수 있도록 매개변수의 기본값을 제공해야한다.

Greeting () 함수를 직접 미리 볼 수 는 없다!   ->>>>>>>>>. 와이?  

적절한 매개 변수를 사용해서 Greeting() 함수를 호출하는 다른 함수를 추가해야한다. 

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
   BirthdayCardTheme {
       Greeting("Android")
   }
}

[실습 ]

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.birthdaycard.ui.theme.BirthdayCardTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BirthdayCardTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                }
            }
        }
    }
}

@Composable
fun BirthdayGreetingWithText(message: String) {
    Text(
        text = message
    )
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardTPreview() {
    BirthdayCardTheme {
        BirthdayGreetingWithText(message = "Happy Birthday sunghyeon!")
    }
}

글꼴 크기 변경하기 

sp는 글꼴 크기의 측정 단위이다. Android앱 내의 UI요소는 두 가지 측정 단위를 사용하는데 

1) dp  : 레이아웃에 사용

2) sp : dp단위와 크기가 동일하지만, 사용자가 휴대전화 설정에서 선택한 선호하는 텍스트 크기에 따라 크기가 조절된다. 

 

 

다른 텍스트 요소 추가하기 

Text( ) 추가

 

9. 행과 열에 텍스트 요소 정렬 

UI 계층 구조

UI 계층 구조는 포함에 기반한다. 한 구성 요소에 하나 이상의 구성 요소를 포함할 수 있으며 상위 요소 및 하위 요소라는 용어가 사용되는 경우가 있다.  

context는 상위 UI 요소가 하위 UI 요소를 포함하는 것 ,, 이 하위 UI 요소는 하위 UI요소를 차례로 포함할 수 있다.

이 섹션에서 상위 UI 요소 역할을 할 수 있는 열 , 행 , box  composable에 관해 알아보자 

 

Compose의 세 가지 기본 표준 레이아웃 요소는 Column , Row, Box 컴포저블이다. 

Column, Row, Box는 Composable 콘텐츠를 인수로 사용하는 composable 함수 이므로 이러한 레이아웃 요소 내에 항목을 배치 할 수 있다. 

Row 컴포저블 내의 각 하위 요소는 한 행에 가로로 나란히 배치된다. 

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

 

후행 람다 문법 -> ???????????

Composable 함수 Row 에 괄호 돼신 중괄호가 사용되었다. 위에 보면...  이를 후행 람다 문법이라고 한다.

 

Kotlin은 마지막 매개변수가 함수일 때 함수를 매개변수로 함수에 전달하는 특수한 문법을 제공한다. 

함수를 이러한 매개 변수로 전달하려면 후행 람다 문법을 사용하면 된다.

함수를 괄호 안에 함수 이름과 함께 넣는 대신 함수 이름 뒤에 괄호를 넣는다. 

 

예시 > 구성가능한 함수 Row() 의 마지막 매개변수는 하위 UI요소를 내보내는 함수인 content 매개변수이다. 

텍스트 요소 세 개가 포함된 행을 만든다고 가정 

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

content 매개변수는 함수 서명의 마지막 매개변수이며 람다 표현식으로 값을 전달하므로

다음과 같이 content 매개 변수와 괄호를 삭제 가능

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

 

하나의 행에 텍스트 요소 정렬 

텍스트 요소가 겹치는 것을 피하기 위해 앱의 텍스트 요소를 한 행에 정렬합니다. 

 

하나의 열에 텍스트 요소 정렬 

10. 기기에 표시하기 

MainActivity.kt 파일에서 onCreate 함수로 스크롤 

Surface 블록에서 BirthdayGreetingWithText() 함수를 호출한다.

BirthdayGreetingWithText() 함수, 생일 축하 인사말 및 서명ㅇ르 전달

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BirthdayCardTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    BirthdayGreetingWithText(message = "Happy Birthday hyeon!" , " - from = zu")
                }
            }
        }
    }
}

12. 결론

요약 

- Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 도구 키트이다. 

Jetpack Compose는 더 적은 수의 코드 , 강력한 도구, 직관적인 Kotlin API로 Android 에서의 UI 개발을 간소화하고 가속한다.

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

- composable 함수는 Compose의 기본 구성 요소이다. UI의 일부를 설명하는 함수이다.

- composable 함수는 @Composable 주석으로 주석처리된다. 이 주석은 이 함수가 데이터를 UI로 변환한다는 것을 Compose 컴파일러에 알려준다.

- Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row, Box이다. 

이러한 요소는 컴포저블 콘텐츠를 사용하는 composable 함수이므로 내부에 항목을 배치할 수 있다.