🕌

@Composableとは？

JboyHashimoto

2023/08/19に公開

Kotlin

Jetpack Compose

tech

Overview

公式からの引用
Compose アプリはコンポーズ可能な関数で構成されます。これらは単に @Composable でマークされた通常の関数であり、他のコンポーズ可能な関数を呼び出すことができます。新しい UI コンポーネントを作成するために必要なのは関数のみです。アノテーションにより、特別なサポートを関数に追加するよう Compose に指示し、時間の経過に伴う UI の更新や保守を行います。Compose では、コードを小さなチャンクに分割して構造化できます。コンポーズ可能な関数は、簡潔に「コンポーザブル」と呼ばれることもあります。

再利用可能な小さいコンポーザブルを作成すると、アプリで使用する UI 要素のライブラリを簡単に構築できます。UI 要素では、それぞれで画面の一部を処理し、個別に編集することもできます。

summary

コンポーズ可能な関数とは、@Composable アノテーションが付いている通常の関数です。これにより、関数は内部で他の @Composable 関数を呼び出すことができます。Greeting 関数が @Composable とマークされている例を次に示します。この関数では UI 階層の一部が生成され、指定された入力（String）がその UI 階層で表示されます。Text は、ライブラリによって提供されるコンポーズ可能な関数です。

わかりやすくいうと、UIを作る関数ですね。

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

他のファイルに、@Composable 関数を定義して呼び出して使うこともできます。
ColoredBoxComposable.ktというファイルを作りカラーボックスと作ってみましょう。
色は赤色で、with150px, height150pxのオブジェクトですね。

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment

@Composable
fun CenteredColoredBox() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .size(150.dp)
                .background(Color.Red)
        )
    }
}

別ファイルで作った関数をMainActivity.kt呼び出せば、画面に赤色の箱を表示することができます。

package com.example.basiccodelab

import CenteredColoredBox
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.basiccodelab.ui.theme.BasicCodelabTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicCodelabTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CenteredColoredBox()
                }
            }
        }
    }
}

thoughts

今回は、@Composable 関数について深掘りしてみました。
わかりやすく説明すると、UIを作ってれる関数ですね。プロジェクトを新規で作った時だと、Textを表示しています。
コードを書いてみた感想だと、コンポーネントを作っている感じでした。XMLでUIを作るよりは理解しやすく開発体験が良かったです。

Jboy王国メディアPublication

これは、Jboy王国公式のZennアカウントです。

Overview

summary

thoughts

Discussion