Androidノート-Jetpack Compose初接触

最近突然この新しいものを見ました.Googleが19年のIO大会で発表した新しいUI構築ツールバンクです.この数日間退屈して新しいプロジェクトを作ってみました.このツールバンクを紹介してみました.まず私の個人的な感想を教えてください.開発者はxmlにインターフェイスを描く必要がないです.これは将来UIを構築するための主流の方法かもしれません.これからは主に本人が初めてこのツールライブラリに接触したいくつかの実践を記録します.flunterを知らない友達にとっては、これから説明する内容がちょっと分かりにくいかもしれません.flunterを知ることができます.この倉庫に興味がある方は直接ここをクリックして公式サイトで調べてください.先に説明したいのは、このツールはAndroid studio 4.0のプレビュー版で、あなたが作ったUIをプレビューできるということです.公式もこのバージョンでこそ、compose開発の最高の体験ができると説明しています.このバージョンでないと、UIのプレビューができなくなります.
インポート
Android studio 4.0のプレビュー版では、新しいプロジェクトの時に直接Composse Activityを作成できます.私と同じようにこのバージョンを使っていないAndroid studioの友達は、moduleのbuild.gradleに配置しました.

android{
    defaultConfig {
        .....
    }
    buildFeatures {
        compose true
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerExtensionVersion "0.1.0-dev09"
    }
}

次に依存をインポートします

    implementation 'androidx.ui:ui-framework:0.1.0-dev10'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev10'
    implementation 'androidx.ui:ui-layout:0.1.0-dev10'
    implementation 'androidx.ui:ui-material:0.1.0-dev10'

ここで今この文章を書いている時にリリースされた最新バージョンは、現在の最新バージョンを知っているなら、公式サイトで見てください.
ルートディレクトリの下のbuild.gradleに書き込みます.

allprojects {
    repositories {
        maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
    }
}

これは導入したとしてもいいです.
スタートを試す
直接コードを入れる

class MainActivity : AppCompatActivity(){
	 override fun onCreate(savedInstanceState: Bundle?){
     	super.onCreate(savedInstanceState)
     	setContent {
            Text("hello")
        }
     }
}

間違っていません.setContintViewメソッドをsetContintent()という拡張関数で代用しました.あとはコントロールを中で宣言するだけでいいです.中の基本的なコントロールの名前はfluterと同じです.例えば、Text、Colum、Rowなど、もちろん部分だけです.もう一部のコントロールの名前は同じではありません.例えば、クリックしたコントロールはflunterの中にGesture Detector、InkWellなどがあります.ComposeでClicableを使いました.

setContent {
	Clickable(
                    modifier = Modifier.padding(top = 10.dp),
                    onClick = {
                        //    
                    },
                    children = {
                        ...
                    }
                )
}

また、Composeは、関数構造UIを使用することをサポートしています.例えば、以下の2つの書き方は共通の書き方です.

setContent {
	Column {
		Text("Compose   ",
                style = MaterialTheme.typography.h5)
                Clickable(
                    modifier = Modifier.padding(top = 10.dp),
                    onClick = {
                        Toast.makeText(this@MainActivity,"click",Toast.LENGTH_SHORT).show()
                    },
                    children = {
                        Text(
                            ...
                        )
                    }
                )
	}
}

書き方二:

setContent {
	 Column{
       	initView()
	 }
}

.....

    @Composable
    fun initView() {
        Text("Compose   ",
            style = MaterialTheme.typography.h5)
        Clickable(
            modifier = Modifier.padding(top = 10.dp),
            onClick = {
                Toast.makeText(this@MainActivity,"click",Toast.LENGTH_SHORT).show()
            },
            children = {
                Text(
                    ....
                )
            }
        )
    }

@Compsableの注釈を使えば、この関数をCompose関数にすることができます.この書き方は同じエリアに計画されているコントロールを単独で抽出して一つの関数に置くことができます.論理はもっとはっきりしています.
では、UIはどうやって更新しますか?
flunterを知っている友達はflunterの中でUIを更新するのはset Stateを呼べばいいと知っていますが、CompposeはどうやってUIを更新しますか?最初は少しぼんやりしていましたが、探してみたらこの操作が分かりました.

    @Model
    class MainModel {
        var count = 0
        var check = false
        var tableData = arrayListOf<String>("good","yes")
    }

クラスに@Modelコメントを使って、このクラスの値を変更すると、UIが更新されます.

class MainActivity : AppCompatActivity() {
	private val model : MainModel by lazy(::MainModel)
	override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
	    setContent{
           Clickable(
            modifier = Modifier.padding(top = 10.dp),
            onClick = {
                Toast.makeText(this@MainActivity,"click",Toast.LENGTH_SHORT).show()
                model.count ++
            },
            children = {
                Text(
                    text = if (model.count == 0) {
                        "    "
                    }else{
                        "    ${model.count}"
                    }
                )
            }
        )
		}
	}
	@Model
    class MainModel {
        var count = 0
    }
}

では、リストは
次のComposeが提供しているコントロールを見たら、ListViewやRecyclerViewと似たようなコントロールがなく、flunterのようなListコントロールもないです.Composeのコントロールには、このような二つのコントロールがあります.

setContent {
            Column (
                modifier = Modifier.padding(10.dp)
            ) {
                VerticalScroller(modifier = Modifier.fillMaxWidth().fillMaxHeight()) {
                    Column {
                        for (item in model.tableData) {
                            Card {
                                Text(item)
                            }
                        }
                    }
                }
            }
        }

このmodel.table Dataは私が注釈したModel類の中で声明した文字列配列です.このようにすれば、この配列を添削すれば、このColumはlistのようになります.
まずはこれまでにしましょう
これは比較的新しい倉庫で、中のコントロールも多くないです.このようなUIの構築はflunterに接触したことがない友達には不慣れかもしれませんが、個人的には試してみる価値があると思います.