implementation "com.github.AlexExiv.Router-Android:router:$version"
implementation "com.github.AlexExiv.Router-Android:annotations:$version"
implementation "com.github.AlexExiv.Router-Android:compose:$version" // add support of compose
kapt "com.github.AlexExiv.Router-Android:processor:$version"
Code example
You can find an example project at
Application
In the first step, we need to configure our Application class.
Your Application class should be inherited from the ComposeApplication class and create and initialize the RouterComponentImpl in the onCreateRouter method.
If you're not using Component injection, the App class should look like this:
class App: ComposeApplication<RouterComponentImpl>()
{
override fun onCreateRouter()
{
routerComponent = RouterComponentImpl()
routerComponent.initialize(MainPath(), { _, _ -> AnimationControllerComposeSlide() })
}
}
Otherwise:
class App: ComposeApplication<RouterComponentImpl>()
{
lateinit var component: AppComponent
override fun onCreateComponent()
{
super.onCreateComponent()
component = DaggerAppComponent.builder()
.appModule(AppModule(AppData("App String")))
.userModule(UserModule(UserData()))
.build()
}
override fun onCreateRouter()
{
routerComponent = RouterComponentImpl()
routerComponent.initialize(MainPath(), { _, _ -> AnimationControllerComposeSlide() }, component)
}
}
MainActivity
Simple MainActivity class:
class MainActivity: ComposeActivity()
{
/**
* Root content. It's entry point for your compose view
*/
@Composable
override fun Content()
{
RouterTheme {
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
ComposeNavigator(router = router)
}
}
}
}
It's enough if you're using single activity way. Now let's create our first Compose view
SimpleView
/**
* This view represents screen
*/
class SimpleView: BaseViewCompose
{
@Composable
override fun Root() // this is a Root view for the screen here you can place your Compose code
{
Simple()
}
}
@Composable
fun Simple()
{
Box(modifier = Modifier.fillMaxSize()) {
Row {
Column {
Text(text = "I'm a simple Compose view")
}
}
}
}
SimplePath
Using with class we will navigate to the SimpleView screen
class SimplePath: RoutePath
Now we have to connect SimplePath with SimpleView. In the case of Compose we have the same way of implementing of RouteControllers and Paths. Look at simple example bellow
@Route
abstract class SimpleRouteController: RouteController<SimplePath, SimpleView>()
It generates the onCreateView method by default if you don't need to pass there extra parameters
Here, we have another example of a simple RouteController. In this case, we aim to pass parameters to the screen. When you need to transmit data to your Compose view, you'll need to implement onCreateView yourself and deliver the data to the view, perhaps in the constructor.
Important: Ensure that the data is serializable to be preserved in the state.
data class SimplePath(val title: String): RoutePath
@Route
class SimpleRouteController: RouteController<SimplePath, SimpleView>()
{
override fun onCreateView(path: SimplePath): SimpleView = SimpleView(path.title)
}
Code example with ViewModel
Now let's take a look at how RouteController looks like when our ComposeView has a ViewModel
RouteController
When working with ViewModels, it's beneficial to create a typealias of RouteController
typealias RouteControllerApp<Path, VM, V> = RouteControllerVM<Path, VM, AndroidComposeViewModelProvider, V> // if you don't use Component fo injection
typealias RouteControllerApp<Path, VM, V> = RouteControllerVMC<Path, VM, AndroidComposeViewModelProvider, V, AppComponent> // otherwise
If you're not passing arguments to your screen, the definition of RouteController remains almost the same, except for adding SimpleViewModel to the RouteController.
class SimplePath: RoutePath // The same
// Simple case
@Route
abstract class SimpleRouteController: RouteControllerApp<SimplePath, SimpleViewModel, SimpleView>()
If you wish to pass arguments, you must override the onCreateViewModel method and create the ViewModel as shown in the code below:
class SimplePath(val step: Int): RoutePath
// When you need to pass data to the ViewModel you have to override the onCreateViewModel method
@Route
abstract class SimpleRouteController: RouteControllerApp<SimplePath, SimpleViewModel, SimpleView>()
{
override fun onCreateViewModel(modelProvider: AndroidComposeViewModelProvider, path: SimplePath): SimpleViewModel =
modelProvider.getViewModel { SimpleViewModel(path.step, it) }
}
SimpleView
But also we have to add ViewModel to the SimpleFragment.
Define a base fragment class with ViewModel from the Fragment class
class SimpleView: BaseViewCompose()
{
@Composable
override fun Root()
{
Simple(viewModel = routerViewModel())
}
}
@Composable
fun Simple(
viewModel: SimpleViewModel // our ViewModel
)
{
val router = LocalRouter.currentOrThrow // Access current router
Surface(modifier = Modifier.fillMaxSize()){
Column(modifier = Modifier.fillMaxSize()){
Row {
Text(text = "I'm a SimpleView with ViewModel")
}
}
}
}
SimpleViewModel
class SimpleViewModel(val step: Int, app: Application): AndroidViewModel(app)
See other examples here
The second step involves implementing a simple MainActivity class. This class should inherit from the ComposeActivity class from the package.
To create a screen in Compose, you need to create a class or data class that inherits from the BaseViewCompose class in the bootstrap . Then, override the Root method, which serves as the entry point.
If you use Hilt as dependency injection framework use module and read to know how to pass arguments.
SimpleViewModel should be inherited from the AndroidViewModel class in the package.
It's a good practice to create a BaseViewModel class. See example of