This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

There is a long-standing idea of APP construction on the Internet, that is, APP is built by an Activity and multiple fragments. Fragments used to be a pit, and hosting an Activity as a page was more stable and less of a development burden. However, there is an official desire to make fragments better, starting with ViewPager2, Jetpack Navigation, and the new androidX.Fragment. app package. The reconstructed Fragment and a series of new related components greatly optimize the difficulty and stability of development, which also makes the difficulty of building a single Activity and multiple fragments APP drop sharply.

So what are the benefits of replacing activities with fragments?

Creating a Fragment instance in the first place is less than creating an Activity instance. More importantly, Fragmen is much more flexible than an Activity as one of its four components, and can easily fit more complex requirements. An Activity is an ideal place to place global elements around an application’s interface. Instead, Fragments are better suited for defining and managing interfaces for individual screens or parts of screens.

P: Jetpack’s Navigation library provides an easy way to manage Fragment transactions and fallback stacks, and recently Navigation 2.4.0 (albeit alpha) has introduced “multiple return stacks”. Managing multiple return stacks also facilitates module partitioning.

The article in

Just like the title of the article, this series of articles aims to introduce how to build an APP with multiple fragments in A single Activity. The article will first introduce the navigation and communication of multiple fragments in an Activity, and then the combination of single A mode and componentization. In this example I will use some of the components of Jetpack such as Navigation, ViewModel, etc. I will introduce some of the features of the components as necessary to save you time, so I hope you have some knowledge of Jetpack before you look at it (thanks).

Jetpack Navigation

The single-A mode is built on Navigation, which is A library that facilitates page hopping. It can jump to activities or fragments and has the function of routing.

Install dependencies

In the Gradle file, I add the dataBinding configuration item in addition to the Navigation dependency (for layout convenience).

build.gradle(:app)

plugins { id 'com.android.application' id 'kotlin-android' // ... } android { // ... compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions {jvmTarget = '1.8'} buildFeatures {dataBinding = true}} dependencies {//... Implementation 'androidx. Core: the core - KTX: 1.3.2' implementation 'androidx. Lifecycle: lifecycle - livedata - KTX: 2.2.0' Implementation 'androidx. Lifecycle: lifecycle - viewmodel - KTX: 2.2.0' implementation 'androidx. Navigation: navigation - fragments - KTX: 2.3.5' implementation 'androidx. Navigation: navigation - UI - KTX: 2.3.5'}Copy the code

Navigation the three musketeers

There are three main concepts in Navigation: Navigation Graph, NavHost and NavController.

1.Navigation graph

A Navigation graph is a description of a Navigation graph. It can be built from XML files or pure code. One of the interesting aspects of this component is that AS supports navigation XML visualization, which makes it easy to configure jump and fallback destinations and animations. The following image simulates a multi-page NavGraph, so feel the clarity of page navigation like a brain map!

2.NavHost

An empty container that displays the target in the navigation diagram. Everything in the navigation diagram is displayed in this container. It’s a View that sits in the Activity layout file, and if you want to add something like a hover box on top of all your pages, just add it to your Activity. (This idea is only limited to single A multi-F APP architecture. For more information, click “New Idea of dragging and dropping suspended controls across pages”)

3.NavController

Manage the objects navigated by the application in NavHost. As the user moves through the application, the NavController arranges the exchange of the target content in NavHost.

In short, Navigation is a container that controls the page to follow the preset Navigation path.