Android Jetpack Compose 초기초 시식

package com.example.composebasictutorial

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composebasictutorial.ui.theme.ComposeBasicTutorialTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeBasicTutorialTheme {
                // A surface container using the 'background' color from the theme


                var clickCount: MutableState<Int> = remember { mutableStateOf(0) }
                var messageList: SnapshotStateList<Message> =
                    remember { mutableStateListOf<Message>() }
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                    Column {

                        Greeting("Android", clickCount = clickCount.value, onClicked = {
                            Log.d("TAG", "onCreate: 클릭됨")
                            clickCount.value = clickCount.value + 1
                            val newMsg = Message(
                                id = clickCount.value,
                                content = "메세지 입니다 ${clickCount.value}"
                            );
                            messageList.add(newMsg)
                        })

                        MessageList(messageList, onDeleteClicked = {
                            Log.d("TAG", "onDeleteClicked: ${it.id}")
                            messageList.remove(it)
                        })
                    }
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, clickCount: Int, onClicked: () -> Unit) {

    Column() {
        Text(text = "Hello $name!")
        Text(text = "클릭된 카운트 : $clickCount")
        Button(onClicked) {
            Text("카운트업")
        }
    }
}

@Composable
fun MessageRow(msg: Message, onDeleteClicked: (Message) -> Unit) {


    Surface(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        shape = RoundedCornerShape(8.dp),
        border = BorderStroke(1.dp, Color.LightGray),
        shadowElevation = 10.dp,
    ) {
        Column() {
            Text("id: ${msg.id} / msg : ${msg.content}")
            Button({ onDeleteClicked(msg) }) {
                Text("삭제")
            }
        }
    }
}

@Composable
fun MessageList(messages: List<Message>, onDeleteClicked: (Message) -> Unit) {
    LazyColumn {
        items(messages) { message ->
            MessageRow(message, onDeleteClicked)
        }
    }
}

//@Preview(showBackground = true)
//@Composable
//fun GreetingPreview() {
//    ComposeBasicTutorialTheme {
//        Greeting("Android", clickCount = 10, onClicked = {
//            Log.d("TAG", "onCreate: 클릭됨")
//        })
//    }
//}

 

Compose는 선언형 프로그래밍으로 UI를 만드는 프레임워크

 

Surface: 스타일을 지정

 

remember: 상태를 관리

 

@Composable: 컴포저블 함수를 의미

다른 컴포저블 함수(기본제공 말고도, 기본제공을 조합해서 만든함수) 들을 호출할 수 있으며, 반환타입을 가질 필요없다.

ex) Column, LazyColumn, Text...

https://developer.android.com/jetpack/compose/lists?hl=ko

목록 및 그리드  |  Jetpack Compose  |  Android Developers