🌟

【超初心者向け】名刺を作る３

2025/04/07に公開

今までの記事はこちら

今回作る名刺のイメージはこちら

Columとは？

前回、TextのまわりをColumnで囲みました。
このColumnの機能でTextたちが縦に並んだ、というところまで説明しました。
Columnは何も設定しなければ、自分の中にある部品の大きさに合わせて膨らむ風船のような感じです。
図にすると、ピンクの部分が今のColumnになります。

Columnの設定を変えて、こんな感じになるよう修正していきます。

Columnにかっこをつけて、modifierを設定します。
modifierはその部品の装飾を担当するプロパティです。
大きさや、色、スペースなどいろんな装飾を施すことができる、すごいやつです。

MainActivity

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Column(
+        modifier = modifier
+            .padding(start = 16.dp,top = 100.dp,end = 16.dp,bottom = 16.dp)
+            .background(color=Color.Magenta)
+            .fillMaxSize(),
    ) {
        Text(text = "株式会社")
        //以下省略
    }
}

paddingで余白を設定できます。startが左、topは上、endは右、bottomは下です。
今回は上に大きく余白をとるためtopだけ100.dpを設定しています。
dpは画面の解像度に依存しないピクセル単位です。
解像度が違うデバイスでも、同じようなサイズで表示される便利な単位、と思っておけばOKです。

backgroundにショッキングピンクを設定しました💦
これはColumnの範囲をわかりやすくするため設定してます。
後で消します😅
fillMaxSizeは画面いっぱいに広げる設定です。
先に余白を設定したので、余白以外でいっぱいに広がってます。

Colorのインポートどれにすれば？となったら

これ設定してください。
import androidx.compose.ui.graphics.Color

Textにも余白を設定

Textにもmodifierを設定できます。
ということは、Textに余白を作ったり、背景色を変えたり、大きさを変えたりができるわけです。
会社名の「テックるっこ」のTextにmodifierを設定して左側に余白を作りましょう。
注意したいのは、Columnの場合modifier = modifierでしたが、Textの方はmodifier=Modifierとなっていることです。
理由はどこかで説明したいと思います！

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Column(
        //省略
    ) {
        Text(text = "株式会社")
        Text(
            text = "テックるっこ",
            fontSize = 30.sp,
+            modifier=Modifier.padding(start=16.dp),　//左に余白を入れる
        )
        //省略
    }
}

スペースを設定

次は「テックるっこ」と「android team」の間にスペースを作ります。
Spacerという関数を使います。
名前の通りスペースを開けるための関数で、Modifierのheight（高さ）を使って縦方向のスペースを開けていきます。

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Column(
        //省略
    ) {
        Text(text = "株式会社")
        Text(
            text = "テックるっこ",
            fontSize = 30.sp,
            modifier=Modifier.padding(start=16.dp),
        )
+        Spacer(modifier = Modifier.height(120.dp))  //たっぷりスペースをあける
        Text(
            text = "android team",
            fontFamily = FontFamily.Monospace
        )
        //省略
    }
}

氏名をセンタリングする

プレビュー欄の氏名のあたりにマウスを乗せると、各Textの大きさや位置がわかります。

Textをセンタリングする方法は複数ありますが、今回はTextの幅をColumnの幅に合わせたうえで、センタリングする方法にしてみようと思います。
今回もmodifierを使って、fillMaxWidth()で横幅いっぱいにTextを広げ、TextAlign.Centerでセンタリングします。

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Column(
        //省略
    ) {
        //省略
        Text(
            text = "涼風　るるりこ",
            fontSize = 48.sp,
            fontWeight = FontWeight.Bold,
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center,
        )
        Text(
            text = "suzukaze rururiko",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center,
        )
    }
}

だいぶいい感じになってきました。
次は、住所・メール・電話番号の部分を作っていきます！

連絡先用にContactAddress関数を新規作成

BusinessCard関数の下に新しく連絡先用の関数contactAddressを作っていきます。
画面に表示させるので、@Composableを頭につけます。
また、この関数をプレビューするために@Previewをつけた関数も作ります。
ここまでは今まで作ったものと、あまり変わらないので復習という感じですね😊

@Composable
fun ContactAddress(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .background(color=Color.Yellow) //一旦黄色にしておく後で消す
            .fillMaxWidth()                 //横幅いっぱいに広げる
            .padding(16.dp)                 //余白
    ) {
        Text(text = "愛知県名古屋市港区某99999")
        Text(text = "teck_rucco@xxxxx.xx.jp")
        Text(text = "090-9999-9999")
    }
}

@Preview(showBackground = true)
@Composable
fun ContactAddressPreview() {
    BusinessCardTheme {
        ContactAddress()
    }
}

連絡先の前にアイコンをつける

まずは、Icon関数を使って住所用のアイコンをつけてみましょう！

Icon関数のインポート

import androidx.compose.material3.Icon

@Composable
fun ContactAddress(modifier: Modifier = Modifier) {
    Column(
        //省略
    ) {
+        Icon(imageVector = Icons.Filled.Place, contentDescription="住所")
        Text(text = "愛知県名古屋市港区某99999")
        Text(text = "teck_rucco@xxxxx.xx.jp")
        Text(text = "090-9999-9999")
    }
}

Icon関数はimageVectorとcontentDescriptionの2種類のプロパティを設定しないと、エラーになります。
imageVector: アイコン種類
contentDescription:　アイコンの説明（アクセシビリティ対応）
プレビューすると住所アイコンも縦に並んじゃってますね😱

住所アイコンの後ろに住所を並べるには、Row関数を使います。
Columnは自分の中にある部品を縦に並べましたが、Rowは横に並べてくれます。
では、住所アイコンと、住所のテキストをRow{}で囲いましょう！

@Composable
fun ContactAddress(modifier: Modifier = Modifier) {
    Column(
        //省略
    ) {
+        Row {
            Icon(imageVector = Icons.Filled.Place, contentDescription="住所")
            Text(text = "愛知県名古屋市港区某99999")
        }
        Text(text = "teck_rucco@xxxxx.xx.jp")
        Text(text = "090-9999-9999")
    }
}

住所アイコンの後ろに住所が表示されるようになりました！

続いて、メールアイコンと電話アイコンを設定していきましょう～。
ついでに余白を設定して、文字列と文字列の間に余裕を持たせます。

@Composable
fun ContactAddress(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .background(color = Color.Yellow) //一旦黄色にしておく後で消す
            .fillMaxWidth()                 //横幅いっぱいに広げる
            .padding(16.dp)                 //余白
    ) {
        Row(modifier = Modifier.padding(bottom = 8.dp)) {
            Icon(imageVector = Icons.Filled.Place, contentDescription="住所")
            Text(text = "愛知県名古屋市港区某99999",modifier=Modifier.padding(start=8.dp))
        }

        Row(modifier = Modifier.padding(bottom = 8.dp)) {
            Icon(imageVector = Icons.Filled.Email, contentDescription = "メール")
            Text(text = "teck_rucco@xxxxx.xx.jp",modifier=Modifier.padding(start=8.dp))
        }
        Row(modifier = Modifier.padding(bottom = 8.dp)) {
            Icon(imageVector = Icons.Filled.Call, contentDescription = "電話番号")
            Text(text = "090-9999-9999",modifier=Modifier.padding(start=8.dp))
        }
    }
}

結果、こんな感じになりました。

ContactAddress関数を合体！！

BusinessCardAppのText（ローマ字氏名）の下に、120.dpのスペースとContactAddress関数を入れます。

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Column(
        //省略
    ) {
        //省略
        Text(
            text = "suzukaze rururiko",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center,
        )
+        Spacer(modifier = Modifier.height(120.dp))
+        ContactAddress()
    }
}

プレビューはこんな感じですね。

目印のためのつけたピンクと黄色の背景色は削除します。
また、文字の大きさなど気になる部分があれば修正します。

背景用の画像を用意

最後に、背景を設定していきます！
背景用の画像はよければ、GitHubから持って行ってください。

背景用の画像はこちら

背景画像は以下イメージを参考に、drawableフォルダにドラッグ＆ドロップで入れます。
drawableフォルダに入れてもいいファイルはpngとかxmlも含めた画像ファイルです。
ファイルに大文字を使うとエラーになるので注意です！

背景を設定

背景は今まで設定してきた文字列の最背面に重なるように置くので、Columnの外の一番上にImage関数を配置します。
（Columnの中に設定すると縦に並んじゃいます＾＾；）
Image関数は先に設定したIcon関数にちょっと似てます。
Painter（画像を指定）とcontentDescriptionの2種類は設定が必須です。

Imageのインポート

import androidx.compose.foundation.Image

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
+    Image(
+        painter = painterResource(id = R.drawable.background),  //さっき入れた画像を指定
+        contentDescription = "背景",
+        modifier=Modifier.fillMaxSize(),        //Imageを最大限に広げる
+        contentScale = ContentScale.Crop,       //画像を引き延ばしてImageの大きさに合わせる
+    )
    Column(
        modifier = modifier
            .padding(start = 16.dp, top = 120.dp, end = 16.dp, bottom = 16.dp)
            .fillMaxSize(),
    ) {
        //省略
    }
}

実行してみます。
相変わらず、字、ちっさｗｗｗ
でも、一応完成ということで😁

MainActivity.ktの全文

GitHubにソースが置いてありますので、ご参考になれば。。。

MainActivity.kt

package com.rururi.businesscard

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.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Call
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Place
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.rururi.businesscard.ui.theme.BusinessCardTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            BusinessCardTheme {
                BusinessCardApp()   //これを追加
            }
        }
    }
}

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Image(
        painter = painterResource(id = R.drawable.background),  //さっき入れた画像を指定
        contentDescription = "背景",
        modifier=Modifier.fillMaxSize(),        //Imageを最大限に広げる
        contentScale = ContentScale.Crop,       //画像を引き延ばしてImageの大きさに合わせる
    )
    Column(
        modifier = modifier
            .padding(start = 16.dp, top = 120.dp, end = 16.dp, bottom = 16.dp)
            .fillMaxSize(),
    ) {
        Text(text = "株式会社")
        Text(
            text = "テックるっこ",
            fontSize = 30.sp,
            modifier=Modifier.padding(start=16.dp),
        )
        Spacer(modifier = Modifier.height(120.dp))  //たっぷりスペースをあける
        Text(
            text = "android team",
            fontFamily = FontFamily.Monospace
        )
        Text(
            text = "涼風　るるりこ",
            fontSize = 48.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center,
        )
        Text(
            text = "suzukaze rururiko",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center,
        )
        Spacer(modifier = Modifier.height(120.dp))
        ContactAddress()
    }
}

@Composable
fun ContactAddress(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
//            .background(color = Color.Yellow) //一旦黄色にしておく後で消す
            .fillMaxWidth()                 //横幅いっぱいに広げる
            .padding(16.dp)                 //余白
    ) {
        Row(modifier = Modifier.padding(bottom = 8.dp)) {
            Icon(imageVector = Icons.Filled.Place, contentDescription="住所")
            Text(text = "愛知県名古屋市港区某99999",modifier=Modifier.padding(start=8.dp))
        }

        Row(modifier = Modifier.padding(bottom = 8.dp)) {
            Icon(imageVector = Icons.Filled.Email, contentDescription = "メール")
            Text(text = "teck_rucco@xxxxx.xx.jp",modifier=Modifier.padding(start=8.dp))
        }
        Row(modifier = Modifier.padding(bottom = 8.dp)) {
            Icon(imageVector = Icons.Filled.Call, contentDescription = "電話番号")
            Text(text = "090-9999-9999",modifier=Modifier.padding(start=8.dp))
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ContactAddressPreview() {
    BusinessCardTheme {
        ContactAddress()
    }
}

@Preview(showBackground = true)
@Composable
fun BusinessCardPreview() {
    BusinessCardTheme {
        BusinessCardApp()
    }
}