Jetpack Compose开篇 之 HelloWorld

简介: Jetpack Compose开篇 之 HelloWorld

 前言

此前我更新了Jetpack Architecture系列的文章,如果你还不了解Jetpack,可以移步至 Android JetPack系列文章 ,持续更新中

从即日起,我将开始持续更新Jetpack Compose系列的文章,Compose将会是原生开发的下一个重大改变!

Jetpack Compose是什么

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它基于声明性编程模型,因此您只需描述界面的外观,Compose 会负责完成其余工作,界面会随着应用状态的变化而自动更新。

上述是官方的描述,简单的说,在此之前,我们如何实现一个功能?我们是在Activity中编写Java/Kotlin的代码,在xml中编写布局代码,这种方式是我们已经使用了很久的方式,而Jetpack Compose完全抛弃了之前的方式,新创造了一种“使用代码”编写页面的方式,而这种方式,有一个好听的名字,叫做声明式UI。

Flutter VS Jetpack Compose

说到声明式UI,你肯定想到了最近“热火朝天”的 Flutter技术,号称跨各种平台,和Android比优势****,很多人不仅喜欢将Flutter和Jetpack Compose相比,更喜欢和Android相比,并得出了一些结论,那些结论我不去评判对错,我也没有资格去评判,但是如果你问我,一个Android开发者 Flutter、Jetpack Compose或者Android 我该怎么选,我觉得这两种东西根本没有任何可比较性,因为根本就不是一个东西,对于个人选择可以分下面两种情况考虑:

1、公司无跨平台业务需求

如果你的公司无跨平台业务需求,除了跳槽到有Flutter需求的公司,学习Flutter的意义并不大,你可能会反驳说,技多不压身,我不赞同但我也不反驳,但你要知道的是公司是以业务为导向的,你会的再多,所谓一身才华无处施展便也无济于事。

2、公司新增跨平台业务需求

如果你的公司新增了跨平台的业务需求,需要你不得不去学习Flutter,这个时候你要知道的是,从Android转到了Flutter相当于转行,如果你看好公司的发展并打算长久战斗,你就可以去学习并且用在公司业务中,如果你不看好公司的发展或者不想转行,那么只有删库跑路了~

而Compose是Google近两年的大动作之一,如果你想坚持在Android开发的道路上,那么学习或了解Compose定是必不可少的,只是或早或晚的问题。

Jetpack Compose HelloWorld

新建项目

使用Compose我们需要下载Android studio4.2的最新预览版本,我们可以直接新建一个Compose项目,也可以在已有项目中添加配置,这里我们来直接新建一个项目

image.gif

我们选择新建一个空的Compose Activity项目,依次输入项目位置、填写包名即可。

我们先来运行一下生成项目的默认效果,效果如下图所示:

image.gif

项目配置

新建成功后,我们首先来看一下build.gradle中几个比较特殊的配置,这也是我们在已经项目中添加Compose所需要配置的

defaultConfig {
        minSdkVersion 21
    }
    buildFeatures {
        // 开启compose
        compose true
    }
   //设置编译版本为1.8
   compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }
    composeOptions {
        kotlinCompilerVersion '1.4.0'
        kotlinCompilerExtensionVersion '1.0.0-alpha05'
    }
}
//compose 工具包
dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-alpha05'
    implementation 'androidx.ui:ui-tooling:1.0.0-alpha05'
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha05'
    implementation 'androidx.compose.material:material:1.0.0-alpha05'
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha05'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha05'
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha05'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha05'
    androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha05'
}

image.gif

这里我们使用的compose版本为05版本,compose支持的最低版本是Api 21,所以我们设置最低版本为21.

MainActivity代码

接下来我们来看MainActivity默认生成的代码

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ConposeSimpleTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ConposeSimpleTheme {
        Greeting("Android")
    }
}

image.gif

在compose中,所有的组合函数 都要使用@Composable注解 ,conposable注释可告知 Compose 编译器,此函数需要转化为页面显示,并且和协程中suspend函数一样,只能在compose注解函数中调用另外一个compose注解函数,@Preview注解是方便开发者在不运行的前提下可预览效果,也就是说DefaultPreview这个函数是开发者自己用的,onCreate中setContent包含的是页面的内容,主题这里我们先忽略,后面再讲解。

Greeting这个函数中,接收一个string类型的name参数,并显示在Text上,这里要注意的是 这里的Text组件和原生的TextView并没有关系,同样的方法我们自定来定义一个HelloWorld,代码如下所示:

setContent {
    Greeting("Android")
    HelloWorld()
}

image.gif

@Composable
fun HelloWorld() {
    Text(text = "Hello World!")
}

image.gif

运行结果如下所示:

image.gif

这里两个Text重叠了,显然不是我们想要的结果,那么如果我们想让文字垂直或者水平排列改如何去做呢。

垂直或水平布局

垂直排列 我们可以使用Column布局将组合函数包裹起来,修改setContent的代码如下所示:

setContent {
    Column {
        Greeting("Android")
        HelloWorld()
    }
}

image.gif

运行结果如下图所示:

image.gif

水平排列,我们只需要将Column修改为Row即可,代码如下所示:

setContent {
    Row {
        Greeting("Android")
        HelloWorld()
    }
}

image.gif

运行结果如下所示:

image.gif

由此我们的Compose HelloWorld就完成了~


目录
相关文章
|
5月前
|
存储 缓存 Android开发
安卓Jetpack Compose+Kotlin, 使用ExoPlayer播放多个【远程url】音频,搭配Okhttp库进行下载和缓存,播放完随机播放下一首
这是一个Kotlin项目,使用Jetpack Compose和ExoPlayer框架开发Android应用,功能是播放远程URL音频列表。应用会检查本地缓存,如果文件存在且大小与远程文件一致则使用缓存,否则下载文件并播放。播放完成后或遇到异常,会随机播放下一首音频,并在播放前随机设置播放速度(0.9到1.2倍速)。代码包括ViewModel,负责音频管理和播放逻辑,以及UI层,包含播放和停止按钮。
|
5月前
|
存储 数据库 Android开发
安卓Jetpack Compose+Kotlin,支持从本地添加音频文件到播放列表,支持删除,使用ExoPlayer播放音乐
为了在UI界面添加用于添加和删除本地音乐文件的按钮,以及相关的播放功能,你需要实现以下几个步骤: 1. **集成用户选择本地音乐**:允许用户从设备中选择音乐文件。 2. **创建UI按钮**:在界面中创建添加和删除按钮。 3. **数据库功能**:使用Room数据库来存储音频文件信息。 4. **更新ViewModel**:处理添加、删除和播放音频文件的逻辑。 5. **UI实现**:在UI层支持添加、删除音乐以及播放功能。
|
2月前
|
安全 Java Android开发
探索安卓应用开发的新趋势:Kotlin和Jetpack Compose
在安卓应用开发领域,随着技术的不断进步,新的编程语言和框架层出不穷。Kotlin作为一种现代的编程语言,因其简洁性和高效性正逐渐取代Java成为安卓开发的首选语言。同时,Jetpack Compose作为一个新的UI工具包,提供了一种声明式的UI设计方法,使得界面编写更加直观和灵活。本文将深入探讨Kotlin和Jetpack Compose的特点、优势以及如何结合使用它们来构建现代化的安卓应用。
62 4
|
4月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
5月前
|
JavaScript Java Android开发
kotlin安卓在Jetpack Compose 框架下跨组件通讯EventBus
**EventBus** 是一个Android事件总线库,简化组件间通信。要使用它,首先在Gradle中添加依赖`implementation &#39;org.greenrobot:eventbus:3.3.1&#39;`。然后,可选地定义事件类如`MessageEvent`。在活动或Fragment的`onCreate`中注册订阅者,在`onDestroy`中反注册。通过`@Subscribe`注解方法处理事件,如`onMessageEvent`。发送事件使用`EventBus.getDefault().post()`。
|
5月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
5月前
|
缓存 Android开发 Kotlin
【安卓app开发】kotlin Jetpack Compose框架 | 先用OKhttp下载远程音频文件再使用ExoPlayer播放
使用 Kotlin 的 Jetpack Compose 开发安卓应用时,可以结合 OkHttp 下载远程音频文件和 ExoPlayer 进行播放。在 `build.gradle` 添加相关依赖后,示例代码展示了如何下载音频并用 ExoPlayer 播放。代码包括添加依赖、下载文件、播放文件及简单的 Compose UI。注意,示例未包含完整错误处理和资源释放,实际应用需补充这些内容。
|
5月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
5月前
|
存储 Android开发 Kotlin
开发安卓app OKhttp下载后使用MediaPlayer播放
在Android Jetpack Compose应用程序中,要使用OkHttp下载远程音频文件并在本地播放,你需要完成以下几个步骤: 1. **添加依赖**:确保`build.gradle`文件包含OkHttp和Jetpack Compose的相关依赖。 2. **下载逻辑**:创建一个`suspend`函数,使用OkHttp发起网络请求下载音频文件到本地。 3. **播放逻辑**:利用`MediaPlayer`管理音频播放状态。 4. **Compose UI**:构建用户界面,包含下载和播放音频的按钮。
|
5月前
|
存储 Android开发
安卓app,MediaPlayer播放本地音频 | 按钮控制播放和停止
在Jetpack Compose中,不直接操作原生Android组件如`Button`和`MediaPlayer`,而是使用Compose UI构建器定义界面并结合ViewModel管理音频播放逻辑。以下示例展示如何播放本地音频并用按钮控制播放/停止:创建一个`AudioPlayerViewModel`管理`MediaPlayer`实例和播放状态,然后在Compose UI中使用`Button`根据`isPlaying`状态控制播放。记得在`MainActivity`设置Compose UI,并处理相关依赖和权限。