search
LoginSignup
0
Help us understand the problem. What are the problem?

posted at

Intellij IdeaからJetpack Composeを使ってみる

初投稿です。

Jetpack Compose

Jetpack Compose が2021年7月に正式リリースになりました。公式サイトによると

  • XMLを使う煩雑さの軽減
  • 宣言型UI(UIの構築だけでいい感じによしなにしてくれる)
  • KotlinだからAPIを直接呼べる

とかを売りにする

ネイティブ UI をビルドするための Android の最新ツールキット

なんだそうです。
しかも聞くところによるとマルチスレッドにいい感じに対応して、
UIの更新が必要なら非常に 変態的な 高度な実装により更新を必要とする部分だけ再描画するそうで。
未来を感じる技術です。イヤータノシソウダナー

...

..

2021年7月に正式リリース

_人人人人人人人_
> 2021年7月 <
 ̄Y^Y^Y^Y^Y^Y ̄

出遅れました

約一年遅れです。忙しかったんです。

それでやっとこの度試しに使ってみることしたのですが、GoogleのAndroid Studio押しがすごくてググっても純Intellij Ideaで使ってる人があんまり出てこない(Compose for Desktopばっかり出てくる)
ので、いっちょ使えるか試してやろうと思った次第でございます。

環境

  • Windows 10
  • Intellij Idea
    • 2022.1 (Community Edition)
    • ビルド #IC-221.5080.210
    • Japanese Language Pack インストール済み

環境構築

Plugin

バンドルの Androidプラグインは有効化しておきます

Jetpack Compose プラグイン

なんかいかにもなプラグインがあったのでインストールします。
いやだってサイトにほとんど説明が無いんですもん。
多分プレビュー機能とかがついてくるんだと思います。

安心のJetBrains製

Android SDK

なんか知らない間にAndroid SDKもGUIからインストール出来るようになってました。
2,3年前にCUIのインストーラでインストールした記憶があるんですが...

設定の

Appearance & Behavior > System Settings > Android SDK

から必要なバージョンをインストールします。

Android SDKのインストール

今回は以前8.1(Oreo)をインストールしていたので飛ばしました。

プロジェクト作成

[新規プロジェクト]から[Android]を選択

新規プロジェクトテンプレート

[Empty Activity]を選択して次へ

プロジェクト設定

初期化画面

ComposeはAPIレベル21 (Android 5.0-Lollipop)からしか対応してないので最小バージョンをそれ以上にしておきましょう。

[Use legacy android-support libraries] はオフにしておきます

build.gradleの編集

Composeの有効化

app ディレクトリのbuild.gradleに次の文を加えます

(app) build.gradle
android{
    //以下を追加
    buildFeatures{
        compose=true
    }
    composeOptions{
        kotlinCompilerExtensionVersion '1.1.1'
    }
}

これによりCompose機能が有効化されます。これしないとプレビューとか表示してくれません。
ちなみに入力補完は効きませんでした(ビルドは通った)

依存関係の追加

同じくapp ディレクトリのbuild.gradleに次の文を加えます

(app) build.gradle
dependencies{
    //以下を追加
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    //こっちは任意
    implementation 'androidx.compose.material:material:1.1.1'
}

プロジェクトにComposeへの依存関係が追加されます。
多分 'androidx.compose.ui:ui-tooling:1.1.1' がComposeのコア部分です。
Compose最重要の@Composableなどはここからインポートされます。

使ってみる

適当なパッケージ com.alrexu.composetest.screen を作って TestScreen.kt を作成します。

  • com/alrexu/composetest
    • MainActivity.kt
    • screen
      • TestScreen.kt

ひとまずここにComposable関数 (後述) を定義していきます。
呼び出せればいいっぽいので実際は割とどこでもいいのかな?
公式サイトでは onCreate() 内で setContent() を呼んでそこに直書きしてますね。

Hello World!

TestScreen.kt
package com.alrexu.composetest.screen

import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

class TestScreen {
    @Preview()
    @Composable
    fun testScreen(){
        Text(text = "Hello World")
    }
}

ComposeではUIを構築(Compose)する関数は@Composableを付与されComposable関数と呼ばれます。
ComposableからComposableを呼び出すことで連鎖的にUIを構築するようです。(testScreen()内のTextもComposable関数)
@Previewが付与されていますが、これによってIDEが対象のComposableのライブプレビューを表示してくれます。

ここでビルドしろって言われたのでビルドします。

プレビュー1

素晴らしい...

@Preview

@Previewの付いた関数は無引数である必要があります。
引数付きのComposableをプレビューする場合、無引数のプレビュー用関数を作成しそこから呼び出す必要があります。

あと引数に値を渡せばプレビュー設定を弄れるようです。
例えば

TestScreen.kt
@Preview(widthDp = 100, heightDp = 200)

とすればプレビューの幅、高さを指定できます。(Dpは密度非依存ピクセル)

もう少し弄る

どうやらプレビュー更新のたびにビルドが走るようです。
(Kotlinで書いてるから当たり前っちゃ当たり前)

ボタンを付けてみます。(Button関数を見つけた)
ちょっと思ったけどこれ連続で関数呼び出せば LinearLayout みたいになるのでは。

TestScreen.kt
package com.alrexu.composetest.screen

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

class TestScreen {
    @Preview(widthDp = 100, heightDp = 200)
    @Composable
    fun testScreen(){
        Text(text = "Goodbye")
        Button(onClick = {}) {
            Text(text = "寝る")
        }
    }
}

プレビュー2

わぉ

追加

Column()

連続的に配置する場合にはこれで囲むようです。

MaterialTheme()

内部がマテリアルデザインになるようです。

以上を加えて、あと見ずらいので文字色を白にしたものがこちらです。

TestScreen.kt
package com.alrexu.composetest.screen

import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview

class TestScreen {
    @Preview(widthDp = 100, heightDp = 200)
    @Composable
    fun testScreen(){
        MaterialTheme() {
            Column {
                Text(text = "Goodbye", color = Color.White)
                Button(onClick = {}) {
                    Text(text = "寝る")
                }
            }
        }
    }
}

プレビュー3.png

(・∀・)イイネ!!

結論

Intellij IdeaでもAndroid Composeは使える!

ググればググるほど面白そうな情報が見つかるのでちょっと今度これでアプリ作ってみようかと思ってます。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?