TIL 66일차 - 최종프로젝트

위 스크린샷은 최종 프로젝트로 만든 앱 화면의 일부이다. 프로젝트에서는 xml 레이아웃 파일로 만들었지만 시험삼아 위 화면과 (UI만) 똑같은 compose 코드를 만들어보았다.

package com.android.composetest

import ...

class SettingsActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize()
                ) {
                    SettingsScreen()
                }
            }
        }
    }
}
@Composable
fun SettingsScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(start = 25.dp, top = 25.dp, end = 25.dp)
    ) {
        Text(
            text = "내 정보 관리",
            fontSize = 34.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Black
        )

        Spacer(modifier = Modifier.height(55.dp))

        SettingsItem(
            title = "별명",
            value = "cococo35"
        )

        SettingsItem(
            title = "이메일",
            value = "test@google.com"
        )

        SettingsItem(
            title = "비밀번호",
            value = "********"
        )

        Spacer(modifier = Modifier.weight(1f))

        Text(
            text = "로그아웃",
            fontSize = 22.sp,
            fontWeight = FontWeight.Bold,
            color = Color.DarkGray
        )

        Spacer(modifier = Modifier.height(20.dp))

        Text(
            text = "Hanple 탈퇴",
            fontSize = 22.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFFFF6B6B)
        )

        Spacer(modifier = Modifier.height(45.dp))
    }
}

@Composable
fun SettingsItem(title: String, value: String) {
    Column(modifier = Modifier.padding(vertical = 10.dp)) {
        Text(
            text = title,
            fontSize = 22.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Black
        )
        Text(
            text = value,
            fontSize = 20.sp,
            color = Color.DarkGray,
            modifier = Modifier.padding(top = 5.dp)
        )
        Divider(
            color = Color.LightGray,
            thickness = 1.dp,
            modifier = Modifier.padding(top = 10.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun SettingsScreenPreview() {
    SettingsScreen()
}

UI상으로는 나름 유사한 것을 확인할 수 있다. 텍스트는 하드코딩했고, 상호작용은 아직 전혀 구현되지 않았다. 

compose가 아직 전혀 익숙하지 않아서, UI만 작성하는 데에도 시간이 오래 걸린다. 아직 compose의 구조가 헷갈리고 함수 사용법을 잘 모르는 문제가 있다.