Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wear OSアプリ開発Tips with Jetpack Compose

Wear OSアプリ開発Tips with Jetpack Compose

Engineer LT 1の発表資料です。

#EngineerLT
#WearOS
#androidjo

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

June 14, 2022
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

Transcript

  1. Wear OSΞϓϦ։ൃTips with Jetpack Compose 2022.06.14 ਆݪ ݈Ұ (@korodroid) Engineer

    LT #1
  2. 2 About me ਆݪ ݈Ұ (@korodroid) •Mobile App Development •Speeches

    (e.g. 9 International confs.) •Writings (e.g. 6 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org
  3. Agenda •Wear OS ͷ࠷৽τϐοΫ(։ൃऀ޲͚) •Wear OS ΞϓϦ։ൃTips with Jetpack Compose

    Source: Google I/O 2022 Keynote / Developer Keynote / Wear OS Session Android Developers Blog
  4. Wear OS Topics from I/O 2022 (։ൃऀ޲͚:ൈਮ) 

  5. Compose for Wear OS Input components Dialogs Page Indicator Progress

    Indicator  Navigation
  6. Compose for Wear OS ࣮૷ྫ(͋ͱͰվળ͍͖ͯ͠·͢) @Composable fun ContactsScreenV1() { LazyColumn

    { item { ListHeader { Text(text = "Contacts") } } items(20) { Chip( icon = { Icon( Icons.Rounded.Face, contentDescription = "Contacts", ) }, label = { Text("HogeHoge Tarou $it") }, colors = ChipDefaults.primaryChipColors(), onClick = { }, ) } } } 
  7. 7 Wear OS ΞϓϦ։ൃTips with Jetpack Compose

  8. 8 ։ൃ؀ڥ  IntelʹՃ͑ɺApple Silicon΋αϙʔτ Wear OS ։ൃʹ͓͢͢Ί

  9. 9 Wear OS ϓϩδΣΫτ࡞੒  Jetpack ComposeͰ։ൃ͢Δ৔߹

  10. 10 Live Demo💪 

  11. Tips1: Live Editͷઃఆ(Electric Eel) 

  12. Tips2: ϓϨϏϡʔػೳ(Electric Eel) 

  13. [UIվળͷલʹ…]Wear OSͱMobileͷҧ͍(ྫ)  Wear OS 
 (androidx.wear.*) Mobile 
 (androidx.*)

    androidx.wear.compose:compose-material androidx.wear.compose:compose-navigation androidx.compose.foundation:foundation androidx.wear.compose:compose-foundation androidx.compose.material:material androidx.navigation:navigation-compose androidx.compose.foundation:foundation ref: https://developer.android.com/training/wearables/compose
  14. @Composable fun ContactsScreenV2() { ScalingLazyColumn { item { ListHeader {

    Text(text = "Contacts") } } items(20) { Chip( icon = { Icon( Icons.Rounded.Face, contentDescription = "Contacts", ) }, label = { Text("HogeHoge Tarou $it") }, colors = ChipDefaults.primaryChipColors(), onClick = { }, ) } } }  Tips3: UIվળྫ1(ScalingLazyColumn΁ͷஔ͖׵͑)
  15. @OptIn(ExperimentalWearMaterialApi::class) @Composable fun ContactsScreenV3() { val listState = rememberScalingLazyListState() Scaffold(

    timeText = { if (!listState.isScrollInProgress) { TimeText() } }, vignette = { Vignette( vignettePosition = VignettePosition.TopAndBottom ) }, positionIndicator = { PositionIndicator( scalingLazyListState = listState, ) } ) { ScalingLazyColumn(state = listState) { // লུ } }  Tips4: UIվળྫ2(Scaffoldͷ׆༻)
  16. Reference  •Google I/O 2022 Keynote / Developer Keynote /

    Session 
 https://io.google/2022 
 •Announcing Compose for Wear OS Beta! 
 https://android-developers.googleblog.com/2022/05/ announcing-compose-for-wear-os-beta.html •Codelabs (Wear OS) 
 https://codelabs.developers.google.com/?cat=wearos
  17. Please let me know if you have any requests 


    such as technical speeches, technical writings and so on. http://www.linkedin.com/in/korodroid Thank you so much http://fb.com/kanbara.kenichi @korodroid