2. Compose Modifier를 활용한 스타일링 (padding, background 등등)

Modifier란 ? 

> Jetpack Compose 에서 UI 요소의 크기, 레이아웃, 동작, 스타일 등을 변경하는데 사용하는 구성요소.

 

Modifier의 주요 기능은 5가지 정도로 나눌 수 있다. 

• 1. 크기 조정
• 2. 정렬 및 배치
• 3. 배경 및 스타일링
• 4. 클릭 이벤트
• 5. 애니매이션 효과 

 

1. 크기조절

• Modifier.width(width: Dp) : 너비를 width.dp로 설정
• Modifier.height(height: Dp) : 높이를 height.dp로 설정
• Modifier.fillMaxWidth(fraction: Float = 1f) : 가로 전체 채우기, 기본은 모두 채우는 것(fraction = 1f)이며 전체 대비 채우는 비율을 설정하는 것도 가능
• Modifier.fillMaxHeight(fraction: Float = 1f) : 세로 전체 채우기, 기본은 모두 채우는 것(fraction = 1f)이며 전체 대비 채우는 비율을 설정하는 것도 가능
• Modifier.fillMaxSize(fraction: Float = 1f) : 가로, 세로 전체 채우기, 기본은 모두 채우는 것(fraction = 1f)이며 전체 대비 채우는 비율을 설정하는 것도 가능 

예:

Box(
    modifier = Modifier
        .width(100.dp)
        .height(100.dp)
        .fillMaxWidth()
        .fillMaxHeight(0.2f)
        .fillMaxSize()
        .background(Color.Blue)
        .align(Alignment.TopStart)
) {
    Text(
        text = "첫번째 Box 영역",
        fontSize = 12.sp, // 글자 크기
    )
}

 

2. padding, offset 이용하여 정렬 및 배치

• padding : 자신을 기준으로 안쪽으로 얼만큼 공간을 비울지 결정. 자식 컴포넌트의 크기에 영향을 끼친다.
• offset : x, y축으로 얼만큼 이동할지 결정. padding과는 다르게 자식 컴포넌트 크기에 영향이 없다. 

padding

• 전체 :  Modifier.padding(all: Dp)
• 상하좌우: Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)
• 수평, 수직 : Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp)

offset 

• x, y  : Modifier.offset(x: Dp = 0.dp, y: Dp = 0.dp)

예: 

Row(
    Modifier
        .width(100.dp)
        .height(100.dp)
        .background(Color.White)
        .padding(30.dp)
        .offset(x = 10.dp, y = 10.dp)
) {
    Box(
        Modifier
            .width(50.dp)
            .height(50.dp)
            .background(Color.Blue)
    )
}

Margin

Compose에서 margin을 쓰려고 한다면 Spacer(dp : Dp)을 대신 쓰는 것이 좋아보인다.  Compose 함수 내부에 속성으로 따로 제공되는 margin은 없다. 

Spacer(modifier = Modifier.height(12.dp)) // 위쪽 마진 효과
Text(
    text = title, fontSize = 14.sp
)
Spacer(modifier = Modifier.height(12.dp)) // 위쪽 마진 효과

 

Text위와 아래에 Margin을 주기 위해  Spacer를 사용한 코드이다. 

 

3. Modifier.background 배경 및 스타일링

• color와 shape를 사용해 배경색과 모양 설정
• border을 이용한 테두리 추가 

1) 색상

modifier = Modifier.background(color = Color.Blue)

 

2) 모양 

modifier = Modifier.background(shape = CircleShape)

• RectangleShape : 사각형
• RoundedCornerShape : 사격형 + 모서리 부분 둥굴게
• CircleShape : 원
• CutCornerShape

Box(
    modifier = Modifier
        .width(100.dp)
        .height(100.dp)
        .background(
            color = Color.Blue,
            shape = CircleShape
        )
) {

}

투명도 설정 background 안에 설정한 color의 색상에 copy라는 메소드를 이용해 지정해주면 된다.

color = Color.Blue.copy(alpha = 0.5f),

 

3) border 테두리 추가

 

border 구성요소

• width, color, shape

Column(
    modifier = Modifier
        .border(
            width = 3.dp,
            color = Color.Green,
            shape = RectangleShape
        )
) { }

 

background의 shape와는 다르게 Rectangle은 2가지만 사용하는 것 같다. 

• RectangleShape
• CircleShape

4. 클릭 이벤트 

clickable의 구성 위 함수를 실행하기 위해서는 기본적인 clickable을 사용한다.

clickable은 아래와 같이 구성되어 있다.

@Composable
fun clickGesture() {
    val context = LocalContext.current
    Box(
        modifier = Modifier
            .width(400.dp)
            .height(100.dp)
            .background(Color.Green)
            .clickable { showMessage(context, "클릭") }
            .pointerInput(Unit) {
                detectTapGestures(
                    onTap = { showMessage(context, "onTap") },
                    onPress = { showMessage(context, "onTap") },
                    onDoubleTap = { showMessage(context, "onDoubleTap") },
                    onLongPress = { showMessage(context, "onLongPress") }
                )
            }

    ) {
        Text(text = "클")
    }
}

 

클릭 이벤트에는 기본적으로 Ripple Effect라고 해서 물결 효과가 적용되어 있다.