为Android构建现代应用——应用导航设计

这篇具有很好参考价值的文章主要介绍了为Android构建现代应用——应用导航设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在前一章节的实现中,Skeleton: Main structure,我们留下了几个 Jetpack 架构组件,这些组件将在本章中使用,例如 Composables、ViewModels、Navigation 和 Hilt。此外,我们还通过 Scaffold 集成了 TopAppBar 和 BottomAppBar UI 模式的基本结构。为了继续改进这个实现,我们需要添加一个新的关键选项卡,即“应用程序的通用状态”。

App程序的状态:一般状态

定义导航地图

导航从其他UI元素

摘要


应用程序状态:一个通用状态


 “设计原则”中我们讨论了状态在现代 Android 应用程序中的重要作用。
设计中可能存在三种类型的状态:属性 UI 状态、组件 UI 状态和屏幕 UI 状态。
除了这些状态之外,我们还可以定义一种新类型的状态,即应用程序状态。
这个新状态将定义应用程序的通用状态。它将用于屏幕之间的导航、自发消息(snackbars)的呈现以及应用程序中其他可用的进程。
在主目录中,我们将定义一个名为 OrderNowState 的类,它将是我们的状态持有者,代表这种类型的状态。

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

接下来,我们像这样执行OrderNowState的初始实现:

@SuppressLint("RememberReturnType")
@Composable
fun rememberAppState(scaffoldState:ScaffoldState=rememberScaffoldState(),
                     navController: NavHostController =rememberNavController(),
                     resources1: Resources = resources(),
                     coroutineScope: CoroutineScope=rememberCoroutineScope()
)=remember(scaffoldState,navController,resources1,coroutineScope){
   OrderNowState(scaffoldState,navController,resources1,coroutineScope)
}

class OrderNowState(val scaffoldState:ScaffoldState,val navController:NavHostController,private val resources:Resources,coroutineScope:CoroutineScope)


@Composable
@ReadOnlyComposable
fun resources():Resources{
    LocalConfiguration.current
    return LocalContext.current.resources
}
然后,我们修改我们的OrderNowScreen视图以包含之前定义的状态,如下所示:
@Preview
@Composable
fun OrderNowScreen(){
    MyTestTheme {
        Surface(modifier = Modifier.fillMaxSize(),color=MaterialTheme.colors.background) {
            val appState =rememberAppState()
            Scaffold(scaffoldState = appState.scaffoldState, topBar = { OrderNowTopBar()}, bottomBar = {OrderNowBottomBar()}){contentPadding->
                println(contentPadding)

            }
        }
    }
}

注意:

还需要向OrderNowScreen添加资源函数,它将使用该函数访问App资源。

突出显示更改的代码行如下:

  Scaffold(
                scaffoldState = appState.scaffoldState,
                topBar = { OrderNowTopBar() },
                bottomBar = { OrderNowBottomBar() }) { contentPadding ->
                println(contentPadding)

            }

有了上面的代码,我们现在可以告诉Scaffold它应该把哪个状态作为引用:应用程序的状态。之后,视图之间的导航操作、自发消息的呈现,以及视图只把AppState作为真实源的其他独占任务都将被允许。

既然已经为APP定义了状态,我们就可以继续实现APP的导航了。

定义导航地图

我们在应用程序中使用的导航策略由以下元素组成:

NavHost:它是负责在视图中显示导航结果的组件。导航的结果由NavigationController和导航图中给出的定义决定。

AppSoGraph:它是导航图的实现。它应该根据指定的路由将导航指向哪个视图或可组合对象。

屏幕路由:它们是可以通过导航到达的应用程序的不同屏幕。无论导航是从选项菜单、链接、按钮还是任何其他活动代理激活的,都无关紧要。每个屏幕都有一个与之关联的唯一路由。

一般导航图

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

 我们将继续在OrderNow中包含这些元素

OrderNowScreenRoute

首先,创建一个名为common -> navigation的新遍历目录。在这个包中,我们像这样添加了一个名为OrderNowScreenRoute的类:

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

 在这个类中,可以导航到的屏幕定义如下:

sealed class OrderNowScreenRoute(val route:String){
    object Home :OrderNowScreenRoute("home")
    object Cart:OrderNowScreenRoute("cart")
    object ProductList:OrderNowScreenRoute("product_list")
    object ProductDetail:OrderNowScreenRoute("product_detail")
}
OrderNowNavHost 和 AppSoGraph

现在,我们创建OrderNowNavHost类,它将像这样表示应用程序的NavHost:

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

@Composable
fun OrderNowNavHost(appState:OrderNowState){
    NavHost(navController = appState.navController,5,startDestination=1){
        appSoGraph(appState)
    }
}

fun NavGraphBuilder.appSoGraph(appState: OrderNowState) {

}

从之前的代码片段中,我们应该强调以下定义:
• OrderNowNavHost 需要知道 APP 的状态。
• NavController 是从 APP 状态中托管和获取的。
• Navigation map(appSoGraph)将基于 APP 的状态创建,并且是在 OrderNowNavHost 内定义的扩展。
为了继续完成 OrderNow 中导航的实现,我们必须添加一个描述如下的辅助类。
NavigationBarSection
NavigationBarSection 是一个辅助类,代表应用程序底部菜单中组成筛选组的部分。
请记住,我们可以从选项菜单或其他 UI 组件(如链接、按钮或内部重定向)中的操作开始导航。
在下一节中,我们将对内部重定向(从按钮、链接等)进行更改;现在,让我们专注于从 BottomBar 导航。

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

我们看到NavigationBarSection帮助器类将如何只对Home和Cart屏幕进行分组,这是我们希望从BottomBar菜单启用的选项。这个类将像这样放置在导航目录中:

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

它的实现是这样的:

sealed class OrderNowScreenRoute(val route:String){
    object Home :OrderNowScreenRoute("home")
    object Cart:OrderNowScreenRoute("cart")
    object ProductList:OrderNowScreenRoute("product_list")
    object ProductDetail:OrderNowScreenRoute("product_detail")
}


sealed class NavigationBarSection(val title: String, val icon: ImageVector, val route:String){
    companion object{
        val sections = listOf(OrderNowScreenRoute.Home,OrderNowScreenRoute.Cart)
    }
    object Home:NavigationBarSection(title ="Home" , icon = Icons.Default.Home, route =OrderNowScreenRoute.Home.route)

    object Cart:NavigationBarSection(title = "Cart", icon =Icons.Default.ShoppingCart, route = OrderNowScreenRoute.Cart.route)
}

将helper类添加到项目中后,我们继续更新OrderNowNavHost类,如下所示:

@Composable
fun OrderNowNavHost(appState: OrderNowState, paddingValues: PaddingValues) {
    NavHost(
        navController = appState.navController,
        startDestination = NavigationBarSection.Home.route,
        modifier = Modifier.padding(paddingValues)
    ) {
        appSoGraph(appState)
    }
}

fun NavGraphBuilder.appSoGraph(appState: OrderNowState) {
    composable(NavigationBarSection.Home.route) {
       // HomeScreen()
    }
    composable(NavigationBarSection.Cart.route) {
       // CartScreen()
    }
    
    composable(OrderNowScreenRoute.ProductList.route){
        //ProductListScreen()
    }
    
    composable(OrderNowScreenRoute.ProductDetail.route){
        //ProductDetailScreen()
    }

}

appSoGraph函数的实现是NavGraphBuilder的扩展,在那里,我们为App的每个屏幕指定导航地图。另外,通过startDestination参数,指定将首先呈现的默认屏幕,即Home屏幕。采用更改的下一步是更新名为 OrderNowBottomBar 的类,如下所示:

@Composable
fun OrderNowBottomBar(navController: NavHostController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination
    BottomNavigation(
        backgroundColor = MaterialTheme.colors.background,
        contentColor = contentColorFor(MaterialTheme.colors.background),
        elevation = 10.dp
    ) {
        NavigationBarSection.sections.forEach { section ->
            val selected = currentDestination?.hierarchy?.any {
                it.route == section.route
            } == true
            BottomNavigationItem(icon = {
                Icon(
                    imageVector =  ImageVector.vectorResource(R.drawable.ic_launcher_foreground),
                    contentDescription = stringResource(id = R.string.app_name)
                )
            },
                label = { Text(text = stringResource(id =R.string.app_name)) },
                selected = selected,
                unselectedContentColor = Color.Gray,
                selectedContentColor = Color.Red,
                onClick = {
                    navController.navigate(section.route) {
                        popUpTo(navController.graph.findStartDestination().id) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true

                    }
                })
        }
    }
}

对于添加到 NavigationBarSection 中的每个项目,BottomBar 中都会显示一个选项。OrderNowBottomBar 的这个实现比之前的架构:主要结构中的实现更清晰。

然后,我们再次更新 OrderNowScreen 视图,如下所示:


@Preview
@Composable
fun OrderNowScreeen(){
    MyTestTheme(){
        Surface {
            val appState =rememberAppState()
            Scaffold(
                scaffoldState = appState.scaffoldState,
                topBar = {OrderNowTopBar()},
                bottomBar = {OrderNowBottomBar(appState.navController)}
            ){contentPadding ->
                OrderNowNavHost(appState,contentPadding)
            }
        }
    }
}

现在 OrderNowBottomBar 将需要引用负责导航的 navController。

在Scaffold的内容部分,添加了OrderNowNavHost的实例,该实例接收APP的一般状态作为参数。Order Now with simple navigation:

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

从其他UI元素进行导航

 现在我们已经准备好从 BottomBar 选项导航的实现,我们需要定义从其他 UI 元素(例如按钮、链接、DeepLinks)甚至根据应用程序的其他内部组件的请求以编程方式导航应用程序。我们要做的第一个更改是添加一个名为 OrderNowNavigationState 的结构,它允许我们扩展应用程序的一般状态。

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

OrderNowNavigationState,是APP通用状态的扩展,即一组用于导航目的的OrderNowState状态的扩展。我们还将使用此结构来集中取决于应用程序状态的导航逻辑。

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

OrderNowNavigationState的实现如下:


fun OrderNowState.popUp(){
    navController.popBackStack()
}

fun OrderNowState.navigate(route:String){
    navController.navigate(route){
        launchSingleTop  = true
    }
}

fun OrderNowState.navigateAndPopUp(route:String,popUp:String){
    navController.navigate(route){
        launchSingleTop =true
        popUpTo(popUp){
            inclusive =true
        }
    }
}

fun OrderNowState.navigateSaved(route:String,popUp:String){
    navController.navigate(route){
        launchSingleTop =true
        restoreState =true
        popUpTo(popUp){
            saveState =true
        }
    }
}

fun OrderNowState.clearAndNavigate(route:String){
    navController.navigate(route){
        launchSingleTop =true
        popUpTo(0){ inclusive =true}
    }
}

对Home、ProductList和ProductDetail屏幕做了一些更改,如下图所示:

为Android构建现代应用——应用导航设计,Android Jetpack Compose 别裁,android,android jetpack

 以in - home视图为例,导航动作通过Button执行,方式如下:


@Composable
fun HomeScreen(goToProductList:()->Unit,modifier:Modifier=Modifier,viewModel2:HomeViewModel =hiltViewModel()){
    Column(){
        Button(onClick = goToProductList,){
            Text(text = stringResource(id = R.string.app_name))

        }
    }
}

代码的重要部分是“Go to —> ProductList Screen”按钮的动作 onClick = goToProductList 的定义,其中通过设计原理章节中解释的状态提升技术,我们将动作 goToProductList 委托给在 OrderNowNavHost 中定义的 appSoGraph 导航图如下:

un NavGraphBuilder.appSoGraph1(appState:OrderNowState){
    val goToListFromHome:()->Unit ={
        appState.navigateSaved(OrderNowScreenRoute.ProductList.route,OrderNowScreenRoute.Home.route)
    }
    composable(NavigationBarSection.Home.route){
        HomeScreen(goToProductList =goToListFromHome)
    }
}

回想一下,navigatesave函数是OrderNowNavigationState结构中定义的扩展的一部分。同样的实现应用于导航到其他ProductList和ProductDetail屏幕,这样在OrderNowNavHost中的性能如下所示:

fun  NavGraphBuilder.appSoGraph2(appState:OrderNowState){
    val homeRoute= OrderNowScreenRoute.Home.route
    val listRoute= OrderNowScreenRoute.ProductList.route
    val detailRoute =OrderNowScreenRoute.ProductDetail.route
    
    val goToListFromHome:()->Unit ={
        appState.navigateSaved(listRoute,homeRoute)
    }
    val goToDetailFromList:()->Unit ={
        appState.navigateSaved(detailRoute,listRoute)
    }
    val goBack:()->Unit ={
        appState.popUp()
    }
    composable(NavigationBarSection.Home.route){
        HomeScreen(goToProductList =goToListFromHome)
    }
    composable(NavigationBarSection.ProductList.route){
        ProductListScreen(goToProductDetail =goToDetailFromList,goBack =goBack)
    }
    composable(NavigationBarSection.ProductDetail.route){
        ProductDetailScreen(goBack =goBack)
    }
    
}

总结起来,前面的代码段中配置了以下导航定义(导航图):

  1. 从主页(Home screen)导航到产品列表(ProductList screen)。
  2. 从产品列表(ProductList screen)导航到产品详情(ProductDetail screen)。
  3. 从产品详情(ProductDetail screen)导航回到上一个呈现的屏幕。
  4. 从底部导航栏菜单导航到主页(Home screen)。
  5. 从底部导航栏菜单导航到购物车(Cart screen)。

到此为止,我们在 OrderNow 应用中已经实现了一个很好的基本导航。然而,还有一些东西缺失。 您有什么想法可能是缺失的吗? 我们需要在导航中包含数据或信息的传递。 由于在本章中设计了相关的实现,因此很容易实现数据传递。我们将在最后“实现功能”中详细探讨。

总结

本章中,我们完成了应用程序的主要部分的设计,这些将是以后添加功能的基础。 我们知道导航是应用程序的重要组成部分,必须从应用程序设计的开始就考虑它。 在本章中,我们采用了谷歌的建议,将状态纳入导航逻辑中。 同时,读者可以注意到我们的策略中没有直接涉及 ViewModel 或 View,这使得它在测试时更加灵活,可以检查导航。文章来源地址https://www.toymoban.com/news/detail-632368.html

到了这里,关于为Android构建现代应用——应用导航设计的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 为Android构建现代应用——设计原则

    为Android构建现代应用——设计原则 - 掘金      state”是声明性观点的核心 在通过Compose或SwiftUI等框架设计声明性视图时,我们必须明确的第一个范式是State(状态)。UI组件结合了它的图形表示(View)和它的State(状态)。UI组件中发生变化的任何属性或数据都可以表示为状态。例如

    2024年02月16日
    浏览(35)
  • 如何是Jetpack Compose构建漂亮的应用程序

    Jetpack compose 是在 Android 上构建 UI 的未来。 如果您完全不熟悉 android 并且不知道 Jetpack Compose 是什么——它基本上是一种构建本机用户界面的新方法。 Jetpack compose官方站点 https://developer.android.com/jetpack/compose 在本文中,您将了解如何使用 Jetpack Compose 遵循最佳实践进行 UI 开发

    2024年02月03日
    浏览(76)
  • 为Android构建现代应用——应用架构

    选择风格( Choosing a style ) 我们将依照Google在《应用架构指南》中推荐的最佳实践和架构指南来构建OrderNow的架构。 这些定义包括通过各层定义组件的一些Clean Architecture原则。 层次的定义( Definition of the layers ) 在应用程序中,我们将定义以下主要层次: • 用户界面(UI)层 •

    2024年02月15日
    浏览(42)
  • 利用Jetpack Compose进行导航(Navigation)

    Jetpack Compose是一个现代化的,声明式的UI工具包,它让我们可以更快、更简便地构建Android的界面。今天,我们要讨论如何使用Jetpack Compose和它的导航库(Navigation Compose)来进行应用导航。 Navigation Compose是一个用于管理Compose界面中的导航的库,它不仅提供了丰富的API以支持不

    2024年02月12日
    浏览(44)
  • 为Android构建现代应用——主体结构

    创建Screents和ViewModels 在前面的章节中,我们已经分析了OrderNow项目的理论概念和我们将赋予的组织。 在本章中,我们将开始实现初始结构和模板,这将联接每一个应用程序的部分。 首先将添加以下带有各自视图模型的主屏幕: • 首页 • 产品列表 • 产品详情 • 购物车 添

    2024年02月15日
    浏览(39)
  • Jetpack Compose: Hello Android

    Jetpack Compose 是一个现代化的工具包,用于使用声明式方法构建原生 Android UI。在本博文中,我们将深入了解一个基本的 “Hello Android” 示例,以帮助您开始使用 Jetpack Compose。我们将探讨所提供代码片段中使用的函数和注解。 在深入代码之前,请确保您已经准备好使用 Jetpac

    2024年03月10日
    浏览(56)
  • Android Jetpack Compose — Slider滑动条

            在Android Jetpack Compose中,Slider(滑动条)是一个常用的用户界面控件,它允许通过滑动条来选择一个范围或数值。Slider控件非常适用于调整音量、亮度、进度等需要连续调整的场景。 一、Slider的属性         Slider是Android Jetpack Compose中的一个控件,用于实现滑动条

    2024年02月11日
    浏览(48)
  • Android Jetpack Compose之RadioGroup的使用

    Android Jetpack Compose是一个现代化的UI工具包,帮助开发者以声明式的方式构建出美观且功能强大的Android应用。在本文中,我们将详细介绍其中的一个重要组件—— RadioGroup 。 一. RadioGroup简介 Jetpack Compose中并没有像传统View系统中那样直接提供 RadioGroup ,但我们可以很方便地通

    2024年02月06日
    浏览(53)
  • 探索Android Jetpack Compose的Surface组件

    随着声明性 UI 框架 Jetpack Compose 的出现,Android 开发变得更加简洁和直观。在这篇博客中,我们将深入探讨其中的一项基本构建块 —— Surface 组件,了解它如何影响 UI 的显示和设计。 一、Jetpack Compose和Surface组件 二、Surface组件的基本使用 三、影响Surface的属性 一、Jetpack Co

    2024年02月11日
    浏览(55)
  • Android Jetpack Compose中使用字段验证的方法

    数据验证是创建健壮且用户友好的Android应用程序的关键部分。随着现代UI工具包Jetpack Compose的引入,处理字段验证变得更加高效和直观。在这篇文章中,我们将探讨如何在Android应用中使用Jetpack Compose进行字段验证。 字段验证是确保用户在各种输入字段中输入的数据符合特定

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包