Jetpack Compose ã¢ã«ãã¡çãå ¬éãã¾ãã
2020å¹´9æ1æ¥ç«ææ¥
8 æ 26 æ¥(æ¥æ¬æé 8 æ 27 æ¥)Jetpack Compose ã®ã¢ã«ãã¡çãå ¬éãã¾ãã。ææ°ã® UI ãã¼ã«ããã Jetpack Compose ã¯、ãã¹ã¦ã® Android ãã©ãããã©ã¼ã ã§ç¾ããã¢ããªããã°ããç°¡åã«æ§ç¯ããããã«è¨è¨ããã¦ãã、ãã©ãããã©ã¼ã API ã¸ã®ãã¤ãã£ã ã¢ã¯ã»ã¹ãæä¾ãã¾ã。åçã«åæ¸ãããã³ã¼ã、ã¤ã³ã¿ã©ã¯ãã£ããªãã¼ã«、ããã¦ç´æç㪠Kotlin API ãæ´»ç¨ãã¦、é åããµããã¢ããªãä½ãã¾ããã。
æéãç¯ç´ã、å°ãªãã³ã¼ãã§æç«ããããã°ã©ãã³ã°è¨èªã¨ IDE、ããã¦å¼·å㪠UI ãã¬ã¼ã ã¯ã¼ã¯ã¯、ã©ããªã¢ããªãéçºããæã§ãå¿ è¦ã§ã。Jetpack Compose ã¯、çãã(ã¨ç§ãã¡)ã® UI æ§ç¯ã®çç£æ§ãä¸ããããã«éçºãã¾ãã。
ãã®æåã®ä¸æ©ã Android Jetpack ã§ãã。ãã®ä¸é£ã®ã©ã¤ãã©ãªã¯、Android ã§ãããããã¼ãé »ç¹ã«ç´é¢ããé£ããåé¡ã解決ããããã«éçºã、ãã©ãããã©ã¼ã ã®ãããããã¼ã¸ã§ã³ã§ã¢ããªã確å®ã«åä½ãã、é«ãå質ã確ä¿ã§ããã©ã¤ãã©ãªã¨ãªã£ã¦ãã¾ã。ç¾å¨、Google Play ã¹ãã¢ã®ããã 10,000 ã¢ããªã® 84% ã§、ããããã® Jetpack ã©ã¤ãã©ãªã使ããã¦ãã¾ã。
ã¾ã、Kotlin ã使ç¨çãé«ã、ç¾å¨ããã 1,000 ã¢ããªã® 70% 以ä¸、ãã㦠Android ãããããã¼ã® 60% ã Kotlin ã使ã£ã¦ãã¾ã。Google Home ã¢ããªãä¾ã«æããã¨、Kotlin ã使ããã¨ã§ã³ã¼ãã®è¡ã 80% åæ¸ã§ãã¾ãã。ããã«、NullPointerException ã¯éå»ã®åæéã¨æ¯ã¹ã¦ 33% æ¸å°ãã¾ãã。Duolingo ã、Kotlin ãå°å ¥ãããã¨ã§å¹³å 30% ã®ã³ã¼ãè¡æ°ã®åæ¸ãå®ç¾ãã¾ãã。
Jetpack Compose ã¯、大è¦æ¨¡ã§é«å質ãªã¢ããªãæ§ç¯ã§ãã API、ç´æçãªè¨èª、ããã¦ãªã¢ã¯ãã£ã ããã°ã©ãã³ã° ã¢ãã«ãçµã¿åããããã®ã§ã。 ãããããã¼ã®çããããå¯ãããã¦ãã、ã·ã³ãã«ãªå®£è¨å API ã«ãã UI ã®æ§ç¯ãå¸æããã¨ãããã£ã¼ãããã¯ãå®ç¾ãã¾ãã。
Jetpack Compose ã¢ã«ãã¡ç
Jetpack Compose ã¢ã«ãã¡çã«ã¯ä¸é£ã® API ãå«ã¾ãã¦ãã、å¼·åãªãã¼ã«ã、æ¬æ ¼ç㪠Android ã¢ããªã®æ§ç¯ã«å¿ è¦ãªãã®ããã¹ã¦ããã£ã¦ãã¾ã。æ¢åã® Android ãã¥ã¼ã¨ã®ç¸äºéç¨æ§ãåãã¦ãã¾ãã®ã§、ã¢ããªãæ¸ãç´ãå¿ è¦ã¯ããã¾ãã。Compose API ã¯、ãããªã¢ã« ãã¶ã¤ã³ã使ã£ãæ£è¦ã®ãµã³ãã«ã¢ããªã®ã»ããã¨ã¨ãã«è¨è¨、éçºããã¦ãã¾ã。ãã®ãµã³ãã«ã¢ããªã®ã»ããã 8 æ 26 æ¥ã«å ¬éãã¾ããã®ã§、Android Studio ã«ç´æ¥ã¤ã³ãã¼ããã¦è©¦ãã¦ã¿ããã¨ãã§ãã¾ã。
Jetpack Compose ã¢ã«ãã¡çã«ã¯、次ã®ãã®ãå«ã¾ãã¦ãã¾ã。
- ã¢ãã¡ã¼ã·ã§ã³
- Constraint Layout
- ããã©ã«ãã§ãµãã¼ãããã A11Y
- å ¥åã¨ã¸ã§ã¹ãã£ã¼æä½
- ãã¥ã¼ã¨ã®ç¸äºéç¨æ§(æ¢åã¢ããªã§ Composable é¢æ°ãå©ç¨å¯è½)
- é 延èªã¿è¾¼ã¿ãªã¹ã
- ãããªã¢ã« UI ã³ã³ãã¼ãã³ã
- ããã©ã¼ãã³ã¹æé©å
- ãã¹ã
- ããã¹ãã¨ç·¨éå¯è½ããã¹ã
- ãã¼ãã¨ã°ã©ãã£ãã¯
- ã¦ã£ã³ãã¦ç®¡ç
Compose ã§ã¢ããªãä½ãããããããã、Jetbrains Kotlin ãã¼ã ã¨ãé£æºã㦠Android Studio 4.2 Canary çã«ãå¤ãã®æ°æ©è½ã追å ãã¦ãã¾ã。
- Compose ã³ã¼ãè£å®
- Compose ãã¬ãã¥ã¼ ã¢ããã¼ã·ã§ã³
- 端æ«ã¸ã® Composable ã®åå¥ãããã¤
- ã¤ã³ã¿ã©ã¯ãã£ã Compose ãã¬ãã¥ã¼
- ã³ã¼ãçæç¨ Kotlin ã³ã³ãã¤ã© ãã©ã°ã¤ã³
- Compose ç¨ Sample Data API
Compose ã®ç¹é·
Compose ã¯、Android ã®æ¢å UI æ§ç¯ã¢ãã«ã¨ã¯ã¾ã£ããç°ãªãããã°ã©ãã³ã° ã¢ãã«ã使ç¨ãã¦ãã¾ã。Android ãã¥ã¼ã®é層ã¯、å½åãã UI ã¦ã£ã¸ã§ããã®ããªã¼ã¨ãã¦è¡¨ç¾ããã¦ãã¾ã。ã¢ããªã®ç¶æ ãå¤æ´ãããã¨、ç¾å¨ã®ãã¼ã¿ã表示ããããã« UI é層ãæ´æ°ããå¿ è¦ãããã¾ã。UI ãæ´æ°ããå ´åã¯、findViewById() ãªã©ã®é¢æ°ã使ã£ã¦ããªã¼ãã UI ãæ¤ç´¢ã、button.setText(String) ã container.addView(View)、img.setImageBitmap(Bitmap) ãªã©ã®ã¡ã½ãããå¼ã³åºãã¦ãã¼ããå¤æ´ããã®ãä¸è¬çãªæ¹æ³ã§ã。ãããã®ã¡ã½ããã¯、ã¦ã£ã¸ã§ããã®å é¨ç¶æ ãå¤æ´ãã¾ã。æåã§ãã¥ã¼ãæ´æ°ããã¨ããä½æ¥ã¯、é¢åã§ããã ãã§ãªã、ã¨ã©ã¼ãèµ·ããå¯è½æ§ãé«ããªãã¾ã(ä¾: ãã¥ã¼ã®æ´æ°ãå¿ãã)。
Jetpack Compose ã§ã¯、å®å ¨ã«å®£è¨çã§ã³ã³ãã¼ãã³ããã¼ã¹ã®ã¢ããã¼ããæ¡ç¨ãã¦ãã¾ã。ã¤ã¾ã、UI ã¯、ãã¼ã¿ã UI é層ã«å¤æããé¢æ°ã¨ãã¦è¨è¿°ãã¾ã。ãã¼ã¹ã¨ãªããã¼ã¿ãå¤æ´ãããã¨、Compose ãã¬ã¼ã ã¯ã¼ã¯ã¯èªåçã« UI é層ãæ´æ°ãã¾ã。ãã®ãã、UI ããã°ããç°¡åã«æ§ç¯ã§ãã¾ã。
æ¢åã® Android ãã¥ã¼ã¨ã®å®å ¨ãªç¸äºéç¨æ§
æ°ãããã¬ã¼ã ã¯ã¼ã¯ãæ¡ç¨ããã¨、æ¢åã®ããã¸ã§ã¯ããã³ã¼ããã¼ã¹ã«å¤§ããªå¤æ´ãçºçãã¾ã。ãã®ãã、Compose 㯠Kotlin ã¨åããããæ¡ç¨ãããããã®ã¨ãã¦è¨è¨ãã¾ãã。Compose ã¯、æ¢åã® Android ã³ã¼ãã¨å®å ¨ã«ç¸äºéç¨ãå¯è½ã§、ããã«ä½¿ãå§ãããã¨ãã§ãã¾ã。
Compose ã¸ã®ç§»è¡æ¹æ³ã¯、æ å½è ããã¼ã ã«ãã£ã¦ãã¾ãã¾ã§ã。æ°ããã¢ããªãæ§ç¯ããå ´åã¯、UI å ¨ä½ã Compose ã§å®è£ ããæ¹æ³ãæé©ããããã¾ãã。ããã、ã»ã¨ãã©ã®çããã¯æ¢åã®å¤§ããªã³ã¼ããã¼ã¹ãæ±ãã¦ããã¯ãã§ã。ãã®å ´åã¯、ã¢ããªãæ¸ãç´ãããã、æ¢åã® UI ãã¶ã¤ã³ã« Compose ãçµã¿è¾¼ãæ¹ãããã§ããã。
主ã«æ¬¡ã® 2 ã¤ã®æ¹æ³ã使ç¨ãã¦、ãã¥ã¼ãã¼ã¹ã® UI ã« Compose ãçµã¿è¾¼ããã¨ãã§ãã¾ã。
- Compose ã®è¦ç´ ãæ¢åã® UI ã«è¿½å ãã¾ã。ããã¯、ã¾ã£ããæ°ãã Compose ãã¼ã¹ã®ç»é¢ãä½ãã、Compose ã®è¦ç´ ãæ¢åã®ãã©ã°ã¡ã³ãããã¥ã¼ã«ããã¬ã¤ã¢ã¦ãã«è¿½å ãããã¨ã§å®ç¾ãã¾ã。
- Composable é¢æ°ã«ãã¥ã¼ãã¼ã¹ã® UI è¦ç´ ã追å ãã¾ã。ãã®æ¹æ³ã使ãã¨、MapView ã WebView ãªã©ã® Compose 以å¤ã®ã¦ã£ã¸ã§ããã Compose ãã¼ã¹ã®ãã¶ã¤ã³ã«è¿½å ã§ãã¾ã。
ããã«、æ°ããã©ã¤ãã©ãª MDC Compose Theme Adapter ãå ¬éãã¦ãã¾ã。ããã使ãã¨、Compose UI ã§æ¢åã®ãããªã¢ã« ã³ã³ãã¼ãã³ã ãã¼ããåå©ç¨ã§ãã¾ã。
詳細ã«ã¤ãã¦ã¯、æ¢åã®ã¢ããªã§ Compose ã使ãããã®ã³ã¼ãã©ãã試ãã¦ã¿ãã、次㮠2 ã¤ã®ãµã³ãã«ãã覧ãã ãã。
- Tivi 㨠Sunflower ã¯、Compose ãçµã¿è¾¼ãã æ¢åã¢ããªã§ã。
- Crane ãµã³ãã«ã¢ããªã§ã¯、Compose ã« MapView ãåãè¾¼ãã§ãã¾ã。
å¼·åãªãã¼ã«
æ§ç¯ãã UI ããã°ããç¹°ãè¿ã試ããããã«、Jetpack Compose 㯠Android Studio ã®å¼·åãªãã¼ã«ã¨çµã¿åããã¦å©ç¨ã§ããããã«æ§ç¯ããã¦ãã¾ã。
Compose ã¬ã¤ã¢ã¦ã ãã¬ãã¥ã¼ã使ãã¨、端æ«ãã¨ãã¥ã¬ã¼ã¿ã«ã¢ããªããããã¤ããªãã¦ã、Compose ã³ã³ãã¼ãã³ãããã¬ãã¥ã¼ã§ãã¾ã。ã¢ããªã«å¤æ´ãå ããã¨、ãã¬ãã¥ã¼ãæ´æ°ããã¦ãã°ããå¤æ´ç¹ã確èªã§ãã¾ã。ã¬ã¤ã¢ã¦ã ãã¬ãã¥ã¼ãä½æããã«ã¯、ãã©ã¡ã¼ã¿ã®ãªã Composable é¢æ°ãä½æã㦠@Preview ã¢ããã¼ã·ã§ã³ã追å ãã¾ã。ã¢ããªããã«ãããã¨、Studio ã®ãã¬ãã¥ã¼ ãã¤ã³ã«ãã¬ãã¥ã¼é¢æ°ã® UI ã表示ããã¾ã。
Android Studio ã§ã¯、ã¤ã³ã¿ã©ã¯ãã£ã ãã¬ãã¥ã¼ ã¢ã¼ããå©ç¨ã§ãã¾ã。ã¤ã³ã¿ã©ã¯ãã£ã ãã¬ãã¥ã¼ ã¢ã¼ãã§ã¯、UI è¦ç´ ã®ã¯ãªãã¯ãå ¥åãå¯è½ã§ã。UI ã¯ã¤ã³ã¹ãã¼ã«ããã¢ããªã¨åãããã«åå¿ãã¾ã。
ã¾ã、Composable ãåç¬ã§ç©ç端æ«ã Android Emulator ã«ãããã¤ãããã¨ãã§ãã¾ã。Android Studio ã¯、æ°ããã¢ã¯ãã£ããã£ãä½æãã¦ãã®é¢æ°ãçæãã UI ã追å ã、端æ«ã®ã¢ããªã«ãããã¤ãã¾ã。ããã«ãã、ã¢ããªå ¨ä½ãåã¤ã³ã¹ãã¼ã«ããããã®å ´æã«ç§»åããããããã¨ãªã、å®éã®ç«¯æ«ã§ UI ã試ããã¨ãã§ãã¾ã。
Jetpack Compose ã使ã£ã¦ã¿ã
Jetpack Compose ã使ã£ã¦ã¿ããæ¹ã¯、Compose ãã¥ã¼ããªã¢ã« ã試ã、ã»ããã¢ãããè¡ã£ã¦ã¿ã¦ãã ãã。ã¾ãã¯、ç´æ¥ãµã³ãã«ã¢ããªã確èªãããã¨ãã§ãã¾ã。ãããã®ã¢ããªãç´¹ä»ãã¦ãã ‘Compose by Example’ ã®åç»ãã覧ãã ãã。
æ°ããã³ã¼ãã©ããããã«å å®ããããã¥ã¡ã³ããªã©、Compose å ¨è¬ã«é¢ããæ å ±ã確èªãããæ¹ã¯、Compose Pathway ãã覧ãã ãã。
Jetpack Compose ã¯、æ¨å¹´ã®ãªã¼ãã³ã½ã¼ã¹å以éãå¼ãç¶ãå¤ãã®æ¹ããè²´éãªãã£ã¼ãããã¯ããå¯ãããã ãã¦ãã¾ã。ã¾ã、ãã°ã®è¨é²、 CLã«ãè²¢ç®ãã¦ãã ãã£ã¦ãã¾ã。ç¾å¨ã® Jetpack Compose ãããã®ã¯、çããã®ãããã§ã。æ¬å½ã«ãããã¨ããããã¾ãã!
Compose ã¯å®å®ç API ã«åããä½æ¥ãããã©ã¼ãã³ã¹æé©åãè¡ã£ã¦ãã段éã®ãã、ã¾ã æ¬çªç°å¢ã§ã®å©ç¨ã¯æ¨å¥¨ããã¦ãã¾ãã。ã§ãã、ãã²ã試ãããã ã、ãã£ã¼ãããã¯ããå¯ããã ãã。Kotlin Slack ã® #compose ãã£ã³ãã«ã§è¡ããã¦ãããã£ã¹ã«ãã·ã§ã³ã¸ã®åå ããå¾ ã¡ãã¦ãã¾ã。Compose 1.0 ã¯、2021 å¹´ã®ãªãªã¼ã¹ãäºå®ãã¦ãã¾ã。
ãã² Compose ã使ã£ã¦ã¿ã¦ãã ãã!
Reviewed by Yuichi Araki - Developer Relations Team and Hidenori Fujii - Google Play Developer Marketing, APAC