Navegación en proyectos de módulos múltiples

La navegación en el desarrollo de aplicaciones de Android es bastante importante y debe pensar dos veces qué biblioteca se adapta mejor (o su propia solución) y cómo será conveniente usarla cuando la aplicación se haga más grande. Además, podría ser bueno pensar en lo fácil que será cambiar su implementación a otra.

Antes de comenzar, déjame contar una historia. Llamémoslo así: "Cómo hicimos el proyecto modular y por qué odiaba nuestra navegación".

Teníamos un proyecto de módulo único y todo funcionó bien, excepto el tiempo de construcción, eso se debe a que usamos Dagger y nos llevó demasiado tiempo generar un solo componente. Así que decidimos separar el proyecto en módulos por características, por ejemplo, una función de inicio de sesión, una función de ayuda, etc.

Tuvimos muchas dificultades porque tuvimos que mover la lógica de red a su propio módulo Gradle, el inicio de sesión de dominio en su módulo y también tuvimos problemas con la navegación.

En nuestra implementación, teníamos un enrutador que conocía cada Fragmento y era responsable de las transiciones entre ellos. Desafortunadamente, todos los Fragmentos sabían que existía el enrutador y sabían sobre otros Fragmentos, porque el Fragmento le dijo al enrutador qué Fragmento debería abrirse o el Fragmento estaba esperando los resultados de otro Fragmento. Estas cosas arruinaron la idea de crear módulos de funciones independientes.

Por lo tanto, he estado pensando cómo mejorarlo, cómo romper estas conexiones entre los Fragmentos, cómo deshacerme del conocimiento de que hay algún enrutador. En este artículo, mostraré lo que he hecho.

Que haremos

La aplicación será súper simple pero será modular. Habrá un módulo de aplicación y tres módulos de características:

• Módulo de aplicación : este módulo sabe todo sobre la aplicación y allí implementaremos nuestra navegación. Usaremos el componente de navegación de JetPack.
• Módulo de preguntas : este módulo es responsable de la función de preguntas. El módulo no sabe nada sobre el módulo de la aplicación o cualquier otro módulo. Habrá un QuestionsFragment y una interfaz de QuestionsNavigation .
• Módulo de preguntas : habrá una función de preguntas. Como el módulo anterior, no conoce otros módulos. Ese módulo contendrá un QuestionFragment y una interfaz QuestionNavigation .
• Módulo de resultados : esta es una función de resultados. Además, es un módulo completamente independiente. Habrá un RightAnswerFragment con la interfaz RightAnswerNavigation y habrá un WrongAnswerFragment con una interfaz WrongAnswerNavigation .

El código fuente de la aplicación se puede encontrar aquí: GitHub .

Implementación

En este artículo, usaré la biblioteca ComponentsManager para obtener la navegación de la característica. En un proyecto real, proporcionaré la navegación de características por Dagger, pero para este pequeño proyecto no es necesario. Además, la biblioteca ComponentManager le ayuda a usar Dagger en proyectos de módulos múltiples.

Estas listo Vamos!

Módulo de preguntas

Crea un módulo de Android y llámalo preguntas . Después de eso, asegúrese de que Kotlin esté configurado en el módulo y que ConstraintLayout y ComponentsManager se agreguen como dependencias.

 //build.gradle (for the questions module) apply plugin: 'com.android.library' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { ... } dependencies { ... implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation 'androidx.appcompat:appcompat:1.1.0-alpha01' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' implementation "com.github.valeryponomarenko.componentsmanager:androidx:2.0.1" ... } 

En lugar de utilizar Route o Navigator en el Fragment , crearemos una interfaz de QuestionsNavigation que defina las transiciones necesarias. Por lo tanto, para el Fragmento, no importa cómo se implementarán esas transiciones, solo necesita esa interfaz y se basa en cuando se llama al método, la pantalla necesaria estará abierta.

 interface QuestionsNavigation { fun openQuestion(questionId: Long) } 

Para abrir una pantalla con una pregunta, simplemente llamamos al openQuestion(questionId: Long) y ya está. No nos importa cómo se abrirá la pantalla, ni siquiera nos importa si es Fragment o Activity u otra cosa.

Aquí está el QuestionsFragment y su diseño .

 class QuestionsFragment : Fragment() { private val navigation: QuestionsNavigation by lazy { XInjectionManager.findComponent<QuestionsNavigation>() } override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? = inflater.inflate(R.layout.fragment_questions, container, false) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) button_first_question.setOnClickListener { navigation.openQuestion(1) } button_second_question.setOnClickListener { navigation.openQuestion(2) } button_third_question.setOnClickListener { navigation.openQuestion(3) } } } 

Módulo de preguntas

En primer lugar, cree un módulo de biblioteca de Android y llámelo pregunta . El build.gradle del módulo debe contener las mismas dependencias que el archivo build.gradle del módulo de preguntas.

 //build.gradle (for the question module) apply plugin: 'com.android.library' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { ... } dependencies { ... implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation 'androidx.appcompat:appcompat:1.1.0-alpha01' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' implementation "com.github.valeryponomarenko.componentsmanager:androidx:2.0.1" ... } 

Después de eso creamos una interfaz que define la navegación del módulo. La idea de navegación en otros módulos será la misma que en la anterior.

Desde el QuestionFragment usuario puede abrir una pantalla de respuesta incorrecta o una pantalla de respuesta correcta para que la interfaz tenga dos métodos.

 interface QuestionNavigation { fun openWrongAnswer() fun openRightAnswer() } 

Lo último es fragmento. Para este fragmento, agregaremos un método complementario que devuelve un Bundle para que podamos pasar la identificación de la pregunta y usarla. El diseño del fragmento.

 class QuestionFragment : Fragment() { companion object { private const val EXTRA_QUESTION_ID = "me.vponomarenko.modular.navigation.question.id" fun createBundle(questionId: Long) = Bundle().apply { putLong(EXTRA_QUESTION_ID, questionId) } } private val navigation: QuestionNavigation by lazy { XInjectionManager.findComponent<QuestionNavigation>() } private val questionId: Long by lazy { arguments?.getLong(EXTRA_QUESTION_ID) ?: throw IllegalStateException("no questionId") } override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? = inflater.inflate(R.layout.fragment_question, container, false) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) text_question.text = getString(R.string.question, questionId) button_right_answer.setOnClickListener { navigation.openRightAnswer() } button_wrong_answer.setOnClickListener { navigation.openWrongAnswer() } } } 

Módulo de resultados

El último módulo de características es un módulo de resultados. Habrá dos fragmentos que muestran una respuesta correcta e incorrecta. Cree un módulo de biblioteca de Android y llámelo resultado , luego cambie build.gradle del módulo para que tenga las mismas dependencias que los módulos de características anteriores.

 //build.gradle (for the result module) apply plugin: 'com.android.library' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { ... } dependencies { ... implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation 'androidx.appcompat:appcompat:1.1.0-alpha01' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' implementation "com.github.valeryponomarenko.componentsmanager:androidx:2.0.1" ... } 

Comencemos por el fragmento de respuesta correcta. La interfaz de navegación tendrá un método porque el usuario solo puede abrir una pantalla de preguntas.

 interface RightAnswerNavigation { fun openAllQuestions() } 

El RightAnswerFragment , su diseño .

 class RightAnswerFragment : Fragment() { private val navigation: RightAnswerNavigation by lazy { XInjectionManager.findComponent<RightAnswerNavigation>() } override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? = inflater.inflate(R.layout.fragment_right, container, false) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) button_all_questions.setOnClickListener { navigation.openAllQuestions() } } } 

Como dije anteriormente, este módulo tiene dos Fragments , así que implementemos una pantalla de respuesta incorrecta.

En mi implementación, desde la pantalla de respuesta incorrecta, el usuario solo puede volver a la pantalla de la pregunta e intentar responderla nuevamente, por lo que la interfaz de navegación solo tiene un método.

 interface WrongAnswerNavigation { fun tryAgain() } 

Y el WrongAnswerFragment, su diseño .

 class WrongAnswerFragment : Fragment() { private val navigation: WrongAnswerNavigation by lazy { XInjectionManager.findComponent<WrongAnswerNavigation>() } override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? = inflater.inflate(R.layout.fragment_wrong, container, false) override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) button_try_again.setOnClickListener { navigation.tryAgain() } } } 

Módulo de aplicación

Hemos creado los módulos y es hora de conectarlos y ejecutar la aplicación.

Lo primero es lo primero, necesitamos editar el módulo build.gradle de la aplicación. Debe tener todos los módulos creados y una biblioteca de componentes de navegación con el Administrador de componentes.

 //build.gradle (for the app module) apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { ... } dependencies { ... implementation project(':questions') implementation project(':question') implementation project(':result') implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation 'androidx.appcompat:appcompat:1.1.0-alpha01' implementation 'com.github.valeryponomarenko.componentsmanager:androidx:2.0.1' implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha11' ... } 

Antes de implementar las clases que funcionan con la navegación, tenemos que agregar la navegación en sí. Utilizaremos el componente de navegación para construirlo.

Cree un archivo de recursos de navegación y llámelo nav_graph.xml . Habrá tres conexiones:

• El QuestionsFragment con el QuestionFragment
• El WrongAnswerFragment QuestionFragment con el WrongAnswerFragment QuestionFragment WrongAnswerFragment
• El RightAnwerFragment QuestionFragment con el RightAnwerFragment QuestionFragment RightAnwerFragment . Esta conexión tiene una pequeña diferencia. Si el usuario se encuentra en el RightAnswerFragment y presiona el botón Atrás, se lo devolverá al QuestionsFragment . ¿Cómo hacer que eso suceda? Simplemente seleccione la flecha que conecta el questionFragment con rightAnswerFragment , luego en la lista desplegable cerca del Pop para seleccionar el questionsFragment .

Aquí está la representación XML del gráfico de navegación.

 <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_graph" app:startDestination="@id/questionsFragment"> <fragment android:id="@+id/questionsFragment" android:name="me.vponomarenko.modular.navigation.questions.QuestionsFragment" android:label="QuestionsFragment"> <action android:id="@+id/action_questionsFragment_to_questionFragment" app:destination="@id/questionFragment" /> </fragment> <fragment android:id="@+id/questionFragment" android:name="me.vponomarenko.modular.navigation.question.QuestionFragment" android:label="QuestionFragment"> <action android:id="@+id/action_questionFragment_to_wrongAnswerFragment" app:destination="@id/wrongAnswerFragment" /> <action android:id="@+id/action_questionFragment_to_rightAnswerFragment" app:destination="@id/rightAnswerFragment" app:popUpTo="@+id/questionsFragment" /> </fragment> <fragment android:id="@+id/wrongAnswerFragment" android:name="me.vponomarenko.modular.navigation.result.wrong.WrongAnswerFragment" android:label="WrongAnswerFragment" /> <fragment android:id="@+id/rightAnswerFragment" android:name="me.vponomarenko.modular.navigation.result.right.RightAnswerFragment" android:label="RightAnswerFragment" /> </navigation> 

Luego, crea una clase Navigator . Obviamente, la clase es responsable de hacer transiciones entre fragmentos. Implementa todas las interfaces de navegación desde los módulos de funciones, no olvide agregar llamadas de las acciones correspondientes para abrir la pantalla requerida. Además, la clase tiene métodos para vincular el navController y desvincularlo.

 class Navigator : QuestionsNavigation, QuestionNavigation, RightAnswerNavigation, WrongAnswerNavigation { private var navController: NavController? = null override fun openQuestion(questionId: Long) { navController?.navigate( R.id.action_questionsFragment_to_questionFragment, QuestionFragment.createBundle(questionId) ) } override fun openWrongAnswer() { navController?.navigate(R.id.action_questionFragment_to_wrongAnswerFragment) } override fun openRightAnswer() { navController?.navigate(R.id.action_questionFragment_to_rightAnswerFragment) } override fun openAllQuestions() { navController?.popBackStack() } override fun tryAgain() { navController?.popBackStack() } fun bind(navController: NavController) { this.navController = navController } fun unbind() { navController = null } } 

En la línea 8 puede ver cómo paso la identificación de la QuestionFragment al Fragmento de QuestionFragment .

Después de eso, cree una clase NavApplication . En realidad, tuve que agregar esta clase para que Navigator esté disponible para otras clases, de lo contrario, sería más difícil obtener el navegador en los módulos de características. No olvides agregar esta clase al Manifiesto.

 class NavApplication : Application() { override fun onCreate() { super.onCreate() XInjectionManager.bindComponentToCustomLifecycle(object : IHasComponent<Navigator> { override fun getComponent(): Navigator = Navigator() }) } } 

Con las líneas 4ª a 6ª , sería posible obtener las implementaciones de la interfaz de navegación de las funciones llamando a XInjectionManager.findComponent ().

El último, pero no menos importante, cambia la clase MainActivity y su diseño .

 class MainActivity : AppCompatActivity() { private val navigator: Navigator by lazy { XInjectionManager.findComponent<Navigator>() } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } override fun onResume() { super.onResume() navigator.bind(findNavController(R.id.nav_host_fragment)) } override fun onPause() { super.onPause() navigator.unbind() } override fun onSupportNavigateUp(): Boolean = findNavController(R.id.nav_host_fragment).navigateUp() } 

Eso es todo, ahora puedes ejecutar la aplicación y ver cómo funciona.

Resumen

Buen trabajo! Hemos creado un sistema de navegación que:

• rompe las conexiones entre fragmentos en diferentes módulos de características,
• se puede cambiar fácilmente
• Es fácil de probar.

Crosspost