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

## 対象
- Composeを早く使いたい方

## Jetpack

Jetpackのライブラリーが含めているもの。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/d787bb0b-7c58-ed57-28d4-78931fb3c09d.png)

中に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をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/fbb22d96-4d1d-c633-61ec-0421929cb966.png)

- Zip -> Unzipしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/bc20a274-40a6-1c1c-d7ce-22bc63e6d1a2.png)

- Bin
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/af018878-b9af-eec8-cdbb-d7e7ce6d85a3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/815f9cfd-72d4-e220-f959-74e9c17d58d1.png)

- Studio64.exe

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/26191c9e-b03c-7b50-b851-36cb5a0418ec.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/56488558-d5e6-ecb3-ca61-2dcedff0a764.png)

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

## 基本サンプルを作り方。

- File -> New -> New Project

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/3763180e-52d7-f1b7-1d21-7ccffdcb77c4.png)

- Empty Compose Activity 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/f141ed8a-0bcb-d1f5-fb13-84f080c059dc.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/cbd4cd4d-04ba-a53b-16ce-150684822b09.png)

### boilerplate Code

```kotlin
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機能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/36ff0d26-e610-e863-aec8-09050939cdda.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/bf2004c4-33fd-9035-6cd4-367f63615acf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/23ed1a38-4520-838a-e8cc-7b80017466b0.png)