[Jetpack Compose] 今の時点でCompose利用する方法。

対象

• Composeを早く使いたい方

Jetpack

Jetpackのライブラリーが含めているもの。

中にComposeがみえますね。

Compose

composeは形状とデータの依存関係を記述するコンポーズ可能な関数を使用して、UI をプログラムで定義します。
先週ComposeはAlphaバージョンになりました。

• https://android-developers.googlあもeblog.com/2020/08/announcing-jetpack-compose-alpha.html

Download

今はAndroid　StudioのStableバージョンでは利用できません。
Canaryバージョンの設置が必要です。

• https://developer.android.com/studio/preview#

• Download 4.2をクリック。
  

• Zip -> Unzipしましょう。

• Bin

• Studio64.exe

Composeが公式パージョンになると、後はStableチャンネルでも利用できると思います。

基本サンプルを作り方。

• File -> New -> New Project

• Empty Compose Activity

• Nextをクリック。
• あとはFinishをクリックします。

boilerplate Code

package com.dreamwalker.myapplication

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.setContent
import androidx.ui.tooling.preview.Preview
import com.dreamwalker.myapplication.ui.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

Preview機能。