从XML组成的JetPack入门
#教程 #android #mobile #jetpackcompose

作为Android开发人员,我们都非常熟悉使用XML创建UI。但是目前,Google推荐JetPack撰写用于构建本地UI的。 JetPack Compose是一种现代工具包,用于在Android上构建本机UI。

Why adopt Compose?

在本文中,我将尝试向您展示一条途径,我们如何开始使用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视图。

Image description

构成视图:它的视图可以托管JetPack
撰写UI内容。使用这个我们可以熟悉
JetPack在我们现有的项目中构成。基本上所有
使用JetPack组合绘制的视图将在此
上绘制 撰写视图。

2。为您替换的回收即可创建必要的UI组件。我们将用 lazycolum 替换recyclerview 。您将必须为 Lazycolum 项目创建ItemView。

//每个列表项目的UI可以由可重复使用的合并

生成

在这里,我为照片项创建了一个UI。我已经使用Card使照片项可单击。

3。类似于使用Gridlayoutmanager的Recyclerview和在Compose中创建RecyeLerview非常简单简单。没有适配器。没有视图持有人。在Compose Recyclerview中,用Lazycolumn,Lazyrow,LazyverticalGrid和Lazyhorizo​​ntalgrid替换。

在这里,我使用的是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分支:

GitHub logo 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