https://developer.android.com/jetpack/compose/tutorial?hl=ko
Android Compose 튜토리얼 | Android 개발자 | Android Developers
컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Jetpack Compose는 네이티브 Android UI를 빌드하기 위한 최신 도구 키트입니다. Jetpack Compose는 더 적은 수의 코드,
developer.android.com
해당 링크를 보고 따라 적용해 보았다..
기존에 안드로이드를 배울때 xml을 통해서 만들었던거 같은데.. 시대가 변한거 같다
약간 예전에 스위프트를 배울때 UI를 지정할때 하던 방식과 비슷한 느낌을 많이 받았는데
MVVM모델 적용시 더욱 보기 편하고 구성하기 쉬울거 같다는 생각을 한다.
아직 MVVM아키텍처를 설계하는 방법을 잘 모르긴 하지만.. 차차 연습해 나가면서 해봐야 할거 같다
더 자세한 정보는
https://developer.android.com/jetpack/compose/mental-model?hl=ko
Compose 이해 | Jetpack Compose | Android Developers
Compose 이해 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Jetpack Compose는 Android를 위한 현대적인 선언형 UI 도구 키트입니다. Compose는 프런트엔드 뷰를 명령
developer.android.com
을 보는것을 추천드린다.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Compose_practiceTheme() {
Surface(modifier = Modifier.fillMaxSize()) {
Conversation(conversationSample)
}
}
}
}
}
data class Message(val author: String, val body: String)
//== VIEW
@Composable
fun MessageCard(msg: Message){
Row(modifier = Modifier.padding(all = 8.dp)){
Image(
painter = painterResource(id = jordan1) ,
contentDescription = "Jordan1 x OffWhite",
modifier = Modifier.run {
size(40.dp)
.clip(CircleShape)
.border(1.5.dp, MaterialTheme.colorScheme.secondary, CircleShape)
})
Spacer(modifier = Modifier.width(8.dp)
)
// 상태를 기억하는거 같음
var isExpanded by remember{ mutableStateOf(false) }
// 클릭시 반대 값으로 지정
Column(modifier = Modifier.clickable { isExpanded = !isExpanded }){
Text(text = msg.author,
color = MaterialTheme.colorScheme.secondary,
style = MaterialTheme.typography.titleLarge)
Spacer(modifier = Modifier.height(4.dp))
Surface(shape = MaterialTheme.shapes.medium, tonalElevation = 1.dp){
Text(text = msg.body,
modifier = Modifier.padding(all = 4.dp),
maxLines = if (isExpanded) Int.MAX_VALUE else 1,
style = MaterialTheme.typography.bodyMedium)
}
}
}
}
@Composable
fun Conversation(messages: List<Message>){
LazyColumn{
items(messages){ message ->
MessageCard(message)
}
}
}
@Preview(showBackground = true, name = "Light Mode")
@Preview(
uiMode = Configuration.UI_MODE_NIGHT_YES,
showBackground = true,
name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {
Compose_practiceTheme{
Surface{
Conversation(conversationSample)
}
}
}