Compose 기초 - Image, Card, State

황준하·2023년 1월 28일
0

Android-Kotlin-Compose

목록 보기
4/9
  • 위임(by) 없는 코드
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.layout.*
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material.*
    import androidx.compose.material.icons.Icons
    import androidx.compose.material.icons.filled.Favorite
    import androidx.compose.material.icons.filled.FavoriteBorder
    import androidx.compose.runtime.*
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.layout.ContentScale
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.unit.dp
    
    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                ImageCard()
            }
        }
    }
    
    @Composable
    fun ImageCard() {
        val isFavorite = remember {
            // mutableStateOf가 바뀌는 것 isFavorite이 바뀌는 것이 아님 그래서 상수(val)로 해도 된다.
            mutableStateOf(false)
        }
    
        Card(
            modifier = Modifier
                .fillMaxWidth(0.5f)
                .padding(16.dp),
            shape = RoundedCornerShape(8.dp),
            elevation = 5.dp
        ) {
            Box(
                modifier = Modifier.height(200.dp),
            ) {
                Image(
                    painter = painterResource(id = R.drawable.img),
                    contentDescription = "Yun_ji",
                    contentScale = ContentScale.Crop
                )
                Box(
                    modifier =
                    Modifier.fillMaxSize(),
                    contentAlignment = Alignment.TopEnd
                ) {
                    IconButton(onClick = {
                        isFavorite.value = !isFavorite.value
                    }) {
                        Icon(
                            imageVector = if(isFavorite.value) Icons.Default.Favorite else Icons.Default.FavoriteBorder,
                            contentDescription = "favorite",
                            tint = Color.White
                        )
                    }
                }
            }
        }
    }
  • 위임(by) 처리 코드
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.layout.*
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material.*
    import androidx.compose.material.icons.Icons
    import androidx.compose.material.icons.filled.Favorite
    import androidx.compose.material.icons.filled.FavoriteBorder
    import androidx.compose.runtime.*
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.setValue
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.layout.ContentScale
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.unit.dp
    
    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                ImageCard()
            }
        }
    }
    
    @Composable
    fun ImageCard() {
        // import androidx.compose.runtime.getValue
        // import androidx.compose.runtime.setValue
        // 위 두가지를 import 해주고 by 처리하기
        // isFavorite var로 변수 처리 해주기
        // isFavorite가 mutableStateOf에서 Boolean으로 전환됨
        var isFavorite by remember {
            mutableStateOf(false)
        }
    
        Card(
            modifier = Modifier
                .fillMaxWidth(0.5f)
                .padding(16.dp),
            shape = RoundedCornerShape(8.dp),
            elevation = 5.dp
        ) {
            Box(
                modifier = Modifier.height(200.dp),
            ) {
                Image(
                    painter = painterResource(id = R.drawable.img),
                    contentDescription = "Yun_ji",
                    contentScale = ContentScale.Crop
                )
                Box(
                    modifier =
                    Modifier.fillMaxSize(),
                    contentAlignment = Alignment.TopEnd
                ) {
                    IconButton(onClick = {
                        isFavorite = !isFavorite
                    }) {
                        Icon(
                            imageVector = if(isFavorite) Icons.Default.Favorite else Icons.Default.FavoriteBorder,
                            contentDescription = "favorite",
                            tint = Color.White
                        )
                    }
                }
            }
        }
    }
  • rememberSaveable
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.layout.*
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material.*
    import androidx.compose.material.icons.Icons
    import androidx.compose.material.icons.filled.Favorite
    import androidx.compose.material.icons.filled.FavoriteBorder
    import androidx.compose.runtime.*
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.saveable.rememberSaveable
    import androidx.compose.runtime.setValue
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.layout.ContentScale
    import androidx.compose.ui.res.painterResource
    import androidx.compose.ui.unit.dp
    
    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                ImageCard()
            }
        }
    }
    
    @Composable
    fun ImageCard() {
        // 화면 전환시 안드로이드는 activity를 초기화 한다.
        // rememberSaveable 처리해주면 유지된다.
        var isFavorite by rememberSaveable {
            mutableStateOf(false)
        }
    
        Card(
            modifier = Modifier
                .fillMaxWidth(0.5f)
                .padding(16.dp),
            shape = RoundedCornerShape(8.dp),
            elevation = 5.dp
        ) {
            Box(
                modifier = Modifier.height(200.dp),
            ) {
                Image(
                    painter = painterResource(id = R.drawable.img),
                    contentDescription = "Yun_ji",
                    contentScale = ContentScale.Crop
                )
                Box(
                    modifier =
                    Modifier.fillMaxSize(),
                    contentAlignment = Alignment.TopEnd
                ) {
                    IconButton(onClick = {
                        isFavorite = !isFavorite
                    }) {
                        Icon(
                            imageVector = if(isFavorite) Icons.Default.Favorite else Icons.Default.FavoriteBorder,
                            contentDescription = "favorite",
                            tint = Color.White
                        )
                    }
                }
            }
        }
    }
  • 재사용성을 위한 코드
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.*
import androidx.compose.runtime.getValue
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

class MainActivity: ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle ? ) {
        super.onCreate(savedInstanceState)
        setContent {
            var isFavorite by rememberSaveable {
                mutableStateOf(false)
            }
            ImageCard(
                modifier = Modifier
                .fillMaxWidth(0.5 f)
                .padding(16. dp),
                isFavorite = isFavorite,
            ) {
                favorite - >
                    isFavorite = favorite
            }
        }
    }
}

@Composable
fun ImageCard(
    modifier: Modifier = Modifier,
    isFavorite: Boolean,
    onTabFavorite: (Boolean) - > Unit
) {
    Card(
        modifier = modifier,
        shape = RoundedCornerShape(8. dp),
        elevation = 5. dp
    ) {
        Box(
            modifier = Modifier.height(200. dp),
        ) {
            Image(
                painter = painterResource(id = R.drawable.img),
                contentDescription = "Yun_ji",
                contentScale = ContentScale.Crop
            )
            Box(
                modifier =
                Modifier.fillMaxSize(),
                contentAlignment = Alignment.TopEnd
            ) {
                IconButton(onClick = {
                    onTabFavorite(!isFavorite) //.invoke 생략
                }) {
                    Icon(
                        imageVector =
                        if (isFavorite) Icons.Default.Favorite
                        else Icons.Default.FavoriteBorder,
                            contentDescription = "favorite",
                            tint = Color.White
                    )
                }
            }
        }
    }
}

틀린 부분 지적은 언제나 환영해요🤗
profile
Xlnt한 날까지 노력하는 개발자

0개의 댓글