Compose - 함수 / 레이아웃 구성

# Composable 함수

- Compose 앱은 Composable 함수들로 구성

- '@Composable'이 붙은 함수로 표현

- return 값은 반환하지 않음

- 사용자의 UI 요소를 전달하면 Compose runtime을 통해 렌더링

 

# View와 Compose의 차이

1) View

<TextView
		android:id="@+id/tv_hello"
		... />

private val textView: TextView = findViewById(R.id.tv_hello)
fun greeting(name: String) {
	  textView.text = "Hello $name"
}

 

2) Compose

@Composable
fun Greeting(
    name: String,
    modifier: Modifier = Modifier,
) {
    Text(
        modifier = modifier,
        text = "Hello $name",
		)
}

 

 

# Modifier의 개념

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

- 접근성 라벨 등의 정보 추가

- 사용자 입력 처리

- 요소 클릭/스크롤/드래그/확대/축소 가능한 상호작용 추가

// Composable
@Composable
private fun Greeting(name: String) {
    Column(
    	modifier = Modifier
        	.padding(24.dp)
            .fillMaxWidth(),
		) {
        Text(text = "Hello,")
        Text(text = name)
    }
}

// View
<LinearLayout
	android:id="+@id/layout"
    android:padding="24dp"
	android:width="match_parent"
	android:height="wrap_content"
	ori="vert.."
		
    <TextView
        android:id="+@id/tv1"
    <TextView
        android:id="+@id/tv2"
		
</LinearLayout>

 

# Modifier의 수정자

- padding: 요소 주위 공간 배치

- size: 크기 지정

- requiredSize: 최소 크기 지정

- fillMaxSize: 하위 레이아웃이 상위 요소에 의해 허용된 모든 가용 크기를 채우도록 함

- offset: 원래 위치 기준으로 레이아웃 배치

- weight: 상위 요소 내에서 유연하게 크기 설

 

# Modifier의 순서

- 각 함수는 이전 함수에서 반환한 Modifier를 변경하므로 순서가 중요

// 1번) .clickable -> .padding
// 클릭 가능한 범위를 먼저 지정하고 padding을 넣어서 전체 범위에 대해 클릭이 가능
@Composable
fun ArtistCard(/*...*/) {
    Column(
        Modifier
            .clickable(...)
            .padding(16.dp)
    ) {
        ...
    }
}

// 2번) .clickable -> .padding
// padding을 넣고 클릭 가능한 범위를 지정해 padding 내 범위만 클릭이 가능함

@Composable
fun ArtistCard() {
    Column(
        Modifier
            .padding(16.dp)
            .clickable(...)
    ) {
        ...
    }
}

 

# Layout

@Composable
fun ArtistCard() {
    Text(
        modifier = ...,
        text = "3 minutes ago",
		)
    Text(
        modifier = ...,
        text = "Alfred Sisley",
		)
}

- 원하는 정렬 방식에 대한 가이드가 없으면 Compose는 텍스트 요소를 겹치게 표시함

 

# 기본 레이아웃

1) Column: 항목을 세로로 배치

@Composable
fun ArtistCardColumn() {
    Column {
    	Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

 

2) Row: 항목을 가로로 배치

@Composable
fun ArtistCardRow(...) {
    Row(
        ...,
		) {
        Image(...)
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}

 

3) Box: 한 요소를 다른 요소 위에 배치 / 포함된 요소의 특정 정렬 구성도 지원

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(...)
        Icon(...)
    }
}

 

4) Alignment: verticalAlignment, horizontalAlignment, contentAlignment를 통해 콘텐츠 위치 조절 가능

@Composable
fun ArtistCardArrangement(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(...)
        Column { /*...*/ }
    }
}