🐷

【超初心者向け】お天気カード1

2025/04/10に公開

Android Studioを触るのは初めてという方へ

Android Studioを触るのは初めてという方は、こちらの記事がおすすめです。

この記事で覚えられること

画像を表示する方法
ボタンをクリックしたときのロジック作成

アプリイメージ

アプリの画面イメージはこんな感じです。
シンプルなので、画面はすぐに完成します👌

プロジェクトを新規作成する

「Alt＋\」キーでメニューを表示させ、File＞New＞NewProjectでNewProject画面を表示。
Empty Acticityを選択し、Next
Name欄にプロジェクト名を「weather」と入力し、Finish
→新規プロジェクトが作成されるまでおとなしく待つ！
プロジェクトが出来上がったら、念のためエミュレータか実機で実行する

プロジェクト新規作成について詳しく知りたい方

以下記事で詳細を説明しています。ご参考にしてくださいね👍

画面表示用の画像を用意

画面表示用の画像を７枚用意します。
画像のサンプルを用意しましたので、以下からダウンロードしてください。

お天気画像はこちら

画像はres＞drawableフォルダへドラッグ＆ドロップで入れます。

Refactorボタンをクリック。

drawableフォルダに入れた画像はファイルをダブルクリックで、画像の中身を確認できます。

新しいコンポーザブル関数（部品）を追加

プロジェクト作成時に自動的にシステムが作ったコードをがっつり削除します。
新規プロジェクトを作った時は、だいたいがっつり自動コードを削除という流れになります🫡

WeatherApp関数、HomeScreen関数、HomeScreenPreview関数を３つ作成
それぞれの役割
- WeatherApp・・・アプリの骨組み（レイアウトの基本的な枠組み、アプリの上部バーなど）
- HomeScreen・・・実際に画面表示するコンテンツを構築
- HomeScreenPreview・・・設定した関数のイメージを視覚的に表示

@Composable
fun WeatherApp() {
    HomeScreen()
}

@Composable
fun HomeScreen(modifier: Modifier = Modifier) { //引数にmodifierを設定
    
}

@Preview(showBackground = true) //プレビュー画面に表示
@Composable
fun TestAppPreview() {
    HomeScreen()                //プレビューしたい関数を呼び出す
}

関数の名前の付け方

Kotlinには暗黙の名前つけルールがあります。

関数・・・最初の単語は小文字で始まり、次の区切りとなる単語の1文字目は大文字にする。
（アンダーバーは通常の場合使いません）
→例えば、「print abc」という関数を作りたい場合、fun printAbc(){}のように記述します。
クラス・・・最初の1文字目は大文字ではじめ、次の区切りとなる単語の1文字目も大文字にする。
→class PrintAbc{}
コンポーザブル関数(@Composableがついた関数)は特別な関数なので、通常の関数とは異なり、最初の単語を大文字にします。
→@Composable
fun PrintAbc(){}

modifierについて

Modifierをもっと知りたい人は以下記事が参考になります！

MainActivityクラスにWeather関数への参照を追加
→アプリは実行するとまず、MainActivityのsetContentに設定してる関数を呼び出します。
　今回の場合は、WeatherApp()関数を呼び出します。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            WeatherTheme {
                WeatherApp()    //実行したい関数を呼び出す
            }
        }
    }
}

「Alt+Shift+右」キーでプレビューペインを表示させておきましょう。

HomeScreenに画像とボタンを追加

HomeScreen関数の中に画像「Image」とボタン「Button」を組み込んでいきます。

画像とボタンは縦に並んでいるので、Columnで縦に並べる必要があります。
Columnは画面いっぱいに広げるように設定しましょう。

HomeScreen

@Composable
fun HomeScreen(modifier: Modifier = Modifier) { //引数にmodifierを設定
    Column(
        modifier = modifier.fillMaxSize()
    ) {
        //ここにImageとButtonを追加
    }
}

次にColumnのラムダ{}の中に画像（Image）を配置します。
imageが赤くなったら、Alt+Enterキーでインポートしてください。
選択肢が複数出てきますので、以下を選択。

Imageの下にまだ赤い波線が表示されていると思います。
最低２つの引数が必要なので、設定していきます。
- painter:画像ファイルを指定。painterResource(id = R.drawable.tenki0)
  かっこの中はどの画像を使うか？を設定。
  画像ファイルの拡張子はつけない。
- contentDescription:画像の説明文（アクセシビリティ用）。今回はnullにします。
- かっこの中に複数の引数を設定するときは、必ず「,」で区切ります。

HomeScreen

@Composable
fun HomeScreen(modifier: Modifier = Modifier) { //引数にmodifierを設定
    Column(modifier = modifier.fillMaxSize())
    {
+        Image(
+            painter = painterResource(id = R.drawable.tenki0),
+            contentDescription = null,
+        )
    }
}

さらにImageの下にボタン（Button）を配置します。
ButtonもImage同様にインポートしていきます。
複数の選択肢がでてきますので、以下を選択してください。

まだButton()のかっこに赤い波線のエラーが表示されています。
onClickとcontentがない！と怒れている状況です。
- onClick:ボタンをクリックしたときの処理。
  　　あとで設定するので、今は空のラムダ{}を設定しておきます。
- content:ボタンに表示するもの。今回は「明日の天気は？」と表示させます。

HomeScreen

@Composable
fun HomeScreen(modifier: Modifier = Modifier) { //引数にmodifierを設定
    Column(modifier = modifier.fillMaxSize())
    {
        Image(
            painter = painterResource(id = R.drawable.tenki0),
            contentDescription = null,
        )
+        Button(
+            onClick = {}
+        ){
+            Text(text="明日の天気は？")
+        }
    }
}

ここまでの内容をプレビューで確認します。
（もし、プレビューが表示されていなければ「Ctlr+Shift+F5」キーを押します）
うん。なんか思ったのと違う＾＾；

見た目を整える

画像とボタンはセンタリングして、真ん中に来るようにしましょう。
画像もボタンも小さいので、もっと大きくします。

Columnが画面全体に広がっているので、Columnに水平方向に対してセンタリングの設定をすると、中に配置されているImageとButtonが真ん中にきます。
水平方向のセンタリング・・・horizontalAlignment = Alignment.CenterHorizontally
Imageの位置と大きさを調整します。
　上の余白・・・Modifier.padding(top = 120.dp)
　画像のサイズ・・・Modifier.size(360.dp)
　アスペクト比・・・Modifier.aspectRatio(1f)
Buttonの位置と大きさを調整します。
　上の余白・・・Modifier.padding(top = 100.dp)
サイズ・・・Modifier.size(width = 200.dp, height = 64.dp)
文字のサイズを調整します。
　フォントサイズ・・・fontSize = 20.sp

HomeScreen

@Composable
fun HomeScreen(modifier: Modifier = Modifier) { //引数にmodifierを設定
    Column(
        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Image(
            painter = painterResource(id = R.drawable.tenki0),
            contentDescription = null,
+            modifier = Modifier
+                .padding(top = 120.dp)
+                .size(360.dp)
+                .aspectRatio(1f)
        )
        Button(
            onClick = {},
+            modifier= Modifier
+                .padding(top = 100.dp)
+                .size(width = 200.dp, height = 64.dp)
        ){
+            Text(text="明日の天気は？",fontSize = 20.sp)
        }
    }
}

ここまでの状態で、一旦実行してみましょう。
こんな感じになりましたか？

次回は、ボタンを押したときの処理を追加していきます！

アプリイメージ

プロジェクトを新規作成する

画面表示用の画像を用意

新しいコンポーザブル関数（部品）を追加

HomeScreenに画像とボタンを追加

見た目を整える

Discussion