Image

Image는 화면에 이미지를 띄위기 위한 Composable이다.

1. 이미지 속성

이미지의 속성을 보면 imageVector, painter, bitmap 총 3가지를 활용하여 사용할 수 있다.

이 포스트에서는 imageVector와 painter 만 다뤄보고 bitmap은 다음 포스트에 다뤄볼 것이다.

bitmap을 활용하기 위해서는 context가 있는 activity 등에서 가지고 온다음에 bitmap을 주입 시켜줘야 하기에 이러한 타입도 있다는 정도만 알면 될 것 같다!

2. painter를 사용해서 Image를 만들어보자!

drawable 폴더에 sample 이미지를 넣어주자

@Composable
fun Greeting() {
    Column {
        //1. Image를 만들자
        //Image는 painter, imageVector, bitmap 3가지가 있는데 painter를 사용해보자
        Image(
            painter = painterResource(id = R.drawable.sample),
            contentDescription = "모래 위 핸드폰"
        )
    }
}

painter에 painterResource를 활용하여 drawable에 있던 sample 이미지를 전달해주면 잘 나오는 것을 볼 수 있다.

3. imageVector를 활용해서 Image를 만들어보자!

기본 vector 아이콘을 사용해 볼 것이다.

@Composable
fun Greeting() {
    Column {
        //1. Image를 만들자
        //Image는 painter, imageVector, bitmap 3가지가 있는데 painter를 사용해보자
        Image(
            painter = painterResource(id = R.drawable.sample),
            contentDescription = "모래 위 핸드폰"
        )

        //2.imageVector를 사용해보자
        Image(
            imageVector = Icons.Filled.Settings,
            contentDescription = "세팅"
        )   
    }
}

Icons.Filled를 통해서 세팅 모양의 벡터이미지가 나타나는 것을 볼 수 있다

하지만 이미지를 제대로 사용하기 위해서는 이렇게 정적인 이미지를 쓰는게 아니라 네트워크를 통해서 이미지를 가져와야 한다.

다음 포스트는 networkImage에 대해 다뤄보려고 한다.

jetpack compose 연습 깃헙 링크
https://github.com/unso99/jetpack_compose_practice