1. 탬플릿을 이용하여 프로젝트 생성
탬플릿을 사용하는 이유
- 탬플릿은 프로젝트의 구조, 안드로이드 스튜디오에서 프로젝트를 빌드하는데 필요한 파일을 만듬
- 선택한 탬플릿에따라 시작코드가 제공되어 빠른 개발가능
2. 프로젝트 파일의 위치
이렇게 생성된 파일중 MainActivity.Kt를 열면 탬플릿으로 프로젝트를 만들었기때문에 아래와 같은 기본 시작코드가 주어진다.
3. 코틀린 코드
package com.example.test0114
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.test0114.ui.theme.Test0114Theme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Test0114Theme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(
text = "Hello $name!",
modifier = modifier
)
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Test0114Theme {
Greeting("Android")
}
}
//Test0114가 프로젝트이름이다.
간단하게 함수들을 설명해보자면
- onCreate() : 코드실행의 시작점이다.
- setContent() : 레이아웃을 정의하는데 사용, @Composable 주석으로 표시된 모든함수는 setContent()에서 호출가능하다.
- Greeting() : @Composable를 사용한 구성 가능한 함수이다. 여기서는 화면에 표시되는 내용을 컨트롤할 수 있다.
- GreetingPreview() : 이곳에서는 Greeting()에서 생성한 내용을 앱을 빌드하기전에 미리 살펴볼수있게해주는 함수이다.
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}현재 이함수는 name을 매개변수로 받아서 "Hello $name!"을 표시한다. 이함수는 위에 setContent() 에서 Greeting("Android")로 호출되고있다 그러므로 화면에는 "Hello Android!" 로 표시될것이다.
이함수를 위에서 언급한 GreetingPreview() 함수로 살펴보자
4. 배경 색상 변경
텍스트의 배경색상을 변경하려면 텍스트를 Surface() 로 둘러싸야한다.
이후 이렇게 코드가 바뀐다.
여기서 "Box"를 지우고 "Surface" 를 입력한다.
@Composable
fun Greeting(name: String) {
Surface(color = Color.Gray) {
Text(text = "Hi, my name is $name!")
}
}
Surface() 괄호안에 저렇게 컬러를 지정하면 배경색이 바뀐다. color를 사용하려면 아래의 라이브러리를 사용해야한다.
import androidx.compose.ui.graphics.Color
5. 패딩 설정
패딩은 요소 주의의 공백을 컨트롤한다. 패딩을 설정하려면 아래와같은 라이브러리가 필요하다.
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding
코드는,
