[Jetpack Compose] 1. Compose 튜토리얼

1. 프로젝트 생성하기

1. 안드로이드 스튜디오 실행

2. Start a new Android Studio project

3. File > New > New Project

 

4. Empty Compose Activity 선택 후 Next

 

 

2. Hello world 찍어보기

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

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("hello world")
        }
    }
}

3. Compose 함수 정의

위에서 사용한 Text("hello world") 부분을 다음과 같이 함수로 정의할 수 있다.

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

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HellowWorld(hello = "hello world!")
        }
    }
}

@Composable
fun HellowWorld(hello : String){
    Text(text = hello)
}

4. Preview

다음과 같이 Preview를 통해 미리 볼 수 있다.

@Preview
@Composable
fun PreviewHelloWorld(){
    HelloWorld(hello = "hello world")
}