Jetpack Compose

【Android】Jetpack Compose 入門講座 第10回「画像とテキスト ③テキストの追加」

Sara

はじめに

今回は画像の下にテキストを追加してみましょう。

ここまでの復習も兼ねているので、思い出しながら進めてみてください。

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

テキストの追加

Text 関数

まずは Text 関数を使って、画像の下にテキストを追加します。

6〜9行目のコードを追加します。

1@Composable
2fun AnimalListElement(modifier: Modifier = Modifier) {
3    Image(
4        /* 省略 */
5    )
6    Text(
7        text = "Dog",
8        modifier = modifier
9    )
10}

プレビュー画面はこのようになりました。

画像とテキストが重なっていますが、これを縦に並べるためにはどのようにすれば良いでしょうか?

少し考えてみてください。

タテに並べるには Column レイアウトを使いましたね。

まずはご自身でコードを書いてみてください。

Column レイアウト

Column レイアウトで囲みたいコードを選択した状態にして、黄色い豆電球をクリック → Surround with widget を選択します。

Surround with Column を選択します。

画像とテキストが縦並びになりました。

レイアウトの調整

padding の追加

4行目のコードを追加して Column 内に余白を追加します。

1@Composable
2fun AnimalListElement(modifier: Modifier = Modifier) {
3    Column(
4        modifier = modifier.padding(8.dp)
5    ) {
6        Image(

画像とテキストそれぞれに padding を付けるのではなく、このように一括で付けると少ないコードで済みます。

中央で揃える

画像とテキストを水平方向中央に配置します。

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

1@Composable
2fun AnimalListElement(modifier: Modifier = Modifier) {
3    Column(
4        horizontalAlignment = Alignment.CenterHorizontally,
5        modifier = modifier.padding(8.dp)
6    ) {
7        Image(

プレビューをみると中央に配置されています。

画像とテキストの余白

画像とテキストの間にも余白を追加しますが、今回はテキストの上部にのみ padding を追加します。

11行目にコードを追加します。

1@Composable
2fun AnimalListElement(modifier: Modifier = Modifier) {
3    Column(
4        /* 省略 */
5    ) {
6        Image(
7            /* 省略 */
8        )
9        Text(
10            text = "Dog",
11            modifier = modifier.padding(top = 4.dp)
12        )
13    }
14}

top = 4.dp とすることで上部だけに padding を付けることができます。

他にも start(左)/ end(右)/ bottom(下)を指定できます。

次に行うこと

このあとは動物の画像を複数並べるレイアウトを作っていくので、不要なコードを削除してコードを整理しておきましょう。

知っておくと少し便利な機能も紹介します。

第11回「コードに整理」に進む

ここまでのコード

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )

                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

@Composable
fun AnimalListElement(modifier: Modifier = Modifier) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.padding(8.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.dog),
            contentDescription = "Dog",
            contentScale = ContentScale.Crop,
            modifier = modifier
                .size(80.dp)
                .clip(CircleShape)
        )
        Text(
            text = "Dog",
            modifier = modifier.padding(top = 4.dp)
        )
    }
}

@Preview
@Composable
private fun AnimalListElementPreview() {
    MyApplicationTheme {
        AnimalListElement()
    }
}

講座の最新情報はこちら

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