Jetpack Compose 무작정 따라해보기 1

Android/Jetpack Compose

Jetpack Compose 무작정 따라해보기 1 - 리스트 아이템

c0de_h0ng 2022. 1. 17. 17:23

728x90

Jetpack Compose 스타트!

구글 IO 2018에서 Compose가 공개되었다. Compose는 Kotlin으로 제작되어 있는 라이브러리이며 선언형 프로그래밍 방식으로 UI를 그린다. 그래서 그런지 Flutter나 Swift UI와 비슷한 느낌이 든다.

유튜브(출처: https://www.youtube.com/watch?v=EF33KmyprEQ&t=839s )를 통해서 Jetpack Compose를 무작정 따라 해 보았다. 이번 포스팅은 Jetpack Compose만 집중적으로 분석해보았다. 개념보다는 Compose에 "이러한 코드가 있네?" 정도로 해서 무작정 따라 해 보았다. 유튜브에서 만드는 앱은 Coinpaprika api를 사용하여 만든 앱이다. 화면 구성은 아래와 같다.

순위별 코인 리스트 화면
코인 상세 화면

순위별 코인 리스트 화면

순위별 코인 리스트 화면을 만들기에 앞서 코인 리스트의 아이템을 먼저 설계한다.

코인 리스트 아이템

먼저 리스트 아이템의 컴포넌트 생성한다.

@Composable
fun CoinListItem(
    coin: Coin,
    onItemClick: (Coin) -> Unit
) {
    Row(modifier = Modifier
        .fillMaxWidth()
        .clickable { onItemClick(coin) }
        .padding(20.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        
    }
}

Row

LinearLayout의 Horizontal과 비슷하다. 수평방향으로 자식 컴포넌트들을 순서대로 배치하는 레이아웃이다.

Modifier

컴포넌트의 크기를 조절한다.

컴포넌트의 너비 및 높이를 조정할 수 있는 요소로는 width, height, fillMaxWidth, fillMaxHeight, fillMaxSize가 있다.

width : 너비를 width.dp로 설정
height : 높이를 height.dp로 설정
fillMaxWidth : 너비를 전체 채우기, 기본으로는 모두 채우는 것이고 전체 대비 채우는 비율을 설정할 수도 있다.
fillMaxHeight : 높이를 전체 채우기, 기본으로는 모두 채우는 것이고 전체 대비 채우는 비율을 설정할 수도 있다.
fillMaxSize : 너비와 높이 모두를 전체 채우기, 기본으로는 모두 채우는 것이고 전체 대비 채우는 비율을 설정할 수도 있다.

padding을 통해서 padding.dp로 설정할 수 있다.

컴포넌트의 배치 방식은 horizontalArrangement을 사용하여 결정한다.

Arrangement.Start :왼쪽 배치 옵션
Arrangement.Center : 중앙 배치 옵션
Arrangement.End : 오른쪽 배치 옵션
Arrangement.Space* : 자식 컴포넌트들 간에 간격이 동일하도록 만드는 옵션
- Arrangement.SpaceBetween : 레이아웃의 양 끝과 자식 컴포넌트와의 간격이 0이라 자식 컴포넌트가 양 끝에 붙어있음
- Arrangement.SpaceAround : 레이아웃의 양 끝과 자식 컴포넌트와의 간격이 자식 컴포넌트간의 간격의 1/2 임
- Arrangement.SpaceEvenly : 레이아웃의 양 끝과 자식 컴포넌트와의 간격이 자식 컴포넌트 간의 간격과 같음

clickable를 통해서 컴포넌트에 click 이벤트를 발생시킨다.

다음으로는 Row에 들어가는 코인 정보와 코인 활성화 여부 Text를 생성한다.

//코인 정보
Text(
    text = "${coin.rank}. ${coin.name} (${coin.symbol})",
    style = MaterialTheme.typography.body1,
    overflow = TextOverflow.Ellipsis
)
//코인 활성화 여부
Text(
    text = if (coin.isActive) "active" else "inactive",
    color = if (coin.isActive) Color.Green else Color.Red,
    fontStyle = FontStyle.Italic,
    textAlign = TextAlign.End,
    style = MaterialTheme.typography.body2,
    modifier = Modifier.align(CenterVertically)
)

text : 텍스트 내용
style : 텍스트 스타일
fontStyle : 텍스트 폰트 스타일
textAlign : 텍스트 정렬 방식
overflow : 텍스트가 넘쳤을 경우에 어떻게 처리할 것인지를 설정
color : 텍스트 색상
Clip : 텍스트 영역의 범위에서 벗어났을 경우 잘라서 보여주는 설정(기본 값)
Visible : 텍스트 영역의 범위에서 벗어났을 경우 모두 보여주는 설정
Ellipsis : 텍스트 영역의 범위에서 벗어났을 경우 "..."으로 처리하는 설정

이를 토대로 정리를 해보면 코인 정보는 body1 스타일로 '코인 순위. 코인 이름 (코인 약어)'로 표현된다. 만약 텍스트 영역의 범위를 벗어났을 경우에는 "..."으로 처리한다.

코인 활성화 여부는 body2 스타일로 코인이 active이면 active로 텍스트를 표현하고 색상은 Green으로 설정하고 아니면 inactive로 텍스트를 표현하고 색상은 Red로 설정한다. 폰트 스타일은 Italic체를 사용하고 텍스트를 오른쪽으로 정렬한다. align을 통해서 텍스트를 수직 중앙 배치를 한다.

@Composable
fun CoinListItem(
    coin: Coin,
    onItemClick: (Coin) -> Unit
) {
    Row(modifier = Modifier
        .fillMaxWidth()
        .clickable { onItemClick(coin) }
        .padding(20.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        //코인 정보
        Text(
            text = "${coin.rank}. ${coin.name} (${coin.symbol})",
            style = MaterialTheme.typography.body1,
            overflow = TextOverflow.Ellipsis
        )
        //코인 활성화 여부
        Text(
            text = if (coin.isActive) "active" else "inactive",
            color = if (coin.isActive) Color.Green else Color.Red,
            fontStyle = FontStyle.Italic,
            textAlign = TextAlign.End,
            style = MaterialTheme.typography.body2,
            modifier = Modifier.align(CenterVertically)
        )
    }
}

전체 코드를 보면 Row안에 두 개의 텍스트를 선언하게 되면 두 개의 텍스트를 수평으로 배치한다라고 선언하는 것이다.

이를 빌드해서 보면 아래와 같이 표현된다.

출처 : https://www.youtube.com/watch?v=EF33KmyprEQ&t=839s

저작자표시

'Android > Jetpack Compose' 카테고리의 다른 글

Jetpack Compose 무작정 따라해보기 2 - 리스트 화면 (0)	2022.01.18

현재글Jetpack Compose 무작정 따라해보기 1 - 리스트 아이템

c0de_h0ng의 DevLog