Android笔记(十):结合Navigation组件实现Compose界面的导航

在Android笔记(七)搭建Android JetPack Compose组件中Scaffold脚手架 一文中通过定义一个导航的函数来实现不同界面的切换。如果没有传递任何参数,这样的导航处理也是可以接受的,处理方式也非常简单。但是,如果考虑到不同Compose界面的切换且传递参数,或者有更复杂地处理情况,就可以考虑使用导航组件Navigation来实现。

一、导航组件的配置

新建一个项目模块,在模块对应的build.gradle.kt中中增加依赖:

implementation(“androidx.navigation:navigation-compose:2.7.4”)

注意:采用2.7.4版本,必须设置android的目标SDK和编译SDK为34版本

在本笔记中通过一个展示机器人相关信息来说明导航组件的实现。为此,分别定义实体类和不同的界面。

二、定义机器人实体类

@Parcelize
data class Robot(val name:String,val description:String,val icon:Int):Parcelable

三、定义要显示的主要界面

1.定义机器人列表界面

Android笔记(十):结合Navigation组件实现Compose界面的导航_第1张图片
图1 显示机器人列表
(1)定义单独一行机器人卡片
注意:
因为使用了ConstraintLayout布局,需要在项目模块的build.gradle.kt中增加依赖:

implementation(“androidx.constraintlayout:constraintlayout-compose:1.0.1”)

具体的代码如下:

//定义单独的机器人单独一行的卡片
@Composable
fun RobotCard(robot:Robot){
      Card(modifier = Modifier
          .fillMaxWidth()
          .wrapContentHeight()
          .padding(5.dp),
       colors = CardDefaults.elevatedCardColors(contentColor = Color.Green, containerColor = Color.Blue),
       elevation = CardDefaults.elevatedCardElevation(defaultElevation = 3.dp)){

       ConstraintLayout(modifier= Modifier.fillMaxWidth()) {
           val (imageRef,nameRef,descRef) = remember{createRefs()}
           val vguideLine = createGuidelineFromStart(0.3f)
           val hguideLine = createGuidelineFromTop(0.4f)

           Image(modifier= Modifier
               .constrainAs(imageRef) {
                   top.linkTo(parent.top)
                   bottom.linkTo(parent.bottom)
                   start.linkTo(parent.start)
                   end.linkTo(vguideLine)
               }
               .clickable {

               },painter = painterResource(id = robot.icon), contentDescription = robot.name )

           Text(modifier = Modifier.constrainAs(nameRef){
                  top.linkTo(parent.top)
                  bottom.linkTo(hguideLine)
                  start.linkTo(vguideLine)
                  end.linkTo(parent.end)
              },
               text = robot.name,fontSize = 18.sp)

           Text(modifier = Modifier.constrainAs(descRef){
                  top.linkTo(hguideLine)
                  bottom.linkTo(parent.bottom)
                  start.linkTo(vguideLine)
                  end.linkTo(parent.end)
               },
               text = robot.description,fontSize = 20.sp)
       }
  }
}

(2)定义组合多个机器人卡片生成机器人列表界面

@Preview
@Composable
fun RobotListScreen(){
    val robots = mutableListOf<Robot>()
    for(i in 1..10)
        robots.add(Robot("机器人${i}号","机器人${i}号的世界",android.R.mipmap.sym_def_app_icon))

    LazyColumn{
        items(robots){robot:Robot->
            RobotCard(robot)
        }
    }
}

2.定义机器人单独显示界面

Android笔记(十):结合Navigation组件实现Compose界面的导航_第2张图片
图2

@Composable
fun RobotDetailScreen(){
    val robot = Robot("机器人测试","机器人世界",android.R.mipmap.sym_def_app_icon)

    Box(contentAlignment = Alignment.Center,
        modifier= Modifier.fillMaxSize()){

        Column(horizontalAlignment = Alignment.CenterHorizontally){
            Text(robot.name,fontSize = 28.sp)

            Image(modifier = Modifier.size(100.dp,100.dp),
                  painter = painterResource(id = robot.icon),
                  contentDescription = robot.name)

            Text(robot.description,fontSize=24.sp,maxLines = 5)

            Button(onClick = {

            }){
                Text("跳转APP说明")
            }
        }
    }
}

3.定义应用介绍界面

Android笔记(十):结合Navigation组件实现Compose界面的导航_第3张图片
图3

@Composable
fun RobotAppScreen(){
    Box(contentAlignment = Alignment.Center,modifier = Modifier.fillMaxSize()){
        Column(modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally){
            Text("RobotApp是一个简单显示机器人信息的应用",fontSize = 28.sp, maxLines = 5)
            Button(
                modifier = Modifier.wrapContentSize(),
                onClick = {

            }){
                Text("返回",fontSize = 20.sp)
            }
        }
    }
}

四.定义界面的密封类

定义关于界面的密封类,在密封类对上述的三个界面基本特征如导航路径route、导航使用的标题title以及导航使用的图表icon进行分别定义,代码如下所示:

sealed class Screen(val route:String,val title:String,val icon: ImageVector){
    object RobotListPage:Screen(route="robotlist",title="机器人列表",icon= Icons.Filled.List)
    object RobotPage:Screen(route = "robot",title="机器人",icon = Icons.Filled.Face)
    object AppPage:Screen(route="aboutApp",title = "APP介绍",icon = Icons.Filled.Info)
}

在此前提的基础上,定义一个列表,将三个核心显示的界面定义在列表中,如下所示:

val screens = listOf(Screen.RobotListPage,Screen.RobotPage,Screen.AppPage)

五、定义导航图

在导航图中需要确定导航图中宿主和要切换的界面。要让定义好的导航图发挥作用

(1)需要在活动中指定导航宿主NavHost,通过指定NavHost表示导航宿主,用于定义用户界面的屏幕目标的预留位置;
(2) 需要利用NavController导航控件实现导航。
val navController = rememberNavController()

值得注意的是:NavController可以调用navigate()函数来实现导航,常见有三种形式:

//在导航到route的目的地之前,要将路径home之前所有的内容退出后退堆栈
navController.navigate(“route”){
popUpTo(“home”)
}

//在导航到route的目的地之前,要将包括路径home之前所有的内容退出后退堆栈
navController.navigate(“route”){
popUpTo(“home”) {inclusive = true}
}

//当没有导航到route时,才导航到route路径后退堆栈只有一个route导航路径
navController.navigate(“route”){
launchSingleTop = true
}

在下列定义了一个简单的导航图,代码如下:

@Composable
fun NavigationGraphScreen(navController:NavHostController,startDestination:String){
    NavHost(navController = navController,startDestination=Screen.RobotListPage.route){
        composable(Screen.RobotListPage.route){
            RobotListScreen()
        }

        composable(Screen.RobotPage.route){
            RobotDetailScreen()
        }

        composable(Screen.AppPage.route){
            RobotAppScreen()
        }
    }
}

六、在脚手架结构的底部导航栏中使用导航图

Android笔记(十):结合Navigation组件实现Compose界面的导航_第4张图片

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen(){
    val currentScreen: MutableState<Screen> = remember{mutableStateOf(Screen.RobotListPage)}
    val navController = rememberNavController()
    Scaffold(
        topBar={
            TopAppBar(
                title = {
                       Text(text = currentScreen.value.title )
                },
                navigationIcon = {
                    Icon(imageVector = currentScreen.value.icon,contentDescription = null)
                }
            )
        },
        bottomBar = {
            BottomAppBar {
                screens.forEach {screen:Screen->
                    NavigationBarItem(
                        selected = screen.route == currentScreen.value.route ,
                        onClick = {
                                  currentScreen.value = screen
                                  navController.navigate(screen.route){
                                      popUpTo(Screen.RobotListPage.route)
                                      launchSingleTop
                                  }
                                  },
                        icon = {
                            Icon(imageVector = screen.icon,contentDescription = screen.title)
                        })
                }
            }
       },
       content={it:PaddingValues->
           Box(modifier = Modifier.padding(it)){
                NavigationGraphScreen(
                    navController = navController,
                    startDestination =Screen.RobotListPage.route )
           }
       })
}

注意:
(1)导航navController.navigate(screen.route)中设置popUpTo(Screen.RobotListPage.route),表示导航到screen.route的界面会将Screen.RobotListPage.route之前(不包含)的所有其他界面退出返回堆栈BackStack。可以观察到,通过底部导航栏,如上图依次从左到右访问三个界面,在最后一个界面APP介绍界面时,选择手机模拟器的Back键,会直接返回第一个界面RobotListPage.route路径指向的界面。
(2)在脚手架Scaffold的content属性设置核心显示内容为导航图NavigationGraphScreen

七、实现导航传递参数

在上述的运行效果中,可以发现如下不足:

从机器人列表Screen.RobotListPage.route跳转到单个机器人界面Screen.RobotPage.route路径时,只能固定的显示机器人测试信息,显然不合实际情况;

解决之道:就是在不同导航中设置参数传递。

(1)发送方:
navController.navigate(“route/${参数}”)

(2)数据接受方:
在导航图中指定接受参数名和参数类型

  composable(route = "route/{参数名}",
             arguments = listOf(arguments = listOf(navArgument(“参数名"){
                                                        type =NavType.StringType})
                                                        ){

        val data = it.arguments?.getString(“参数名”)?:"默认值"
        }

在传递数据如果是基本数据类型比较容易,但是对于自定义的数据类,则可以采用转换的方式实现数据传递:
(1)数据发送方,把自定义类型的对象通过Gson库转换成字符串;
(2)数据接受方,将接受的数据字符串通过Gson库再转换成自定义类型的对象
为了使用Gson库,需要在模块的build.gradle.kt中增加依赖,如下所示:

implementation(“com.google.code.gson:gson:2.10.1”)

1.数据发送方

将机器人列表界面RobotListScreen作为数据的发送方,每次点击列表的图标,则传递数据到下一个界面RobotDetailScreen;由于点击实际的图标定义在RobotCard组合项中,因此,为RobotCard定义的图片内容增加一个点击处理的功能;因为要实现导航,因此RobotListScreen和RobotCard都需要传递NavController参数,下面是修改的代码:

@Composable
fun RobotCard(navController:NavController,robot:Robot){
      Card(modifier = Modifier
          .fillMaxWidth()
          .wrapContentHeight()
          .padding(5.dp),
       colors = CardDefaults.elevatedCardColors(contentColor = Color.Green, containerColor = Color.Blue),
       elevation = CardDefaults.elevatedCardElevation(defaultElevation = 3.dp)){

       ConstraintLayout(modifier= Modifier.fillMaxWidth()) {
           val (imageRef,nameRef,descRef) = remember{createRefs()}
           val vguideLine = createGuidelineFromStart(0.3f)
           val hguideLine = createGuidelineFromTop(0.4f)

           Image(modifier= Modifier
               .constrainAs(imageRef) {
                   top.linkTo(parent.top)
                   bottom.linkTo(parent.bottom)
                   start.linkTo(parent.start)
                   end.linkTo(vguideLine)
               }
               .clickable {
                    val robotStr = Gson().toJson(robot)
                    navController.navigate(Screen.RobotPage.route+"/${robotStr}")
               },painter = painterResource(id = robot.icon), contentDescription = robot.name )

           Text(modifier = Modifier.constrainAs(nameRef){
                  top.linkTo(parent.top)
                  bottom.linkTo(hguideLine)
                  start.linkTo(vguideLine)
                  end.linkTo(parent.end)
              },
               text = robot.name,fontSize = 18.sp)

           Text(modifier = Modifier.constrainAs(descRef){
                  top.linkTo(hguideLine)
                  bottom.linkTo(parent.bottom)
                  start.linkTo(vguideLine)
                  end.linkTo(parent.end)
               },
               text = robot.description,fontSize = 20.sp)
       }
  }
}
@Composable
fun RobotListScreen(navController: NavController){
    val robots = mutableListOf<Robot>()
    for(i in 1..10)
        robots.add(Robot("机器人${i}号","机器人${i}号的世界",android.R.mipmap.sym_def_app_icon))

    LazyColumn{
        items(robots){robot:Robot->
            RobotCard(navController,robot)
        }
    }
}

2.数据接受方

在这个应用中RobotDetailScreen是数据的接受方,因此需要修改导航图,在导航图中增加接受数据的处理,代码如下:

@Composable
fun NavigationGraphScreen(navController:NavHostController,startDestination:String){
    NavHost(navController = navController,startDestination=Screen.RobotListPage.route){
        composable(Screen.RobotListPage.route){
            RobotListScreen(navController = navController)
        }

        composable(Screen.RobotPage.route+"/{robot}", arguments = listOf(navArgument("robot"){
            type = NavType.StringType
        })){
            val robotStr = it.arguments?.getString("robot")
            val robot = Gson().fromJson(robotStr,Robot::class.java)
            RobotDetailScreen(robot)
        }

        composable(Screen.AppPage.route){
            RobotAppScreen()
        }
    }
}

相应的RobotDetailScreen也需要修改,增加一个Robot参数,可以对具体的Robot对象进行显示,代码修改如下:

@Composable
fun RobotDetailScreen(robot:Robot){
    Box(contentAlignment = Alignment.Center,
        modifier= Modifier.fillMaxSize()){

        Column(horizontalAlignment = Alignment.CenterHorizontally){
            Text(robot.name,fontSize = 28.sp)

            Image(modifier = Modifier.size(100.dp,100.dp),
                  painter = painterResource(id = robot.icon),
                  contentDescription = robot.name)

            Text(robot.description,fontSize=24.sp,maxLines = 5)

            Button(onClick = {

            }){
                Text("跳转APP说明")
            }
        }
    }
}

3.调整底部栏导航处理

因为增加了数据发送和接受的处理,相应的针对脚手架的底部栏导航的处理也需要调整,需要增加发送和接受数据的处理:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen(){
    val currentScreen: MutableState<Screen> = remember{mutableStateOf(Screen.RobotListPage)}
    val currentRobot:MutableState<Robot> = remember{mutableStateOf(Robot("机器人${1}号","机器人${1}号的世界",android.R.mipmap.sym_def_app_icon))}
    val navController = rememberNavController()
    Scaffold(
        topBar={
            TopAppBar(
                title = {
                       Text(text = currentScreen.value.title )
                },
                navigationIcon = {
                    Icon(imageVector = currentScreen.value.icon,contentDescription = null)
                }
            )
        },
        bottomBar = {
            BottomAppBar {
                screens.forEach {screen:Screen->
                    NavigationBarItem(
                        selected = screen.route == currentScreen.value.route ,
                        onClick = {
                                  currentScreen.value = screen
                                  if(screen.route == Screen.RobotPage.route){
                                      val robotStr = Gson().toJson(currentRobot.value)
                                      navController.navigate(Screen.RobotPage.route+"/${robotStr}"){
                                          popUpTo(Screen.RobotListPage.route)
                                      }
                                  }else {
                                      navController.navigate(screen.route) {
                                          popUpTo(Screen.RobotListPage.route)
                                          launchSingleTop
                                      }
                                  }
                                  },
                        icon = {
                            Icon(imageVector = screen.icon,contentDescription = screen.title)
                        })
                }
            }
       },
       content={it:PaddingValues->
           Box(modifier = Modifier.padding(it)){
                NavigationGraphScreen(
                    navController = navController,
                    startDestination =Screen.RobotListPage.route )
           }
       })
}

在MainScreen中增加判断是否跳转到RobotDetailScreen界面路径的判断,如果是,就增加参数传递的处理。在上述代码中,增加了一个状态currentRobot来记住当前要显示的机器人对象。这里的处理并不是非常好,因为并没有提供处理修改currentRobot的状态值的操作。最好的方式,是将这个状态值提升,并通过机器人列表界面点击图片达到修改这个状态值的目的。在此处,就不再修改了,由读者自行调整。

你可能感兴趣的:(android,笔记,navigation组件,compose)