アジェンダ段階 Compose for Deskopで始めるAndroid開発効率化ツールの作成

Transcript

1. Compose for Deskopで始める
   Android開発効率化ツールの作成
   Droidkaigi 2022 Day01
   Yusuke Katsuragawa / YUMEMI Inc.
   

   View Slide

2. 自己紹介
   - 桂川 祐介
   - 株式会社ゆめみ
   - Androidエンジニア
   - Twitter : @kaleidot725
   - GitHub : kaleidot725
   

   View Slide

3. 本セッションで取り扱うこと
   

   View Slide

4. 本セッションで取り扱うこと
   - Compose for Desktopとは
   - Android開発効率化ツールの作成方法
   - 開発環境のセットアップ方法
   - プロジェクトのセットアップ方法
   - ADBを利用したGUIツールの作成方法
   - Compose
   

   View Slide

5. アジェンダ
   

   View Slide

6. アジェンダ
   1. Compose for Desktopとは
   2. どのようなツールを作るか
   3. どのようにツールを作るか
   4. おわりに
   

   View Slide

7. Compose for Desktopとは
   

   View Slide

8. 開発環境
   

   View Slide

9. プロジェクト作成
   

   View Slide

10. どんなツールを作るのか？
    

    View Slide

11. Andoroid端末の一覧を取得する
    

    View Slide

12. ADBコマンドを実行する
    

    View Slide

13. コマンド実行 - 作成する画面
    

    View Slide

14. View StateHolder Model
    

    View Slide

15. @Composable
    fun CommandItem (
    title: String,
    detail: String,
    onExecute : () -> Unit,
    modifier : Modifier = Modifier
    ) {
    Card(modifier ) {
    Row(
    horizontalArrangement = Arrangement .spacedBy (8.dp),
    verticalAlignment = Alignment .CenterVertically ,
    modifier = Modifier .padding(8.dp)
    ) {
    Column(modifier = Modifier .weight(0.9f, true)) {
    Text(text = title)
    Text(text = detail)
    }
    Button(onClick = { onExecute () }) { Text(text = Strings.EXECUTE) }
    }
    }
    }
    @Preview
    @Composable
    private fun CommandItem_Preview () {
    CommandItem(
    title = "ダークテーマ ON",
    detail = "端末のダークテーマ設定を ONにします",
    onExecute = {},
    modifier = Modifier .fillMaxWidth().wrapContentWidth()
    )
    }
    コマンド実行 - View層①
    

    View Slide

16. View StateHolder Model
    

    View Slide

17. @Composable
    fun CommandItem (
    title: String,
    detail: String,
    onExecute : () -> Unit,
    modifier : Modifier = Modifier
    ) {
    Card(modifier ) {
    Row(
    horizontalArrangement = Arrangement .spacedBy (8.dp),
    verticalAlignment = Alignment .CenterVertically ,
    modifier = Modifier .padding(8.dp)
    ) {
    Column(modifier = Modifier .weight(0.9f, true)) {
    Text(text = title)
    Text(text = detail)
    }
    Button(onClick = { onExecute () }) { Text(text = Strings.EXECUTE) }
    }
    }
    }
    @Preview
    @Composable
    private fun CommandItem_Preview () {
    CommandItem(
    title = "ダークテーマ ON",
    detail = "端末のダークテーマ設定を ONにします",
    onExecute = {},
    modifier = Modifier .fillMaxWidth().wrapContentWidth()
    )
    }
    コマンド実行 - StateHolder①
    

    View Slide

18. View StateHolder Model
    

    View Slide

19. @Composable
    fun CommandItem (
    title: String,
    detail: String,
    onExecute : () -> Unit,
    modifier : Modifier = Modifier
    ) {
    Card(modifier ) {
    Row(
    horizontalArrangement = Arrangement .spacedBy (8.dp),
    verticalAlignment = Alignment .CenterVertically ,
    modifier = Modifier .padding(8.dp)
    ) {
    Column(modifier = Modifier .weight(0.9f, true)) {
    Text(text = title)
    Text(text = detail)
    }
    Button(onClick = { onExecute () }) { Text(text = Strings.EXECUTE) }
    }
    }
    }
    @Preview
    @Composable
    private fun CommandItem_Preview () {
    CommandItem(
    title = "ダークテーマ ON",
    detail = "端末のダークテーマ設定を ONにします",
    onExecute = {},
    modifier = Modifier .fillMaxWidth().wrapContentWidth()
    )
    }
    コマンド実行 - Model①
    

    View Slide