Help us understand the problem. What is going on with this article?

Android【Jetpack Composeお試し編】

概要

「Android Studio 4.0 Canary 1」にてkotlinのコードでUIを構築できるJetpack Composeに対応しました。

実際に公式のチュートリアルやデモを試したのでそのまとめです。

Android Studio 4.0 ダウンロードページ
Jetpack Composeとは
Use Android Studio with Jetpack Compose
TUTORIAL Jetpack Compose Basics
Jetpack Compose Basics

使い方

1, ActivityのonCreate内にsetContentを呼ぶ
2, @Composableアノテーションをつけた関数を作成し、UIを記述していく
3, setContent内に2で作成した関数を呼ぶ

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 1
        setContent {
            // 3
            Greeting(name = "Android")
        }
    }
}
// 2
@Composable
fun Greeting(name: String) {
   Text (text = "Hello $name!")
}

レウアウトやテキストにStyleを指定する

Composable関数の引数にスタイルを指定する

Text (text = "Hello $name!", style = Color.Red)

MaterialThemeを使用してスタイルを指定する

MaterialTheme {
    Text (text = "Hello $name!", style = +themeTextStyle { h1 })
}

動的にデータを変更したい場合(ステート)

1, @Modelアノテーションをつけたデータクラスを作成
2, Composable関数に1のモデルクラスのインスタンスを渡す

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 2
            Counter(counterState)
        }
    }
}

val counterState = CounterState()

// 1
@Model
class CounterState (var count: Int = 0)

@Composable
fun Counter(state: CounterState) {
    Button(
        text = "${state.count} times",
        onClick = { state.count++ }
    )
}

よく使いそうな関数

関数名 動作
Text 文字列を表示する
DrawerImage 画像を表示する
Container レイアウト
Row 要素を横並びにする
Column 子要素を縦並びにする
Clip 画像の角を丸くしたりすることができる
Surface 子要素の背景色の指定や角を丸くしたりすることができる
HeightSpacer 指定した分の高さのスペースを作る
WidthSpacer 指定した分の幅のスペースを作る(Column内で使う)
Clickable 子要素をクリック要素にする

感想

React, Flutter, SwiftUIを触ったことがありますが、そのおかげかスラスラコードがかけました。

Jetpack ComposeだとステートをModelクラスで保持できるので、普段Android開発してる人はState周りはすんなり理解できると思います。

既存のAPIなどとも互換性があるそうなので、既存のプロジェクトに組み込むこともできます。

正式にリリースされる際はSwiftUIにあるViewをドラッグアンドドロップするとコードが追加される機能がついて欲しいです。

Fragment内のsetContentをviewGroupの拡張関数として呼べるので、Fragment内でもComposable関数が使用できそうだが、やり方がわかりません(わかり次第追記します。)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした