为Android构建现代应用——主体结构

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

创建Screents和ViewModels

在前面的章节中,我们已经分析了OrderNow项目的理论概念和我们将赋予的组织。

在本章中,我们将开始实现初始结构和模板,这将联接每一个应用程序的部分。

首先将添加以下带有各自视图模型的主屏幕:

• 首页

• 产品列表

• 产品详情

• 购物车

添加元素的一个例子如下图所示:

Sreens 和 ViewModels

为Android构建现代应用——主体结构,Android Jetpack Compose 别裁,android,android jetpack

 我们将在应用程序中使用依赖管理器将每个ViewModel绑定到各自的屏幕上。为此,我们必须首先在应用程序中依赖Hilt。

implementation 'com.google.dagger:hilt-android:2.38.1' // Use the latest version
kapt 'com.google.dagger:hilt-android-compiler:2.38.1' // Use the latest version

在依赖Hilt的过程后,将要求定义应用类型类,例如在我们的示例项目中,将定义为OrderNowApplication,如下:

@HiltAndroidApp
class OrderNowApplication:Application() {
}

注意:在androidmanifest .xml中注册OrderNowApplication类

<application

android:name=".main.OrderNowApplication"

android:allowBackup="true"

...>

此外,我们将 Navigation Compose依赖到项目中,这将允许View(Composable)在导航期间获得其各自ViewModel的实例:

dependencies {

       implementation 'androidx.hilt:hilt-navigation-compose:1.0.0'

}

一旦在项目中正确地执行了前面的配置,我们就可以像这样将ViewModel注入View:

 Home ViewModel:

@HiltViewModel

class HomeViewModel @Inject constructor() : ViewModel() {

...

}

Home Screen:

@Composable

fun HomeScreen(viewModel: HomeViewModel = hiltViewModel()

) {

...

}

每个屏幕都将通过Hilt依赖管理器与其相应的ViewModel相关联。到目前为止,我们已经集成了以下架构组件:Compose、Navigation和ViewModel。

这是Jetpack工具的完美组合,在后面的章节中,我们将看到它在移动开发中的潜力。

UI模式:TopAppBar和BottomAppBar

通过Scaffold组件,我们可以在应用程序中实现两种在Material Design中最常见的UI模式:TopAppBar和BottomAppBar。

Scaffold是一个详细的视图(composable),它将允许我们以以下方式实现这些模式:

Scaffold:

Scaffold(

        topBar = {

                   TopAppBar { /* Top app bar content */ }

        },

        bottomBar = {

        BottomAppBar { /* Bottom app bar content */ }

        }

) { contentPadding -> 9 // Screen content

}

在代码片段中,我们定义了topBar,bottomBar,和(还未添加的)屏幕内容。

在Scaffold中,topBar和bottomBar部分是可选的;也就是说,可以省略其中一部分的定义。此外,在Scaffold中,我们可以声明两个更多的组件:

• scaffoldState

• snackbarHost

在下一章,我们将看到每个的用法。现在我们只定义topBar和bottomBar。 现在我们知道如何在我们的应用程序中包含这些UI模式,下一步就是创建代表TopAppBar和BottomAppBar的视图(Composables)。

我们将其组织在一个叫做patterns的目录中,并在其中添加了两个Views,OrderNowTopBar和OrderNowBottomBar,如下所示:

TopAppBar and BottomAppBar Composables:

为Android构建现代应用——主体结构,Android Jetpack Compose 别裁,android,android jetpack

 OrderNowTopBar

OrderNowTopBar的实现很简单。我们最初只需要以以下方式实现它:

@Composable

fun OrderNowTopBar() {

        TopAppBar(

                title = {

                Text(

                        text = stringResource(id = AppString.app_name),

                        textAlign = TextAlign.Center,

                        modifier = Modifier.fillMaxWidth()

                )

        },

        backgroundColor = MaterialTheme.colors.background,

        contentColor = contentColorFor(MaterialTheme.colors.background)

        )

}

之前的实现还不包含返回选项等元素;然而,在后面的章节中添加“Back”到TopAppBar中,它将包含这样一个使用状态策略的导航选项。

OrderNowBottomBar

OrderNowBottomBar的实现可以更精细一些,因为我们需要包括屏幕之间的导航。但是,我们将把实现细节留到下一章。

现在,我们将包含一个没有导航的静态定义。

@Composable
fun OrderNowBottomBar() {
    val selectedIndex = remember { mutableStateOf(0) }
    BottomNavigation(
        backgroundColor = MaterialTheme.colors.background,
        contentColor = contentColorFor(MaterialTheme.colors.background),
        elevation = 10.dp
    ) {
        BottomNavigationItem(icon = {
            Icon(imageVector = Icons.Default.Home, "")
        },
            label = { Text(text = "Home") },
            selected = (selectedIndex.value == 0),
            unselectedContentColor = Color.Gray,
            selectedContentColor = orange,
            onClick = {
                selectedIndex.value = 0
            })

        BottomNavigationItem(icon = {
            Icon(imageVector = Icons.Default.ShoppingCart, "")
        },
            label = { Text(text = "Cart") },
            selected = (selectedIndex.value == 1),
            unselectedContentColor = Color.Gray,
            selectedContentColor = orange,
            onClick = {
                selectedIndex.value = 1
            })
    }
}

在这个阶段,我们已经有了屏幕、视图模型和Scaffold的定义(其中包括OrderNowBottomBar和OrderNowTopBar)。

下一步是将所有的部分组合在一起,我们将在下一部分中做这个。

将所有元素整合在一起

第一项任务是创建一个名为main的目录。这个目录将是横向的,并将包含App的基类或结构。

在该目录中,我们放置Application类,移动MainActivity到那里,以及应用程序的主屏幕,我们将其命名为OrderNowScreen,如下图所示。

Main Components: 

为Android构建现代应用——主体结构,Android Jetpack Compose 别裁,android,android jetpack

现在我们修改MainActivity.kt类,以便它将登录屏幕加载到OrderNowScreen应用程序,如下所示:

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	    setContent {
	        OrderNowScreen()
	    }
	}
}

然后,在OrderNowScreen视图中,我们像这样定义应用程序的Scaffold:

@Composable
fun OrderNowScreen() {
    InitialSkeletonTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Scaffold(
                topBar = { OrderNowTopBar() },
                bottomBar = { OrderNowBottomBar() }
            ) { contentPadding ->
                println(contentPadding)
            }
        }
    }
}

当您运行应用程序时,结果应该类似于以下图像:

为Android构建现代应用——主体结构,Android Jetpack Compose 别裁,android,android jetpack

总结

在本章中,我们已经构建了OrderNow项目的初始结构。

这里定义和实现的组件将是下一章继续讨论导航的基础。

随着我们阅读这些章节,我们将改进OrderNow的每个部分的实现,因此.我们的电子贸易将以最佳方式设计和实施。

源码:文章来源地址https://www.toymoban.com/news/detail-609767.html

class MainActivity4: ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            OrderNowScreen()
        }
    }
}
@Preview
@Composable
fun OrderNowScreen() {
    MyTestTheme {
        Surface(modifier = Modifier.fillMaxSize(),color=MaterialTheme.colors.background){
            Scaffold(
                topBar = {OrderNowTopBar()},
                bottomBar={ OrderNowBottomBar()}
            ) {contentPadding ->
                println(contentPadding)
            }
        }
    }
}



@Preview
@Composable
fun OrderNowBottomBar(){
    val selectedIndex =remember{ mutableStateOf(0)}
    BottomNavigation(
        backgroundColor = MaterialTheme.colors.background,
        contentColor=contentColorFor(MaterialTheme.colors.background),
        elevation = 10.dp){

        BottomNavigationItem(
                icon = { Icon(imageVector = Icons.Default.Home,"") },
                label = { Text(text = "首页")},
                selected =(selectedIndex.value == 0) ,
                unselectedContentColor = Color.Gray,
                selectedContentColor = Color.Red,
                onClick = { selectedIndex.value = 0 })
        BottomNavigationItem(icon={Icon(imageVector = Icons.Default.Favorite,"")},
        label = {Text(text="热门")},
        selected = (selectedIndex.value== 1),
            unselectedContentColor =Color.Gray,
            selectedContentColor = Color.Red,
            onClick ={selectedIndex.value=1}
            )
        BottomNavigationItem(
            icon = { Icon(imageVector = Icons.Default.ShoppingCart,"") },
            label = { Text(text = "购物车")},
            selected =(selectedIndex.value == 2) ,
            unselectedContentColor = Color.Gray,
            selectedContentColor = Color.Red,
            onClick = { selectedIndex.value = 2 })
        BottomNavigationItem(icon={Icon(imageVector = Icons.Default.Person,"")},
            label = {Text(text="我的")},
            selected = (selectedIndex.value== 3),
            unselectedContentColor =Color.Gray,
            selectedContentColor = Color.Red,
            onClick ={selectedIndex.value=3}
        )
    }
}


@Composable
fun OrderNowTopBar() {
    TopAppBar(
        title = {
            Text(
                text = stringResource(id = R.string.app_name),
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
        },
        backgroundColor = MaterialTheme.colors.background,
        contentColor = contentColorFor(MaterialTheme.colors.background)
    )
}





@HiltAndroidApp
class OrderNowApplication : Application() {
}

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

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

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

相关文章

  • 为Android构建现代应用——应用架构

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

    2024年02月15日
    浏览(42)
  • 为Android构建现代应用——应用导航设计

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

    2024年02月14日
    浏览(30)
  • 为Android构建现代应用——设计原则

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

    2024年02月16日
    浏览(34)
  • 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)
  • Android Jetpack Compose实现轮播图效果

    在最近思索如何使用Compose方式改进我的开源TMDB电影列表应用程序的主屏幕时,一个激动人心的概念浮现在我的脑海中——为什么不整合一个吸引人的轮播图来展示即将上映的电影呢?在本文中,我将分享我的开发和实现自定义轮播图的经历,提供涉及不同步骤的见解。 首先

    2024年02月08日
    浏览(102)
  • 对于Android开发,我们为何要学Jetpack Compose?

    Jetpack Compose 是用于构建原生 Android 界面的新工具包。它可简化并加快 Android 上的界面开发,使用更少的代码、强大的工具和直观的 Kotlin API,快速让应用生动而精彩。Compose 使用全新的组件——可组合项 (Composable) 来布局界面,使用修饰符 (Modifier) 来配置可组合项。 为何Jetp

    2024年02月10日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包