Jetpack Compose

【Android】Jetpack Compose 入門講座 第6回「Columnレイアウト内の配置」

Sara

はじめに

前回はレイアウト(Column と Row)を使ってテキストをタテ・ヨコに並べました。

今回はレイアウト内のテキストの配置を決めるパラメータを紹介します。

>> ここまでの記事はこちら

開始コード

以下のように、Column レイアウト内にテキストが3つある状態からスタートします。

また配置が分かりやすいようにプレビュー画面のサイズを追加しています。(25行目)

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Column {
4        Text(
5            text = "Hello",
6            modifier = modifier
7                .background(Color.Yellow)
8                .padding(12.dp)
9        )
10        Text(
11            text = "こんにちは",
12            modifier = modifier
13                .background(Color.Cyan)
14                .padding(12.dp)
15        )
16        Text(
17            text = "Hola",
18            modifier = modifier
19                .background(Color.Green)
20                .padding(12.dp)
21        )
22    }
23}
24
25@Preview(showBackground = true, widthDp = 240, heightDp = 240)
26@Composable
27fun GreetingPreview() {
28    MyApplicationTheme {
29        Greeting("Android")
30    }
31}

プレビューはこのようになっています。

VerticalArrangement:垂直方向の配置

中央に配置する

Column はレイアウト内の要素をタテ方向に並べるレイアウトでした。

今は左上を基準に並んでいるので中央(センター)になるようにパラメータを追加します。

3行目の Column の後ろに () を追加して、4行目のパラメータを追加します。

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Column(
4        verticalArrangement = Arrangement.Center
5    ) {
6        Text(
7            text = "Hello",
8            /* 省略 */

3つのテキストが垂直方向中央に配置されました。

いろいろな値

Center 以外にも以下の値を使用することができます。

Arrangement.Top上揃え
Arrangement.Center中央揃え
Arrangement.Bottom下揃え
Arrangement.SpaceAround上下に余白をつける
Arrangement.SpaceBetween均等に配置する(最初と最後の要素に余白なし)
Arrangement.SpaceEvenly均等に配置する(最初と最後の要素に余白あり)
Arrangement.spacedBy(数値.dp)余白のサイズを指定

HorizontalAlignment:水平方向の配置

水平方向の配置は HorizontalAlignment パラメータを使って決めることができます。

4行目のコードを追加します。

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Column(
4        horizontalAlignment = Alignment.CenterHorizontally
5    ) {
6        Text(
7            text = "Hello",
8            /* 省略 */

ここでは中央に配置しましたが、他にも Start / End を指定できます。

垂直と水平方向を指定する

垂直方向と水平方向の両方のパラメータを使用することもできます。

4行目で垂直方向は均等に、5行目で水平方向は中央に配置しています。

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Column(
4        verticalArrangement = Arrangement.SpaceBetween,
5        horizontalAlignment = Alignment.CenterHorizontally
6    ) {
7        Text(
8            text = "Hello",
9            /* 省略 */

プレビューはこのようになります。

次に行うこと

次回は同じように Row レイアウトの配置について紹介します。

第7回「Row レイアウト内の配置」に進む

講座の最新情報はこちら

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました