2024.7.1.md

Compose 활용

• 애니메이션
• 부수효과
• TODO APP 실습

TODO APP 실습

내가 혼자서 만들어본 코드.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTheme {
                TodoScreen()
            }
        }
    }
}

@Composable
fun TodoScreen() {
    val list = remember { mutableStateListOf<TodoItem>() }
    var inputText by remember { mutableStateOf("") }
    Column {
        TopInputTodo(
            text = inputText,
            onTextChange = { inputText = it },
            onBtnClicked = {
                val item = TodoItem(text = inputText, isComplete = false)
                list.add(item)
                inputText = ""
            }
        )
        LazyColumn {
            items(list) { item ->
                TodoItem(
                    item = item,
                    onClickCheckBox = {
                        list[list.indexOf(item)] = it
                    },
                    onClickRemove = {
                        list.remove(item)
                    }
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopInputTodo(
    text : String,
    onTextChange : (String) -> Unit,
    onBtnClicked : () -> Unit,
){
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        OutlinedTextField(
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = colorResource(id = R.color.purple_500)
            ),
            value = text,
            modifier = Modifier
                .weight(1f)
                .padding(8.dp),
            onValueChange = {
                onTextChange(it)
            }
        )
        Spacer(modifier = Modifier.size(width = 10.dp, height = 0.dp))
        MyButton(
            modifier = Modifier.padding(end = 8.dp),
            text = "입력",
            onBtnClicked = onBtnClicked
        )
    }
}

@Composable
fun TodoItem(
    item : TodoItem,
    onClickCheckBox : (TodoItem) -> Unit,
    onClickRemove : () -> Unit
){
    Card(
        shape = RoundedCornerShape(4.dp),
        elevation = CardDefaults.elevatedCardElevation(5.dp),
        colors = CardDefaults.cardColors(Color.White),
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text(
                modifier = Modifier
                    .weight(1f)
                    .padding(start = 8.dp),
                text = item.text
            )
            Text(text = "완료")
            Checkbox(checked = item.isComplete, onCheckedChange = {
                onClickCheckBox(item.copy(isComplete = it))
            })
            MyButton(
                modifier = Modifier.padding(end = 4.dp),
                text = "수정",
                onBtnClicked = {}
            )
            MyButton(
                modifier = Modifier
                    .padding(end = 8.dp)
                    .padding(vertical = 10.dp),
                text = "삭제",
                onBtnClicked = onClickRemove
            )
        }
    }
}

data class TodoItem(
    val text : String,
    val isComplete : Boolean
)

@Composable
fun MyButton(
    modifier: Modifier,
    text : String,
    onBtnClicked: () -> Unit
){
    Button(
        modifier = modifier,
        colors = ButtonDefaults.buttonColors(colorResource(id = R.color.purple_500)),
        shape = RoundedCornerShape(4.dp),
        onClick = onBtnClicked,
    ) {
        Text(text = text)
    }
}

공통으로 사용되는 버튼은 따로 빼고 StateHoisting을 사용하여 혼자 이미지대로 만들어본 코드. 수정 부분은 좀 더 고민하고 만든 후 강의와 비교 분석 해보기.