作为Android开发人员,我们都非常熟悉使用XML创建UI。但是目前,Google推荐JetPack撰写用于构建本地UI的。 JetPack Compose是一种现代工具包,用于在Android上构建本机UI。
在本文中,我将尝试向您展示一条途径,我们如何开始使用jectpack组成我们现有的项目,在该项目中我们使用XML开发了UI。我将使用this project进行教程。让我们开始..
首先,将JetPack构成依赖关系到您的应用程序的build.gradle
文件。在现有项目中添加组合依赖性是非常累人的,因为您需要与所有依赖关系版本的正确匹配,并编译SDK版本和Kotlin版本。经过几次依赖版本更改后,我能够构建我现有的项目之一。在这里,我要分享配置的片段:
composeOptions {
kotlinCompilerExtensionVersion = "1.3.1"
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures {
compose true
dataBinding true
viewBinding true
}
ext.versions = [
'navigation' : '2.5.1',
'lifecycle_version' : '2.4.0',
'retrofit_version' : '2.9.0',
'glide' : '4.12.0',
'hilt' : '2.44.2',
'paging' : '3.1.1',
'timber' : '5.0.1',
'compose_version' : '1.2.0',
'hilt_navigation' : '1.0.0',
'accompanist_version': '0.25.1'
]
//Paging Library
implementation "androidx.paging:paging-runtime:${versions.paging}"
implementation "androidx.paging:paging-compose:1.0.0-alpha14"
//logger
implementation "com.jakewharton.timber:timber:${versions.timber}"
//compose
implementation "androidx.compose.animation:animation:${versions.compose_version}"
implementation "androidx.compose.foundation:foundation:${versions.compose_version}"
implementation "androidx.compose.material:material:${versions.compose_version}"
implementation "androidx.compose.material:material:${versions.compose_version}"
implementation "androidx.compose.runtime:runtime:${versions.compose_version}"
implementation "androidx.lifecycle:lifecycle-runtime-compose:2.6.0-alpha01"
implementation "androidx.compose.ui:ui:${versions.compose_version}"
debugImplementation "androidx.compose.ui:ui-tooling:${versions.compose_version}"
implementation "androidx.compose.ui:ui-tooling-preview:${versions.compose_version}"
implementation('io.coil-kt:coil-compose:2.2.2')
implementation "androidx.hilt:hilt-navigation-compose:${versions.hilt_navigation}"
implementation "androidx.navigation:navigation-compose:1.0.0"
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0"
// Accompanist
implementation "com.google.accompanist:accompanist-placeholder-material:${versions.accompanist_version}"
implementation "com.google.accompanist:accompanist-navigation-animation:${versions.accompanist_version}"
implementation "com.google.accompanist:accompanist-permissions:${versions.accompanist_version}"
1。首先要从XML中替换要转换为JetPack用 组成视图 的零件。让我们删除回收器视图并在那里使用Compose视图。
构成视图:它的视图可以托管JetPack
撰写UI内容。使用这个我们可以熟悉
JetPack在我们现有的项目中构成。基本上所有
使用JetPack组合绘制的视图将在此
上绘制 撰写视图。
2。为您替换的回收即可创建必要的UI组件。我们将用 lazycolum 替换recyclerview 。您将必须为 Lazycolum 项目创建ItemView。
//每个列表项目的UI可以由可重复使用的合并
生成在这里,我为照片项创建了一个UI。我已经使用Card
使照片项可单击。
3。类似于使用Gridlayoutmanager的Recyclerview和在Compose中创建RecyeLerview非常简单简单。没有适配器。没有视图持有人。在Compose Recyclerview中,用Lazycolumn,Lazyrow,LazyverticalGrid和Lazyhorizontalgrid替换。
在这里,我使用的是ViewModel(PhotoViewModel)来获取Photos PagingData Flow对象。之后,在PhotoGriding
UI内部合并,通过使用CollectAslazyPagingItem扩展功能将其转换为PigingItem。它以懒惰的方式收集流量数据。那正是我们所需要的。撰写知道如何处理此对象并在用户到达列表结束时请求更多项目。我使用LazyverticalGrid将此分页数据加载到列表中。
4。最后,在片段中定义一个函数,在该片段上,您要替换您要替换并访问XML中的ComposeView。设置视图构图策略,以处置viewtreelefelefecycledestroyed。然后在setContent内部调用可组合功能。
viewCompositionStrategy在下一个窗口的viewTreeLifeCycleOwner时,将视图附加到被破坏时。
在这里,我定义了一个lamda以进行项目单击以导航到
PhotoFullScreen并将其作为参数传递给可合and函数。还通过了片段访问数据的ViewModel(PhotoViewModel)(照片)。
--->
最好从应用程序的小部分开始,然后逐渐将其转换为撰写。这将是本文的全部,我希望您喜欢它!
可以在GitHub上找到具有详细实现的完整代码。结帐to-JetpackCompose分支:
jhnaiem / UnsplashPhotos
一个Android应用程序,显示照片列表作为画廊。
UnsplashPhotos
An android app that displays a list of photos as a gallery.
参考:
https://developer.android.com/jetpack/compose/interop
https://developer.android.com/jetpack/compose/interop/interop-apis