[Compose] Component 알아보기 - Text, Button

Component들이 아직 손에 익지 않아서 테스트해보면서 몇가지만 기록해보려고 합니다 

 

Text에서 색상, 폰트 크기, 폰트 굵기 변경 등 테스트해보겠습니다 

가장 기본형태를 아래와 같다는 가정입니다 :) 

커스텀하려면 parameter로 원하는 걸 추가하면 되는데 아직 손에 익지 않아서 하나씩 해보는 중입니다 

Text(
      text = "Hello $name!",
      modifier = modifier
)

---

 

폰트 컬러 변경

Text(
        color = Color(0xff0094ff), //혹은 color = Color.Green 의 형태도 가능
        text = "Hello $name!",
        modifier = modifier
)

 

 

폰트 크기 변경

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

 

 

폰트 weight 변경 

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

 

 

 

폰트 글꼴 변경 

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

 

 

 

폰트 decoration 설정 

Text(
    color = Color(0xff0094ff),
    fontSize = 30.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.Cursive,
    text = "Hello $name!",
    letterSpacing = 3.sp,
    maxLines = 4,
    textDecoration = TextDecoration.LineThrough,
    modifier = modifier
)

 

그 외에도 Text 원형을 보고 원하는 parameter를 사용하면 될 거 같아요 

 

 

---

Button은 onClick이 필수이고 기본적으로 RowScope입니다

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

---

 

버튼 클릭 시 Toast 출력

Composable 함수에서 paramater로 unit 설정 후 Activity의 setcontent 부분에서 Toast 출력 시켰습니당

@Composable
fun Greeting(onClicked: () -> Unit) {
    Button(onClick = onClicked) {
        Text(text = "button")
    }
}

 

 

Button에 다른 ui들 추가해보기 

@Composable
fun Greeting(onClicked: () -> Unit) {
    Button(
        onClick = onClicked,
        enabled = false,
        border = BorderStroke(1.dp, Color.Black), // border width, color 설정 
        shape = RoundedCornerShape(10.dp), // paramater로 radius 조절
        contentPadding = PaddingValues(16.dp) // 공통, 개별 설정 가능
    )
    { // 버튼 내의 ui
        Icon(
            imageVector = Icons.Filled.Edit,
            contentDescription = ""
        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) // 여백 설정
        Text(text = "button")
    }
}

 

 

Button의 색상 변경하기 

button의 색상은 modifier로 변경이 안됩니다 

button의 colors를 사용해야합니다 

Button(
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Magenta, // 버튼 배경의 컬러
        contentColor = Color.Black // 버튼 content 컬러 
    ),
    onClick = onClicked,
    modifier = Modifier
        .size(width = 200.dp, height = 100.dp)
        .background(Color.Gray) //button에서는 modifier로 버튼의 색상을 변경할 수 없다 
)
{
    Icon(
        imageVector = Icons.Filled.Edit,
        contentDescription = null
    )
    Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
    Text(text = "button")
}

적용된 색상은 아래와 같습니다