Jetpack Compose

【Android】Jetpack Compose 入門講座 第4回「Modifierパラメータ」

Sara

はじめに

今回は Hello Android! の背景色を変えて余白も追加してみましょう。

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

Modifierの使い方

背景色を変える

まずは背景色を変えてみましょう。

すでに用意されている modifier パラメータを使用します。

5行目のようにコードを変更します。

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Text(
4        text = "Hello $name!",
5        modifier = modifier.background(Color.Yellow)
6    )
7}

右側のプレビューが変わりましたか?

Modifier は修飾子といって、サイズ・配置・動作・ラベル・入力など幅広い設定に使われます。

レイアウトを作りながら覚えていく方が分かりやすいのでここでは簡単な説明にしますが「 @Composable が付いている関数は modifier パラメータを受け入れること」というルールがあります。

ですので Greeting 関数も modifier パラメータを受け取っています。

この modifier を使ってテキストの設定を書いていきます。

これから新しい Composable 関数も追加していきますが、modifier パラメータはコードを書くときに自動的に追加されます。現時点では「modifier パラメータには設定を書く」と考えておきましょう。

余白をつける

次にテキストの周りに余白をつけてみます。

5行目の最後にコードを追加します。

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Text(
4        text = "Hello $name!",
5        modifier = modifier.background(Color.Yellow).padding(48.dp)
6    )
7}

テキストの周りに余白がつきました。

ここでは padding(パディング)を使ってテキストの周りに 48.dp の余白を追加しました。

文字サイズの単位は .sp でしたが、余白には .dp を使います。

Modifierは順番に注意

「背景色 → 余白」の順番でコードを書きましたが「余白 → 背景色」の順番にするとどうなるでしょうか?

1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3    Text(
4        text = "Hello $name!",
5        modifier = modifier.padding(48.dp).background(Color.Yellow)
6    )
7}

背景色が全体に付かずに、文字の部分だけになってしまいました。

このように見た目が変わってしまうことがあるので、書く順番にも注意する必要があります。

順番を気にしなくて良い背景色の付け方も今後紹介します。

次に行うこと

次回は複数のテキストを並べてみましょう。

第5回「テキストを並べる」に進む

ここまでのコード

1package com.example.myapplication
2
3import android.os.Bundle
4import androidx.activity.ComponentActivity
5import androidx.activity.compose.setContent
6import androidx.activity.enableEdgeToEdge
7import androidx.compose.foundation.background
8import androidx.compose.foundation.layout.fillMaxSize
9import androidx.compose.foundation.layout.padding
10import androidx.compose.material3.Scaffold
11import androidx.compose.material3.Text
12import androidx.compose.runtime.Composable
13import androidx.compose.ui.Modifier
14import androidx.compose.ui.graphics.Color
15import androidx.compose.ui.tooling.preview.Preview
16import androidx.compose.ui.unit.dp
17import com.example.myapplication.ui.theme.MyApplicationTheme
18
19class MainActivity : ComponentActivity() {
20    override fun onCreate(savedInstanceState: Bundle?) {
21        super.onCreate(savedInstanceState)
22        enableEdgeToEdge()
23        setContent {
24            MyApplicationTheme {
25                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
26                    Greeting(
27                        name = "Android",
28                        modifier = Modifier.padding(innerPadding)
29                    )
30
31                }
32            }
33        }
34    }
35}
36
37@Composable
38fun Greeting(name: String, modifier: Modifier = Modifier) {
39    Text(
40        text = "Hello $name!",
41        modifier = modifier.background(Color.Yellow).padding(48.dp)
42    )
43}
44
45@Preview(showBackground = true)
46@Composable
47fun GreetingPreview() {
48    MyApplicationTheme {
49        Greeting("Android")
50    }
51}

講座の最新情報はこちら

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をコピーしました