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

posted at

updated at

Organization

Jetpack Compose 勉強記録その1

今回からJetpack Composeを触っていきたいと思います。
Composeを使用するプロジェクトが増えてきそうなので、学習していこうと思います。

インプットするだけだと、やっただけの勉強になりそうなので、自分なりの勉強した内容を記録として、アウトプットするために、こちらに残していきます。

今回の内容

初回なので、こちらのチュートリアルをやってみようと思います。

テキストを表示させる

MainActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello world!")
        }
    }

setContentブロックでコンポーズのレイアウトを定義するみたいです。
テキストはText(text = "Hello world!")これだけでHello world!が画面上に出てきました。

テキストを表示の関数を作ると良いみたいです。

MainActivity.kt
@Composable
fun HelloText(name: String) {
    Text(text = "Hello $name!")
}

使う側はこうなります。

MainActivity.kt
setContent {
  HelloText("world")
}

テキストを表示することがこれでできました。

レイアウトを設定する

垂直方向にテキストを表示する方法

MainActivity.kt
@Composable
fun HelloText(name: String, body: String) {
    Column {
        Text(text = name)
        Text(text = body)
    }
}

Columnという関数を仕様することで、垂直方向に表示する事ができるみたいです。

使う側はこうなります。

MainActivity.kt
setContent {
  HelloText("Android", "Compose")
}

次に垂直、水平両方利用したレイアウトを作成してみます。

MainActivity.kt
@Composable
fun CardItem(name: String, body: String) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.ic_launcher_background),
            contentDescription = "picture",
            modifier = Modifier
                .size(50.dp)
                .clip(CircleShape)
        )
        Spacer(modifier = Modifier.width(16.dp))

        Column {
            Text(text = name)
            Spacer(modifier = Modifier.height(12.dp))
            Text(text = body)
        }
    }
}

使う側はこうなります。

MainActivity.kt
setContent {
  CardItem("Android", "Compose")
}

Rowを使うと水平方向に表示する事ができるみたいです。

なのでImageの画像の右側にColumnなので、垂直方向に表示する2つのテキストができます。

レイアウトの装飾はModifierを使用するみたいです。

xmlだとマージンで設定したいたものはSpacerを使うことになるのでしょうかね?

今回はここまでにしようと思います。

次回はチュートリアルの続きをやっていきます。

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?