Jetpack Compose 기초정리

 Jetpack Compose 기초는 다음의 링크에서 확인 가능

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko

*최근 진행중인 개인 프로젝트는 다음의 구조로 진행

MVVM 디자인 패턴(통신 Retrofit) + DI(Dagger Hilt) + Compose

프로젝트를 위해 접해보지 못했던 Compose를 먼저 이해해 보기로 함.

*Compose 정리

**Compose로 Layout을 어떻게 구성하는지 공부

1) 기본적으로 사용되는 레이아웃은 3가지가 있습니다. Column , Row, Box

(단순한 컨테이너로, Compose의 레이아웃을 구성하는데 사용)

- 수직 Column

- 수평 Row

- 중첩 Box

2) 수정자 (Modifier.함수()로 사용 )

- **Modifiers는 순서가 매우 중요함

- Composable의 크기, 레이아웃, 동작 및 모양 변경

- 접근성 라벨과 같은 정보 추가

- 사용자 입력 처리

- UI요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가

Column(modifier = Modifier
    .padding(24.dp)
    .fillMaxWidth()) 
    {
    	Text(text = "Hello,")
    	Text(text = name)
    }

(1) 지정한 크기가 레이아웃의 상위 요소를 무시하고 Composable의 크기를 고정해야 하는 경우 requiredSize 수정자를 사용

Box(Modifier.size(90.dp, 150.dp).background(Color.Green)) {
    Box(Modifier.requiredSize(100.dp, 100.dp).background(Color.Red))
}

    - 가장 하위에 있는  Box가 상위 Box 90.dp 크기를 무시하고 100.dp로 설정

    

(2) 레이아웃의 상위 요소 크기에 상위요소가 허용하는 만큼 하위요소가 꽉 채우고 싶은 경우 

    fillMaxSize(), fillMaxWidth(), fillMaxHeight() 등등을 골라서 사용

Box(Modifier.background(Color.Green).size(50.dp).padding(10.dp)) {
    Box(Modifier.background(Color.Blue).fillMaxSize())
}

    

    -fillMaxSize() 사용으로 상위 UI요소 만큼 하위 UI요소의 크기가 지정됨

    -padding을 넣엇기 때문에 패딩이 10dp가 적용됨 

    

(3) 하위 레이아웃을 상위 요소와 동일한 크기로 설정하려면 matchParentSize 수정자를 사용합니다.   

    Modifier.matchParentSize().background(Color.Green)

    

    

(4) 레이아웃 상단에서 기준선까지 특정 거리가 유지되도록 패딩을 추가하려면 paddingFromBaseline 수정자를 사용

 Box(Modifier.background(Color.Yellow)) {
    Text("Hi there!", Modifier.paddingFromBaseline(top = 32.dp))
}

    

3) Offset    

- 원래 위치를 기준으로 레이아웃을 배치해줌

- offset 수정자를 추가해서 x축 , y축을 설정해서 사용함

- 양수 혹은 음수일 수 있음

- offset의 측정값은 변경되지 않음 

- offset 수정자는 레이아웃 방향에 따라 가로로 적용

- LTR 컨텍스트에서 양수 offset은 요소를 오른쪽으로 이동시킴

- RTL 컨텍스트에서는 요소를 오른쪽으로 이동합니다.

- aboluteOffset은 레이아웃 방향 상관없이 항상 오른쪽으로 이동시킴

Text(
    "Layout offset modifier sample",
    Modifier.offset(x = 15.dp, y = 20.dp)
)

    

4) 반응형 레이아웃

(1) Row 및 Column의 가중치 수정자

Row(Modifier.width(210.dp)) {
    Box(Modifier.weight(2f).height(50.dp).background(Color.Blue))
    Box(Modifier.weight(1f).height(50.dp).background(Color.Red))
}

(2) 제약 조건

- 상위 요소의 제약 조건에 따라 레이아웃을 디자인하려면 BoxWithConstraints를 사용 

- 측정 제약조건은 콘텐츠 람다의 범위에서 확인 가능 

- 측정 제약 조건을 사용하여 다양한 화면 구성에 따라 다양한 레이아웃을 구성이 가능 

5) Surface

일반적으로 카드 또는 패널과 같은 요소를 나타내는데 사용된다. 

그림자, 경계선, 배경색 등과 같은 시각적 효과를 자동으로 처리하며, 표면에 콘텐츠를 배치하는데 사용 (배경색이나 배경 테두리 등을 설정)

- ex) 카드 또는 팝업창을 만들 때, Surface를 사용

Surface(
    color = MaterialTheme.colors.primarySurface,
    border = BorderStroke(1.dp, MaterialTheme.colors.secondary),
    shape = RoundedCornerShape(8.dp),
    elevation = 8.dp
) {
    Text(
        text = "example",
        modifier = Modifier.padding(8.dp)
    )
}