TIL 71일차 - 최종프로젝트

Compose 에서의 화면 이동 구현하는 방법

@Composable
fun Title() {
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.helldivers2_title),
            contentDescription = "Hell Divers 2 Title",
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .fillMaxSize()
                .clickable {
                    val intent = Intent(this, StratagemListActivity::class.java)
                    startActivity(intent)
                 }
        )
        Column(
            modifier = Modifier.align(Alignment.BottomCenter),
        ) {
            Text(
                modifier = Modifier.align(Alignment.CenterHorizontally),
                text = "HELL DIVERS 2",
                fontSize = 42.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White
            )

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

            Text(
                modifier = Modifier.align(Alignment.CenterHorizontally),
                text = "Click anywhere to continue",
                fontSize = 22.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White
            )
            Spacer(modifier = Modifier.height(150.dp))
        }
    }
}

 

처음엔 위와 같이 Compose의 Box 안에서 직접 intent를 호출하려 했다. 하지만 위와 같이 Composable 함수 내에서 직접 startActivity()를 호출하는 방법은 올바르지 않았다. Composable 함수는 UI를 구성하는 데 사용되며, 직접적인 side effect(예: 액티비티 시작)를 포함해서는 안된다. 따라서 클릭 이벤트를 상위 컴포넌트로 전달하고 그곳에서 처리하는 방법이 적절하다.

@Composable
fun Title(onTitleClick: () -> Unit) {
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.helldivers2_title),
            contentDescription = "Hell Divers 2 Title",
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .fillMaxSize()
                .clickable(onClick = onTitleClick)
        )
        Column(
            modifier = Modifier.align(Alignment.BottomCenter),
        ) {
            Text(
                modifier = Modifier.align(Alignment.CenterHorizontally),
                text = "HELL DIVERS 2",
                fontSize = 42.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White
            )

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

            Text(
                modifier = Modifier.align(Alignment.CenterHorizontally),
                text = "Click anywhere to continue",
                fontSize = 22.sp,
                fontWeight = FontWeight.Bold,
                color = Color.White
            )
            Spacer(modifier = Modifier.height(150.dp))
        }
    }
}

 

이렇게 하면 클릭 이벤트 처리를 Composable 외부로 이동시켜 액티비티에서 직접 처리할 수 있다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HellDivers2InfoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize()
                ) {
                    Title(
                        onTitleClick = {
                            val intent = Intent(this, StratagemListActivity::class.java)
                            startActivity(intent)
                        }
                    )
                }
            }
        }
    }
}

 

해당 이벤트 처리는 다음과 같이 할 수 있다.

@Preview(showBackground = true)
@Composable
fun TitlePreview() {
    Title(
        onTitleClick = {}
    )
}

 

또한 Preview는 실제 앱 컨텍스트 없이 UI를 미리 보기 위한 것이므로, 실제 로직을 포함할 수 없다. 따라서 빈 람다를 전달했다.