[Android, Kotlin] Compose UI 정리(5)

이번 포스팅에서는 compose UI 공부했던 내용을 끄적여보겠다.

 

이전 포스팅

https://rkdrkd-history.tistory.com/44

[Android, Kotlin] Compose UI 정리(4)

 

이번에 정리할 내용은 compose에서 glide 사용하는 방법이다.

 

만들어볼 예제는 lazyColumn(recyclerView)를 이용해 프로필 사진과 유저 이름, 설명을 넣어볼 것이다

 

먼저 완성화면부터 보도록 하자

 

저것(?)을 만들기 위해 먼저 해야 할 것은

AppBar 만들기!가 아니고 lazy column(recyclerView)에 들어갈 아이템(card)를 만들어주도록 하자.

 

 

1. item(card) 만들기

@Composable
fun RecyclerItem(randomUser: RandomUser) {
    val typography = MaterialTheme.typography

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        elevation = 10.dp,
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(10.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            ProfileImage(source = randomUser.profileImage)  // 프로필 이미지를 설정한다.

            Column() {
                Text(text = randomUser.name, style = typography.subtitle1)
                Text(text = randomUser.description, style = typography.body1)
            }
        }

    }
}

하나하나(?) 설명해 주겠다

 

• elevation: Card 테두리에 그림자(?)효과를 준다(테두리가 선명히 보여요).
• shape: Card의 모양을 나타낸다
  예) RoundedCornerShape(테두리를 둥글게), CircleShape(원형)
• verticalAlignment: Row의 하위 뷰들을 수직 정렬한다
• horizontalArrangement: 아이템 간의 수평 너비를 나타낸다.

예시(?)

 

2. 프로필 이미지 설정하기

@Composable
fun ProfileImage(source: String, modifier: Modifier = Modifier) {
    // image bitmap
    val bitmap: MutableState<Bitmap?> = remember { mutableStateOf(null) }
    val imageModifier: Modifier = modifier
        .size(50.dp, 50.dp)
        .clip(CircleShape)

    Glide.with(LocalContext.current)
        .asBitmap()
        .load(source)
        .into(object : CustomTarget<Bitmap>() {
            override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                bitmap.value = resource
            }

            override fun onLoadCleared(placeholder: Drawable?) {}
        })

    // bitmap 이 있으면
    bitmap.value?.asImageBitmap()?.let { fetchedBitmap ->
        Image(
            bitmap = fetchedBitmap,
            contentDescription = null,
            contentScale = ContentScale.Fit,
            modifier = imageModifier
        )
    } ?: Image(
        painter = painterResource(id = R.drawable.ic_empty_user),
        contentDescription = null,
        contentScale = ContentScale.Fit,
        modifier = imageModifier
    )
}

이번에도 하나하나(?) 설명하자면

• clip: 이미지의 모양을 잡아준다(RoundedCornerShape, CircleShape)
• onResourceReady: 이미지가 준비되었을때 호출되는 메서드

// bitmap 이 있으면
bitmap.value?.asImageBitmap()?.let { fetchedBitmap ->
    Image(
        bitmap = fetchedBitmap,
        contentDescription = null,
        contentScale = ContentScale.Fit,
        modifier = imageModifier
    )
} ?: Image(
    painter = painterResource(id = R.drawable.ic_empty_user),
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = imageModifier
)

이 부분은 비트맵으로 성공적으로 변환되었을때 위의 코드가 수행되고, 그렇지 않으면 아래 코드가 수행된다.

 

3. toolbar

마지막으로 toolbar를 만드는 방법을 간단히 알아보자.

@Composable
fun MyApPBar() {
    TopAppBar(
        elevation = 10.dp,
        backgroundColor = MaterialTheme.colors.primary,
        modifier = Modifier.height(58.dp)
    ) {
        Text(
            text = "리스트",
            modifier = Modifier
                .padding(8.dp)
                .align(Alignment.CenterVertically),
            fontSize = 18.sp,
            fontWeight = FontWeight.Black
        )
    }
}

topAppBar안에 Text를 넣어서 AppBar의 title을 설정 할 수 있다.

 

 

---

정리

이번에 공부해보면서 compose에 glide를 처음 사용해봤다.

이번 공부로 compose의 장점을 더 쉽게 알게 되었다(원래는 둥근 이미지 쓰려면 라이브러리 추가해서 써야 했지만, 안그래도 된다는것이 좋았다.개꿀)