Today's

길을 나서지 않으면 그 길에서 만날 수 있는 사람을 만날 수 없다

모바일 앱(안드로이드)

안드로이드 앱 만들기 : navigation 을 편리하게 ? (두번째 이야기)

Billcorea 2022. 8. 1. 00:05
반응형

https://flatteredwithflutter.com/using-compose-destinations%ef%bf%bc/

 

Using compose destinations

We will cover briefly: Current navigation in composeUsing compose destinations(Optional) Modify existing test cases Current navigation in compose We get Compose Navigation from the Jetpack Com…

flatteredwithflutter.com

navigation 의 첫 이야기 다음... 그것을 어떻게 풀어낼 것인가를 찾아 돌아다니다가 또 하나의 링크를 찾았다. 이것을 보면서 이해를 하기 시작해 본다. 

 

그래서 오늘은 따라해 보기를 해 보아야겠다.

 

먼저 build gradle 에 설정을 따라해 본다. 

 

plugins {
    ...
    id 'com.google.devtools.ksp' version '1.7.0-1.0.6'
}

1.7.0-1.0.6 은 코틀린 버전과 연계가 되어야 하는 버전을 맞추어 주는 것으로 이해를 하였다. 코틀린이 1.7.10까지 패치가 되어 가는 것 같기는 하지만, 일단 확인된 바로는 1.7.0 까지 인 것 같아서...

 

android {

    ...

    applicationVariants.all { variant ->
        kotlin.sourceSets {
            getByName(variant.name) {
                kotlin.srcDir("build/generated/ksp/${variant.name}/kotlin")
            }
        }
    }

    kotlin.sourceSets.all {
        languageSettings.optIn("kotlin.RequiresOptIn")
    }

    ...

}

이 부분이 들어가면 gradle 빌드를 통해서 kotlin 이라는 폴더가 생기면서 필요한 class 등을 만들어 주는 경로를 설정하는 것으로 이해가 되었다.

 

dependencies {

...
    // compose destination
    // https://github.com/raamcosta/compose-destinations 에서 최종 버전을 확인
    implementation 'io.github.raamcosta.compose-destinations:animations-core:1.7.15-beta'
    ksp 'io.github.raamcosta.compose-destinations:ksp:1.7.15-beta'
    implementation "androidx.hilt:hilt-navigation-compose:1.0.0"

}

다음은 implementation  을 선언해 주는 것인데, 버전 확인은 원작자의 github 에서 확인하여 수정하면 최신 버전이 사용될 것 같다. 

 

다음은 activity 을 만들어 주어야 하는 데... 지금은 테스트 하는 것이기 때문에 간단하게 수정해 보았다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    doUpdateCheck()

    setContent {

        MainTheme {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = softBlue
            ) {
				// github 에서 본 것 처럼 추가.
                val navHostEngine = rememberAnimatedNavHostEngine()
                DestinationsNavHost(navGraph = NavGraphs.root, engine = navHostEngine)

            }
        }
    }
}

이렇게 추가를 해 주고 나면 NavGraphs 가 생성이 되지 않아서 오류 표시가 나오지만, 일단은 무시하고 화면을 구성할 부분을 만들어 주었다.

 

@Destination(start = true)
@Composable
fun LoginScreen(
    navigator: DestinationsNavigator
) {
    Card(modifier = Modifier.fillMaxSize()) {
        Text(text = stringResource(id = R.string.AppId))
    }
    Button(onClick = {
        navigator.navigate(HomeScreenDestination)
    }) {
        Text(text = stringResource(id = R.string.action_geoList))
    }

}

@Destination
@Composable
fun HomeScreen(
    navigator: DestinationsNavigator
) {
    /*...*/
    Button(
        onClick = {
            navigator.navigate(
                ProfileScreenDestination(
                    id = "someId",
                    isEditable = true
                )
            )
        }
    ) {
        Text(text = stringResource(id = R.string.action_addItem))

    }
}

@Destination
@Composable
fun ProfileScreen(
    navigator: DestinationsNavigator,
    id: String,
    isEditable: Boolean = false
) {
    Button (onClick = {
        navigator.popBackStack()
        navigator.navigate(SearchScreenDestination("Text"))
    }) {
        Text(text = stringResource(id = R.string.action_Setting))
    }
}

@Destination
@Composable
fun SearchScreen(
    navigator: DestinationsNavigator,
    query: String?
) {
    Button (onClick = {
        navigator.navigate(HomeScreenDestination)
    }) {
        Text(text = stringResource(id = R.string.action_setHome))
    }
}

github 에서 보았던 예제를 참고해서 만들었고 동작 확인을 위해서 버튼만 추가해서 처리가 되는 지 확인해 보았다.

 

그 다음은 빌드를 위한 준비를 해 보자. android studio 의 terminal 에서 command 창을 열어서 

 

gradlew 실행

./gradlew clean build 을 입력해서 실행해 주면 gradle 을 실행 되면서 필요한 빌드를 하게 된다. 

 

생성된 폴더 와 class들

실행이 완료 되면 kotlin 폴더 아래와 위 그림과 같이 generated 된 파일들이 생성이 되고 이제 정말 앱을 빌드할 준비가 된다. 이제 나의 앱을 build 해서 실행해 보면 된다. 

 

https://billcorea.tistory.com/205

 

안드로이드 앱 만들기 : Compose Navigation ... 인터넷 펌.

https://medium.com/@cybercoder.naj/compose-navigation-in-3-minutes-5cff3c57c34e Compose Navigation in 3 Minutes Quick guide for navigation between composables in a Compose project medium.com 나름대..

billcorea.tistory.com

이렇게 실행해 보면 navigation 선언등등 이전 포스팅에서 적었던 것 같은 NavigationItem 등등 선언하지 않아도 navigation 을 구현할 수 있으므로 추가 하거나 할 때 다른 작업들을 잊어 버려도 오류가 나지 않을 것 같다.   (기능등을 비교해 보면 좋을 것 같다.)

 

즐~ 코딩 하길 바라며... 이걸 만든 원작자에게 감사의 인사를 보낸다...

반응형