jetpack compose 시작하기, 관련 링크, 교육 자료 등

https://developer.android.com/jetpack/compose/documentation?hl=ko 

Jetpack Compose 시작하기  |  Android Developers

Jetpack Compose 시작하기

기본 적인 내용에 대한 reference를 제시 하는 가장 기본이 되는 내용

전체 한번 읽어 봐야 함...

 

https://m3.material.io/

Material Design

material design 3 관련 홈페이지 각종 참고 자료 있음(색상, 템플릿 등)

아직은 덜 완성된 듯함...

 

https://developer.android.com/courses/jetpack-compose/course#article-https://developer.android.com/jetpack/compose/tutorial

Android 개발자를 위한 Jetpack Compose  |  Android Developers

Jetpack Compose for Android Developers

Learn how to use Jetpack Compose to build native Android UI! You’ll see how Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

총 5개의 코스로 되어있음..(2022년 내용)

 

소스코드 위치

https://github.com/gdgand/ComposeCamp2022

GitHub - gdgand/ComposeCamp2022: https://gdg.community.dev/e/m55vvm/

 

https://github.com/gdgand/ComposeFest2021

GitHub - gdgand/ComposeFest2021: DevFest 2021 ComposeFest 코드랩 Repo 입니다

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fjetpack-compose-for-android-developers-1%3Fhl%3Dko%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-basics#0

Jetpack Compose 기초  |  Android Developers

Jetpack Compose는 UI 개발을 간소화하기 위해 설계된 최신 툴킷

• 반응형 프로그래밍 모델을 Kotlin 프로그래밍 언어의 간결함 및 사용 편의성과 결합
• 완전히 선언적인 접근 방식
• 데이터를 UI 계층 구조로 변환하는 일련의 함수를 호출하여 UI를 설명
• 기본 데이터가 변경되면 프레임워크가 이러한 함수를 자동으로 다시 실행하여 UI 계층 구조를 업데이트
• Compose 앱은 Composable로 구성
• Composable는 @Composable이라고 표시된 일반 함수이며 다른 구성 가능한 함수를 호출 가능
• 새로운 UI 구성요소를 만들기 위해서는 함수만 있으면 됨
• 주석은 지속적으로 UI를 업데이트하고 유지관리하기 위해 함수에 특수 지원을 추가하도록 Compose에 알려주는 역할
• Compose를 사용하면 코드를 작은 청크로 구성 가능
• 대개 구성 가능한 함수를 줄여서 '컴포저블'이라고 합니다.
• 재사용이 가능한 작은 컴포저블을 만들면 앱에 사용하는 UI 요소의 라이브러리를 쉽게 빌드
• 각 요소는 화면의 한 부분을 담당하며 독립적으로 수정 가능

참고: 이 Codelab에서 'UI 구성요소', '구성 가능한 함수' 및 '컴포저블'은 같은 개념을 지칭하는 데 사용됩니다.

이 Codelab을 진행하는 동안 도움이 추가로 필요한 경우 다음 Code-Along 동영상을 시청하세요.

참고: 이 Codelab은 Material 3을 사용하도록 업데이트된 반면, Code-Along 동영상에서는 Material 2를 사용하고 있습니다. 몇 가지 단계에 차이가 있을 수 있다는 점에 유의하세요.

@Composable 함수

구성 가능한 함수는 @Composable이라는 주석이 달린 일반 함수입니다. 이렇게 하면 함수가 내부에서 다른 @Composable 함수를 호출할 수 있습니다. Greeting 함수를 @Composable로 어떻게 표시하는지 확인할 수 있습니다. 이 함수는 지정된 입력(String)을 표시하는 UI 계층 구조를 생성합니다. Text는 라이브러리에서 제공하는 구성 가능한 함수입니다.

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

참고: 구성 가능한 함수는 위의 코드 스니펫에서 확인할 수 있듯이 @Composable 주석으로 표시된 Kotlin 함수입니다.

Android 앱의 Compose

Compose를 사용하면 Activity가 Android 앱의 진입점으로 유지됩니다. 이 프로젝트에서는 AndroidManifest.xml 파일에 지정된 대로 사용자가 앱을 열 때 MainActivity가 실행됩니다. setContent를 사용하여 레이아웃을 정의하지만, 기존 뷰 시스템에서 하던 것처럼 XML 파일을 사용하는 대신 이 함수에서 구성 가능한 함수를 호출합니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicsCodelabTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                  modifier = Modifier.fillMaxSize(),
                  color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

BasicsCodelabTheme은 구성 가능한 함수의 스타일을 지정하는 방법입니다. 이에 관한 자세한 내용은 앱 테마 설정 섹션을 참고하세요. 텍스트가 화면에 어떻게 표시되는지 확인하려면 에뮬레이터나 기기에서 앱을 실행하거나 Android 스튜디오 미리보기를 사용하면 됩니다.

Android 스튜디오 미리보기를 사용하려면 매개변수가 없는 구성 가능한 함수 또는 기본 매개변수를 포함하는 함수를 @Preview 주석으로 표시하고 프로젝트를 빌드하기만 하면 됩니다. MainActivity.kt 파일에 이미 Preview Composable 함수가 있는 것을 볼 수 있습니다. 동일한 파일에 미리보기를 여러 개 만들고 이름을 지정할 수 있습니다.

@Preview(showBackground = true, name = "Text preview")
@Composable
fun DefaultPreview() {
    BasicsCodelabTheme {
        Greeting(name = "Android")
    }
}

참고: 이 프로젝트에서 Jetpack Compose와 관련된 클래스를 가져올 때 다음과 같은 형식을 사용하세요.

• androidx.compose.*(컴파일러 및 런타임 클래스용)
• androidx.compose.ui.*(UI 툴킷 및 라이브러리용)