[Android] Spacer / Divider 사용법 (Jetpack Compose)

Spacer 사용법

• Spacer는 두 요소 사이에 빈 공간을 만들 때 사용

기본 사용법

@Composable
fun SpacerExample() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("첫 번째 텍스트")
        Spacer(modifier = Modifier.height(16.dp)) // 16dp 만큼 여백 추가
        Text("두 번째 텍스트")
    }
}

 

• 위 코드는 "첫 번째 텍스트"와 "두 번째 텍스트" 사이에 16dp의 빈 공간을 추가 하는 코드

 

가로 여백 추가

@Composable
fun RowSpacerExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        Text("첫 번째")
        Spacer(modifier = Modifier.width(20.dp)) // 20dp 만큼 여백 추가
        Text("두 번째")
    }
}

• 위 코드는 "첫 번째"와 "두 번째" 사이에 20dp의 가로 여백을 추가하는 코드

 

 

Divider 사용법

기본 사용법

@Composable
fun HorizontalLineExample() {
    Column {
        Text("첫 번째 항목")
        Divider(color = Color.Gray, thickness = 1.dp) // 1dp 두께의 회색 줄
        Text("두 번째 항목")
    }
}

 

 

• Divider(color = Color.Gray, thickness = 1.dp) → 1dp 두께의 회색 가로줄 추가
• 위와 아래 요소 사이에 구분선 역할을 해 줌

 

가로줄 길이 조절

Divider(
    modifier = Modifier
        .fillMaxWidth(0.5f) // 너비를 50%로 설정
        .padding(horizontal = 16.dp), // 좌우 여백 추가
    color = Color.Red,
    thickness = 2.dp // 두께 조절
)

 

 

• fillMaxWidth(0.5f) → 화면 너비의 50%만 사용
• padding(horizontal = 16.dp) → 양쪽 여백 추가
• thickness = 2.dp → 두꺼운 줄

 

세로줄(수직선)로 사용하는 방법

Divider(
    modifier = Modifier
        .width(2.dp) // 너비 2dp (세로줄)
        .fillMaxHeight() // 전체 높이만큼 사용
        .background(Color.Black) // 검은색

 

 

• 가로줄용 Divider를 활용해 세로줄을 만들 수 있음
• width(2.dp) → 세로줄이 되도록 설정
• fillMaxHeight() → 화면 높이를 꽉 채움

 

BOX를 사용해 세로줄(수직선) 그리는 방법

@Composable
fun VerticalLineExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("왼쪽 항목")
        Box(
            modifier = Modifier
                .width(1.dp) // 선의 너비
                .height(20.dp) // 선의 높이
                .background(Color.Gray) // 선의 색상
        )
        Text("오른쪽 항목")
    }
}

 

 

• Box를 이용해 1dp 너비의 직사각형을 세로선으로 사용
• Row 안에서 왼쪽과 오른쪽 요소를 나누는 구분선 역할

 

세로줄 높이 조절

Box(
    modifier = Modifier
        .width(2.dp) // 선의 두께
        .fillMaxHeight(0.8f) // 전체 높이의 80%만큼 사용
        .background(Color.Blue) // 파란색 선
)

 

• fillMaxHeight(0.8f) → 화면 높이의 80%만 차지
• width(2.dp) → 조금 더 두꺼운 선
• background(Color.Blue) → 파란색 수직선