📱Jetpack Compose 레이아웃 정리

💠Jetpack Compose 예제 프로젝트

Row / Column으로 레이아웃 구성

• 기본 개념

  • Row와 Column은 가장 기본적인 레이아웃 컴포저블
  • XML의 LinearLayout과 비슷하지만, 더 유연하고 간결한 방식으로 UI를 구성 가능

• Row 컴포저블

  • 수평 방향으로 Composable 배치

    Row(
      modifier = Modifier
          .fillMaxWidth()
          .padding(16.dp),
      horizontalArrangement = Arrangement.SpaceBetween,
      verticalAlignment = Alignment.CenterVertically
    ) {
      Text("왼쪽 텍스트")
      Text("오른쪽 텍스트")
    }

  • horizontalArrangement: 가로 방향 정렬
  • verticalAlignment: 세로 축 정렬
    
    

• Column 컴포저블

  • 수직 방향으로 Composable 배치

    Column(
      modifier = Modifier
          .fillMaxHeight()
          .padding(16.dp),
      verticalArrangement = Arrangement.spacedBy(12.dp),
      horizontalAlignment = Alignment.CenterHorizontally
    ) {
      Text("위쪽 텍스트")
      Button(onClick = {}) {
          Text("아래 버튼")
      }
    }
    

    
    

• Row와 Column 조합

  • 다단 레이아웃, 폼 구성, 프로필 페이지 등을 만들 때 주로 사용

    Row(modifier = Modifier.fillMaxWidth()) {
     Column(modifier = Modifier.weight(1f)) {
         Text("이름")
         Text("이메일")
     }
     Column(modifier = Modifier.weight(1f)) {
         Text("홍길동")
         Text("honggildong@email.com")
     }
    }
    

    
    

• Modifier 조합 활용

  • weight()로 유연한 공간 분배
  • padding(), background()로 시각적 커스터마이징
  • fillMaxWidth(), wrapContentSize()로 사이즈 제어
    
    
    

Row 안에서 Column으로 나누는 구조는 form 화면 제작이나 card 뷰 구현에 자주 사용됨

💠BOX 레이아웃

Box 컴포저블

• 기본 개념

  • Box는 여러 Composable을 겹쳐서 배치하는 데 사용
  • 자식 요소들을 Layer처럼 쌓을 수 있어서 중첩된 UI에 강력
    
    

• Box 예제

Box(
    modifier = Modifier
        .size(200.dp)
        .background(Color.Gray),
    contentAlignment = Alignment.Center
) {
    Icon(Icons.Default.Star, contentDescription = null)
    Text("즐겨찾기", modifier = Modifier.align(Alignment.BottomEnd))
}

• contentAlignment: Box 내부의 기본 정렬 위치 지정
• Modifier.align(): 각 자식에 개별 위치 지정 가능
• BoxScope 모디파이어
  • align() 등으로 개별 컴포저블 정렬 제어

💠ConstraintLayout

프로젝트 필요 설정

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

• 기본 개념
  • 제약(Constraint)을 기반으로 컴포저블의 위치를 지정하는 레이아웃
  • XML ConstraintLayout과 유사하나 Compose에 맞게 설계됨
  • 복잡한 관계 기반 UI 구성에 매우 유용
    
    
• 사용 예시

ConstraintLayout(modifier = Modifier.fillMaxSize()) {
    val (title, button) = createRefs()

    Text("안녕하세요", Modifier.constrainAs(title) {
        top.linkTo(parent.top, margin = 32.dp)
        start.linkTo(parent.start)
    })

    Button(onClick = {}, Modifier.constrainAs(button) {
        top.linkTo(title.bottom, margin = 16.dp)
        end.linkTo(parent.end)
    }) {
        Text("클릭")
    }
}

-> createRefs() 여러 참조 객체 생성
-> createGuidelineFromTop(0.5f) 부모 기준 가이드라인 생성
-> createBottomBarrier(...) 요소들의 하단 기준점 생성

UI가 복잡해지는 경우 Row, Column, Box만으로는 한계가 있으므로 ConstraintLayout 사용을 고려해볼 것

💠IntrinsicSize 다루기

• 기본 개념

  • IntrinsicSize는 자식 컴포저블의 내용 크기에 따라 부모의 크기를 동적으로 결정 가능

  • 주로 Divider나 비대칭 레이아웃 구성 시 유용

    Row(modifier = Modifier.height(IntrinsicSize.Min)) {
      Text("짧은 텍스트", modifier = Modifier
          .padding(8.dp)
          .fillMaxHeight())
      Divider(
          color = Color.Black,
          modifier = Modifier
              .width(1.dp)
              .fillMaxHeight()
      )
      Text("길고 긴 텍스트입니다.", modifier = Modifier
          .padding(8.dp)
          .fillMaxHeight())
    }
    

    -> 텍스트 길이에 맞게 세로 구분선을 일치시킬 때 & Row 안의 높이를 자식 크기에 맞추고 싶을 때
    
    
    

💠결론

• Row / Column
  • 수평 / 수직 배치
  • 기본 폼, 리스트, 정렬된 텍스트들
• Box
  • 겹치기, 자유 배치
  • 아이콘+텍스트, 배경 이미지 위 텍스트
• ConstraintLayout
  • 복잡한 제약 구조
  • 정밀한 레이아웃 설계, 반응형 UI
• IntrinsicSize
  • 자식 기반 크기 설정
  • 구분선, 내부 길이 정렬 필요 시