[Kotlin / Compose] 텍스트와 버튼을 다루는 방법

☝🏻 @Composable의 의미
Compose는 UI를 작성하기 위해 선언적인 방식을 사용하는데, @Composable 주석은 Compose에서 UI를 작성하기 위해 사용되는 함수나 클래스를 지정하는 데 사용된다.

☝🏻 Compose에서 Greeting이란?
Greeting은 Compose에서 사용자에게 화면에 표시되는 간단한 텍스트를 나타내는 UI 구성요소이다.

✨ Jetpack Compose에서 텍스트를 다루는 방법

Text의 색상 지정하기

@Composable
fun Greeting(name: String) {
	Text(color = Color.Red, text = "Hello $name")
}

Color 객체를 이용해서 해쉬값으로 색상 지정하기

Text(color = Color(0xffff9944), text = "Hello $name")

Text의 fontSize 지정하기

Text(color = Color(0xffff9944), text = "Hello $name", fontSize = 30.sp)

Text의 fontWeight 지정하기

    Text(
        color = Color(0xffff9944),
        text = "Hello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold
    )

Text의 fontFamily 지정하기

    Text(
        color = Color(0xffff9944),
        text = "Hello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive
    )

Text의 letterSpacing 지정하기

   Text(
        color = Color(0xffff9944),
        text = "Hello $name\nHello $name\nHello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        letterSpacing = 2.sp,
        maxLines = 2
    )

Text의 textDecoration 지정하기

    Text(
        color = Color(0xffff9944),
        text = "Hello $name\nHello $name\nHello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        letterSpacing = 2.sp,
        maxLines = 2,
        textDecoration = TextDecoration.Underline
    )

Text의 textAlign 지정하기

    Text(
        modifier = Modifier.size(300.dp),
        color = Color(0xffff9944),
        text = "Hello $name\nHello $name\nHello $name",
        fontSize = 30.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        letterSpacing = 2.sp,
        maxLines = 2,
        textDecoration = TextDecoration.Underline,
        textAlign = TextAlign.Center
    )

✨ Jetpack Compose에서 버튼을 사용하는 방법

버튼을 만들기 위해서는 버튼 함수를 호출하고 onClick을 넣어야한다.
onClick은 클릭 이벤트를 다루는 것이며 버튼 아래에는 몇 개의 디자인 요소를 넣을 수 있다.
Button(onClick = {}) {
// 여기는 RowScope로 되어 있어 RowScope에서 쓸 수 있는 함수들을 쓸 수 있다.
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ButtonTheme {
                ButtonExample {
                	// 버튼을 클릭했을 때 Toast 메세지 출력 
                    Toast.makeText(this, "Send Clicked.", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
}

@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
	// 외부에서 onButtonClicked를 세팅하고 위임할 수 있게 만든다.
    Button(onClick = onButtonClicked) {
        Text(text = "Send")
    }
}

Button에서 아이콘을 텍스트 앞에 추가하기

@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
    Button(onClick = onButtonClicked) {
        Icon(
            imageVector = Icons.Filled.Send,
            contentDescription = "Send"
            )
        Text(text = "Send")
    }
}    

Icons 안에 Filled가 있는데 몇 가지 아이콘을 포함하고 있으며 기본으로 머티리얼 디자인이 가지고 있는 이미지 벡터라고 보면 된다.
contentDescription은 해당 컨텐츠가 무엇인지를 설명해주는 문장이다.

Button의 아이콘과 텍스트 사이에 Spacer 넣기

    Button(onClick = onButtonClicked) {
        Icon(
            imageVector = Icons.Filled.Send,
            contentDescription = "Send"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "Send")
    }

• ButtonDefauilts.IconSpacing : 아이콘 후에 얼마만큼의 간격을 띄워야 되는지의 기본 값
• Modifier.size란?
  ➡️ composable 요소의 크기를 지정하는 데 사용되는 Modifier로 composable 요소의 너비와 높이를 조절하는 데 사용된다.

Button의 Enabled 설정하기

    Button(
        onClick = onButtonClicked,
        enabled = false // add
    ) {
        Icon(
            imageVector = Icons.Filled.Send,
            contentDescription = "Send"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "Send")
    }

Button의 Border 설정하기

    Button(
        onClick = onButtonClicked,
        enabled = true,
        border = BorderStroke(10.dp, Color.Blue) // add
    ) {
        Icon(
            imageVector = Icons.Filled.Send,
            contentDescription = "Send"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "Send")
    }

Button의 contentPadding 설정하여 내부 컨텐츠에 대한 여백을 설정하기

    Button(
        onClick = onButtonClicked,
        enabled = true,
        border = BorderStroke(10.dp, Color.Blue),
        shape = CircleShape,
        contentPadding = PaddingValues(20.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Send,
            contentDescription = "Send"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "Send")
    }

contentPadding : composable 요소의 내부 컨텐츠와 해당 요소의 경계 사이의 여백을 지정하는 데 사용된다.

Button의 background 설정하기

    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Magenta,
            contentColor = Color.Cyan
        ),
        onClick = {},
        modifier = Modifier
            .size(200.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "Search"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "Search")
    }

colors 파라미터에 ButtonDefaults.buttonColors를 넣고 containerColor와 contentColor 프로퍼티를 설정한다.
ButtonDefaults.buttonColors() : Compose에서 버튼의 색상을 지정하는 데 사용되는 함수로 버튼의 배경색과 내부 컨텐츠(텍스트 또는 아이콘)의 색상을 각각 지정할 수 있다.
containerColor : 이 매개변수는 버튼의 배경색을 지정한다.
contentColor : 이 매개변수는 버튼 내부 컨텐츠(텍스트 또는 아이콘)의 색상을 지정한다.

Button의 modifier에 Padding 추가하여 composable 요소에 대한 외부 여백을 설정하기

    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Magenta,
            contentColor = Color.Cyan
        ),
        onClick = {},
        modifier = Modifier.padding(100.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "Search"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "Search")
    }

Button의 modifier에 clickable을 넣기

    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Magenta,
            contentColor = Color.Cyan
        ),
        onClick = {},
        enabled = false,
        modifier = Modifier.padding(100.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "Search"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "Search",
            modifier = Modifier.clickable { })
    }

button에 enabled를 false로 설정하고 modifier에 clickable을 넣을 경우
버튼의 텍스트를 클릭하면 "Search" 부분만 클릭 효과(여기서만 클릭 이벤트를 처리)가 있다.

Button의 modifier에 offset 설정하기

    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Magenta,
            contentColor = Color.Cyan
        ),
        onClick = {},
        modifier = Modifier.padding(100.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "Search"
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(
            text = "Search",
            modifier = Modifier.offset(x = 10.dp)
        )
    }

offset(x = 10.dp) : composable 요소를 x축 방향으로 10dp만큼 이동시킨다.
➡️ 레이아웃을 배치할 때 요소를 원하는 위치로 이동시키는 데 사용된다.