Zenn
🐡

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

に公開
Android
Kotlin
初心者
Android Studio
Jetpack Compose
tech

新規プロジェクト作成

とりま、新しいプロジェクトを作らないと話が始まらないです。
プロジェクトを新規作成しましょう。
　

ファイルメニューがないんだが！？という方（いるかどうかはわかりませんが）
画面左上のアンドロイドマークの横の4本線をクリックしましょう。
メニュー出てきます✋

Phone and Tabletの中にある、Empty Activityを選択したら、Nextボタンクリック

Nameの欄にアプリの名前BusinessCardを付けて、Finishボタンをクリック
アプリの名前はMeishiとかでもいいんだけど、日本語をローマ字表記すると、スペル間違ってない？的な波線が出て気持ち悪いので、英語表記で。。。
他の部分はデフォルトでOKです。

Finishボタンを押すとしばらくしたのち、プロジェクトが作成されます。
初めてAndroidStudioを使う方はめちゃくちゃ時間がかかるかもしれないです。

プロジェクトが正しく作成されると、こんな感じの画面になります。

プレビューモードにしてみる

画面右上にある3つのアイコンのうち、真ん中の「Split」アイコンをクリックするとプレビューを確認することができます。
①フォルダやファイルがあるところ　②コードを書くところ　③プレビュー
プレビュー画面にワーニングが表示された場合は画面の青いリンクをクリックしてみましょう！

プレビューがこんな感じで表示されていればOK。

自分の名前を表示させる

現在のプレビューはHellow Andoroidです。
ここを自分の名前にしますね。
AndroidStudioは新規プロジェクトを作成するときに、自動的にMainActivity.ktというファイルを作って、デフォルトのコードを書いてくれます。
MainActivityにはクラス（class）が１つと、関数（fun）が２つあります。
一番下のGreetingPreviews()という関数が、右側に表示されているプレビューに反映されています。

では、一番下のGreetingPreview()関数を以下の通り自分の名前に変更してみます。

MeinActivity.kt
//省略
@Preview(showBackground = true)  //プレビュー欄に表示するよ！という意味
@Composable　　　　　　　　　　　　//アプリに表示するための部品だよ！という意味
fun GreetingPreview() {　　　　　//関数の名前
    BusinessCardTheme {　　　　　//このアプリ専用のテーマ（今は気にしない）
        Greeting("涼風るるりこ") //ここに自分の名前を入れる
    }
}

プレビューが以下のように変更しました。

Helloは入力していないのに、「Hello 涼風るるりこ!」と表示されましたね！
これはGreetingPreview関数が、すぐ上の関数Greeting(name: String, modifier: Modifier = Modifier)を呼び出しているからです。
Greeting関数のかっこの中にある'name'には「涼風るるりこ」という文字が渡されます。
Greeting関数の中にはTextを表示するよう設定があり、テキストはHello ${name}です。
nameには「涼風るるりこ」が入っているので、Hello 涼風るるりこと表示されるんです。

仕組みがなんとなくわかったところで、Greeting関数からかっこの中のnameを消します！
3つエラーが出ました。

エラーの部分を消して修正します。
以下コードは修正部分を緑色で表示してあります。
プレビューは「名前：　涼風　るるりこ」に変わりましたね！

MainActivity.kt
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            BusinessCardTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+                    Greeting(
+                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(modifier: Modifier = Modifier) {
    Text(
+        text = "名前：　涼風　るるりこ",   //名前をこちらに設定
        modifier = modifier
    )
}

@Preview(showBackground = true)     //プレビュー欄に表示するよ！という意味
@Composable                         //アプリに表示するための部品だよ！という意味
fun GreetingPreview() {             //関数の名前
    BusinessCardTheme {             //このアプリ専用のテーマ（今は気にしない）
+        Greeting()  //ここに設定した名前は消す
    }
}

エミュレータを動かす

実際にスマホではどんな表示になるのか、エミュレータで見てみましょう。
画面左上の4本線をクリックすると、メニューがでてきます。

Tools＞Device Managerを選択

Device Managerが表示されるので、＋ボタンをクリック、Create Virtual Deviceをクリック

Phoneを選択し、表示されたスマホの中から、適当に好きなものを選択し「Next」ボタンをクリック

APIの下に複数の選択肢がある場合は、「★」がついているものを選択し、「Fnish」ボタンをクリック

該当するシステムイメージがまだダウンロードされていない場合は、ダウンロードするかどうかを確認するメッセージが表示されるので、「Yes」をクリック。
システムイメージはサイズが大きいのでダウンロードに時間がかかります！！！！

追加したイメージは画面上部にあるリストから選択できるようになります。
イメージを選択したら、RunAppアイコンをクリック！！！！
（新しいアプリを起動するときは時間がかかります）

起動すると。。。。名前ちっさｗｗｗ

名前がめっちゃ小さく表示されているだけなのですが、一応アプリができたということで💦

▽次の記事はこちら
https://zenn.dev/rucco/articles/e92f6a877efc59

Discussion