Android - 2 小時入門 Jetpack Compose (上) | 開發者說·DTalk－鑽石舞台

本文原作者: 朱濤，原文發布於: 朱濤的自習室

本篇的目標是:「2 小時入門 Compose」！

怎麼學？

學習 Compose 最快的方式是什麼？當然是寫代碼呀！為了更適用於初學者我們需要找一個更簡單的項目，代碼量還要再小一點。我個人比較喜歡 Google 官方的架構案例: TodoApp，它的功能足夠簡單，也比較貼近我們的實際生活。

不過，可惜的是，這個官方倉庫並沒有完整的 Compose 實現，GitHub 上面類似的實現又太複雜了。怎麼辦呢？那我就仿着它來寫一個吧。Logo 資源什麼的，我也給扒過來了。

開始吧！

To Do App

整個項目的代碼我已經寫完了，它的結構非常簡單，一共就只有三個頁面:

第一個頁面:開屏的 Splash 頁面，也就是文章開頭我放的動圖，這裡我們用 Compose 的動畫 API 就能輕鬆實現。

第二個頁面: 首頁，也就是代處理任務的列表。

第三個頁面:任務詳情。

整個工程的代碼量，我統計了一下，只有 1,400 多行。

對於一個功能完整的 App，這樣的代碼量已經算上很小的了，想想我們工作中的一個 Presenter 代碼量都不止 1,400 行代碼吧？

到這裡，您會不會覺得，這個代碼量實在太小了呢？這 App 會不會是個 Hello World 級別的呢？讓我來帶您看看它的功能。

工程介紹

總的來說，核心的 UI 只有這麼幾個文件:

開屏頁面

其中，最簡單的，就是 Splash 頁面，它的作用只有一個:展示 Logo，接着等待一小會，進入首頁。在這裡，我們會實現一個動畫。

這個動畫分為兩個部分: Logo 的「透明度」動畫，還有文字的「透明度」+「位移」動畫。

首頁

接着，我們來看看首頁的功能，它會展示當前所有的任務和狀態。

這裡，我寫了一個進場動效，這個在 Compose 當中實現起來真沒什麼難度。

總的來說，就是:Index 越大的 Item，它的初始位移越大，進場的時候，再把所有 Item 挪回原處即可。

拖拽刪除

然後，我還實現了一下拖拽刪除功能。

拖拽刪除本身沒什麼難度，不過，在拖拽的過程中，做一些其他的事情，還是比較有意思的。這裡有兩個細節:

第一，手指拖動到一定範圍的時候，彈出一個 Toast，告訴用戶，可以鬆手刪除了。但這其中有一個難處: 如何避免 Toast 反覆彈出。

第二，手指拖動到一定範圍後，垃圾桶圖標還做了一個:傾倒的動畫。

任務詳情頁面

詳情頁，這個頁面反而沒什麼特殊東西，就是兩個輸入框，分別是: 任務標題、任務詳情，還有一個 CheckBox，代表任務是否已經完成。

這裡的輸入框的動畫效果，是 TextField 自帶的，也不需要我們自己實現，雖然有點丑，但也能用了。

Splash 代碼

OK，工程介紹完了，我們就可以上代碼了！這篇文章，我們先從最簡單的 Splash 頁面開始吧！

@ComposablefunSplash(offsetState:Dp,alphaState:Float){//1Box(modifier=Modifier.fillMaxSize().background(MaterialTheme.colors.splashBackground),contentAlignment=Alignment.Center){//2Column(horizontalAlignment=Alignment.CenterHorizontally){//3Image(modifier=Modifier.size(LOGO_HEIGHT).alpha(alpha=alphaState),painter=painterResource(id=getLogo()),contentDescription=stringResource(id=R.string.to_do_logo))//4Text(modifier=Modifier.offset(y=offsetState).alpha(alpha=alphaState),text=stringResource(id=R.string.app_name),color=MaterialTheme.colors.splashText,style=MaterialTheme.typography.h5,fontWeight=FontWeight.Bold,maxLines=1,)}}}

整個 Splash 的 UI 元素其實很簡單，我標記了 4 個注釋，我們一起看看:

注釋 1，它是一個撐滿屏幕的 Box，相當於 Android 當中的 FrameLayout。

注釋 2，Column，它相當於 Android 當中的 LinearLayout，並且是縱向布局。

注釋 3，Image，它其實就是開屏當中的 LOGO。

注釋 4，Text，它其實就是開屏當中的文字: To Do。

OK，UI 元素寫出來了，動畫怎麼搞？

@ComposablefunSplash(gotoHomeScreen:()->Unit){//1varstartbyremember{mutableStateOf(false)}//2valoffsetbyanimateDpAsState(targetValue=if(start)0.dpelse100.dp,animationSpec=tween(durationMillis=1000))valalphabyanimateFloatAsState(targetValue=if(start)1felse0f,animationSpec=tween(durationMillis=2000))//3LaunchedEffect(key1=Unit){start=truedelay(SPLASH_DELAY)gotoHomeScreen()}Splash(offsetState=offset,alphaState=alpha)}

其實，動畫也很簡單，我們通過注釋來看:

注釋 1，start 標記動畫的狀態。

注釋 2，使用 animateDpAsState、animateFloatAsState 生成對應的 alpha、offset，並且，將它們傳入 Splash 頁面當中去使用。您可以回過頭看看 Splash 頁面是如何使用這兩個參數的。

注釋 3，LaunchedEffect，這裡傳入參數 Unit，代表它只會執行一次。它的作用，就是啟動一個協程，並且在協程當中改變 start 的狀態，接着延遲一小會，就可以進入首頁了。

最終的效果就是這樣的:

結束語

恭喜您，您已經完成了一個 Compose 頁面！

長按右側二維碼

查看更多開發者精彩分享

"開發者說·DTalk" 面向中國開發者們徵集 Google 移動應用 (apps & games)相關的產品/技術內容。歡迎大家前來分享您對移動應用的行業洞察或見解、移動開發過程中的心得或新發現、以及應用出海的實戰經驗總結和相關產品的使用反饋等。我們由衷地希望可以給這些出眾的中國開發者們提供更好展現自己、充分發揮自己特長的平台。我們將通過大家的技術內容着重選出優秀案例進行谷歌開發技術專家 (GDE)的推薦。