[Android] Compose - 이미지, 구분선, 텍스트, Preview, Button, 툴바

이미지

Image(
    painter = painterResource(id = R.drawable.ic_message),
    contentDescription = "공지사항 아이콘",
    Modifier
        .width(25.dp)
        .height(25.dp)
)

• Image의 painter로 리소스 불러오기

4px로 png 저장해도 깨짐 현상 없음!

 

 

구분선

// 구분선
                Divider(
                    color = Color.Black,
                    modifier = Modifier.fillMaxWidth()
                        .height(1.dp)
                        .padding(start = 8.dp, end = 8.dp)
                )

공식문서를 참조했다

Compose 레이아웃의 내장 기능 측정  |  Jetpack Compose  |  Android Developers

Compose 레이아웃의 내장 기능 측정  |  Jetpack Compose  |  Android Developers

컴포즈의 공식문서는 아주 잘 되어있다!

 

 

텍스트

• 텍스트 크기 변경

Text("Hello World", fontSize = 30.sp)

• 텍스트 색상 변경

Text("Hello World", color = Color.Blue)

• 텍스트 스타일 변경

Text("Hello World", fontWeight = FontWeight.Bold)

Style text  |  Jetpack Compose  |  Android Developers

Style text  |  Jetpack Compose  |  Android Developers

 

 

버튼

• 버튼 투명도 & 색상 주기

Button(
                onClick = { /*TODO*/ },
                modifier = Modifier.padding(padding),
                colors = ButtonDefaults.buttonColors(Color.White.copy(alpha = 0.6f), Color.Black)
            ) {
                Text(
                    text = "프로필 수정",
                )
            }

buttonColors에서 첫번째는 배경색, 두번째는 컨텐츠 색(글자 색)

copy 함수를 이용해서 직접 투명도를 조절한다

 

 

[Android Compose Modifier] 5. Color에 alpha 적용해 투명도 설정하기

[Android Compose Modifier] 5. Color에 alpha 적용해 투명도 설정하기

[Android Button Surface] 2. Button에 색상(colors) 설정하기 : background color, content color

[Android Button Surface] 2. Button에 색상(colors) 설정하기 : background color, content color

 

 

Preview

@Preview 어노테이션 사용하여 미리보기 가능

Preview를 적극 활용하여

Composable 분리하기!

 

 

툴바

툴바 제목이 화살표에 맞춰서 센터 정렬하지 않고, 화면 자체 width에 맞춰서 센터가 되도록

@Preview
@Composable
fun ProfileChangeTitle() {
    // 위 아래 여백
    Row(
        modifier = Modifier
            .padding(top = padding_24, bottom = padding_24)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Box(
            modifier = Modifier.fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            
            Row(
                modifier = Modifier
                    .height(24.dp)
                    .fillMaxWidth()
            ){
                Icon(painter = painterResource(id = R.drawable.ic_left_btn), contentDescription = "뒤로 가기")

            }
            Text(text = "프로필 수정")
        }
    }
}