7. 기초 컴포넌트

1. Text

Text는 화면에 텍스트를 표시하는 가장 기본적인 컴포넌트입니다. 다양한 스타일링 옵션을 제공하여 텍스트의 모양을 쉽게 조정할 수 있습니다.

import androidx.compose.material3.Text

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 24.sp,
    color = Color.Black
)

Untitled

2. Button

Button은 클릭 가능한 UI 요소로, 사용자가 특정 작업을 수행할 때 사용합니다. 다양한 스타일과 모양을 지정할 수 있습니다.

import androidx.compose.material3.Button
import androidx.compose.material3.Text

Button(onClick = { /* TODO: Do something */ }) {
    Text("Click Me")
}

Untitled

3. Image

Image 컴포넌트는 화면에 이미지를 표시하는 데 사용됩니다. 로컬 리소스나 네트워크 이미지를 불러올 수 있습니다.

Untitled

이 이미지를 neopjuk.jpeg로 다운받아 보세요. 그 다음, 아래 drawable 위치로 드래그 해보세요. 이렇게 하면 앱 리소스에 neopjuk.jpeg가 추가되며, 이후에 이를 R.drawable.neopjuk으로 가져올 수 있습니다.

Untitled

그 다음, 아래 코드를 작성하세요.

import androidx.compose.foundation.Image
import androidx.compose.ui.res.painterResource

Image(
    painter = painterResource(R.drawable.neopjuk),
    contentDescription = "Sample Image"
)

Untitled

4. Icon

Icon은 작은 그래픽 요소를 표시하는 데 사용됩니다. 보통 Icons 라이브러리에서 제공하는 벡터 아이콘을 사용합니다.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite

Icon(Icons.Default.Favorite, contentDescription = "Favorite Icon")

Untitled