📖

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

2025/04/06に公開

▽前回の記事はこちら

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

新しい関数を作る

前回せっかく途中までコーディングしましたが、以下の図を参考に削除します！

MainActivityクラスの下に、新しい関数を作っていきます。

MainActivity

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Text(text="涼風　るるりこ")
}

@Composableは下の関数は画面表示の部品！と宣言しているようなものと考えてください。
アットマーク付きの黄色い文字を「アノテーション」と呼んでいます。
funは関数という意味で、その隣に名前がきます。
かっこの中にmodifierという部品を飾り付けするためのプロパティを入れておきます。
もう、おまじないのように@Composableがくっついた関数を作るときは、かっこの中にmodifier: Modifier = Modifierと入れるものと覚えておきます。
Modifierについては、後ほど説明します。
BuisinessCardAppの中に自分の名前を表示するための、Text関数を設定します。

BuisinessCardAppをプレビューする

BuisinessCardAppがどんな感じでデバイスに表示するかを確認するため、もう1つ新しいコンポーズ関数を作ります。

MainActivity

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

@Previewは下に設定した関数をプレビューモードの画面に表示させるよ！という宣言です。
showBackground = trueとすることで背景つきにしてます。
ここの値をfalseに変更すると、背景がなくなって、黒の文字で書いた名前が見えづらくなります＾＾；
ちなみに、trueは「はい」、falseは「いいえ」のようなものです。
BusinessCardThemeはこのアプリ専用のテーマなので、プレビューするときは設定しておきましょう。
これを設定しなくても死なないですが、実機やエミュレータでアプリを実行したときに、なんか違う！となります。
最後に、プレビューするもの＝BusinessCardApp()を設定します。

複数行の文字列を設定する

次に、BusinessCardAppに会社名を追加していきましょう！
イメージはこうです。

テキストを3つ並べました！

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Text(text="株式会社")
    Text(text="テックるっこ")
    Text(text="涼風　るるりこ")
}

プレビューを確認すると。。。。
重なってます😱

何も指定しないと、左上を起点にText達が配置されるんですね。
きちんと縦に並ぶよう修正していきます。
3行のテキストを選択し、表示された電球マークをクリック→Surround with widgetをクリック

Surround with Columnを選択

自動的にColumnが挿入され、コードは以下のようになりました。
Columnは自分の中にいる部品たち（今回はTextたち）を縦に並べる機能を持っています。
もし、Columnを入れたときにColumnの文字が赤くなったら、Columnをインポートする必要があるので、「Alt＋Enter」キーを押してインポートするか、自分で手入力してください。

自動的にインポートを追加する機能について

以下スクラップを参考にしてください😊😊
ただし、自動インポートは複数の候補があると自分でどれかを選択しなければならないので、万能ではないです。

import androidx.compose.foundation.layout.Column //手入力する場合はこれを入力

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
+    Column {
        Text(text = "株式会社")
        Text(text = "テックるっこ")
        Text(text = "涼風　るるりこ")
+    }
}

プレビューもこんな感じになりました！

他の文字も足していきます。
住所、メール、電話番号はアイコン付きなので、後ほど設定します。

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Column {
        Text(text = "株式会社")
        Text(text = "テックるっこ")
+        Text(text = "android team")
        Text(text = "涼風　るるりこ")
+        Text(text = "suzukaze rururiko")
    }
}

プレビューすると、

フォントを変更する

だいぶよくなりました。
次はサイズや太さ種類を変更していきます。
()の中のプロパティは必ずカンマ「,」で区切ります。

@Composable
fun BusinessCardApp(modifier: Modifier = Modifier) {
    Column {
        Text(text = "株式会社")
        Text(
            text = "テックるっこ",
+            fontSize = 30.sp
        )
        Text(
            text = "android team",
+            fontFamily = FontFamily.Monospace
        )
        Text(
            text = "涼風　るるりこ",
+            fontSize = 48.sp,
+            fontWeight = FontWeight.Bold,
        )
        Text(
            text = "suzukaze rururiko",
+            fontSize = 24.sp,
+            fontWeight = FontWeight.Bold,
        )
    }
}

FontFamilyは選択肢が複数あり、自動インポートできないので、自分でインポートします。
インポートするものは下図を参考にしてください。

ここまでを実行する

さて、実際にスマホではどのように表示されるのか、エミュレータで確認してみましょう。
「Shift＋F10」キーか、RunApp（横向き▽）で実行します。

画面には何も表示されてないですか？

今まで見ていたのはプレビューでした。
実際のスマホ等はMainActivityを実行します。
MainActivityを確認してみるとー。

MainActivityにBusinessCardApp()を入れなければ、スマホには何も表示されません。
コードを以下の通り修正してから、再度実行してみます。

MainActivity.kt

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

結果はこちら

スマホに文字は表示されましたが、位置が変ですね。
次回は、全体の配置を修正していきます。
それでは！！！！