※本記事は2021年7月2日に更新しました。
『Android Studio ダウンロードできたけど、使い方がわからない』
『HELLO WORLDは画面表示できたけど、この後何すればいいの?』
そう思っている方いらっしゃいますよね。
今回は『HELLO WORLDの後はなにをすればいいか』について解説したいと思います。
AndroidStudioの実践的な使い方を解説するので初心者の方必見です!
前提として、今回の記事はAndroid Studio 4.2.1を対象に記載します。
使っている言語はJavaですが、Kotlinにも共通する内容を記載しますので、
最後まで読んでくださると嬉しいです。
また自分のAndroid Studioは日本語化しているのでご了承ください。
日本語化の方法はこちら

HELLO WORLD の後は何をすればいい?

HELLO WORLDを表示できた後は、それぞれのファイルが何を構成しているのかを理解しましょう。
どのファイルが何を構成しているかがわかれば応用してプログラムを作成することができます。
今回は代表的なファイルを3つ紹介します。
レイアウトファイル
まず最初に、レイアウトファイルを紹介します。
レイアウトファイルとは、画面を構成するための.xmlファイルです。
下の画像の赤枠にレイアウトファイルがあります。
(もし画像のようなファイル構成を表すウィンドウ(ツールウィンドウといいます)が表示されていない場合は、左上のプロジェクトを押せば出てきます。)

このように、resフォルダ→layout フォルダの中に保存されているファイルを『レイアウトファイル』と呼びます。
レイアウトファイルを開くと上の画像のようなウィンドウが開かれると思います。
画面真ん中の白と水色の画面が表示されている部分を『デザインエディタ』と呼びます。
デザインエディタにはAndroidアプリの実際のレイアウトが表示されています。
実際に触ってみる
では、レイアウトファイルを触ってみましょう。
画面真ん中上側のパレットの中にあるTextView をドラッグして、デザインエディタにドロップしてみてください。

すると、TextViewと書かれた文字が追加されたかと思います。
ただ、このままだとどこの位置にTextViewを置いたらいいのかプログラムが判断できません。
プログラムが判断できるようにするために縦横の拘束をかけます。
TextViewを置いた状態だと、上下左右に〇がついていると思います。
(もしついてなければ、一度テキストビューをクリックしてください)
上の丸をドラッグすると矢印が出てくるので、矢印の先をスマホ画面の上につけてください。
同様に、左の丸をドラッグし、矢印の先をスマホ画面の左につけてください。(下図参照)

すると、TextViewが画面左上に引き寄せられたかと思います。
TextViewが選択された状態だと、画面右側の属性欄にレイアウトが表示されていると思います。
レイアウトの上と左に数字を入力できるので、好きな数字を入力してみてください。
(下図)
TextViewが動くのが分かると思います。

ここまでできたら一度プログラムを実行してみましょう。
レイアウトファイルと同じ画面が、エミュレーターのスマホ画面に現れるはずです。

これが、画面に文字を追加する方法の一つです。
この様にレイアウトファイルではユーザーが直接触るレイアウトを作成、調整することができます。
今回はText Viewだけでしたが、ボタンやテキスト入力欄など、様々なものを追加作成することができます。
追加方法は同じなので、ぜひいろいろと触ってみてください。
文字列リソースファイル
次に紹介するのが文字列リソースファイル『string.xml』です。
その名の通り、スマホ画面に表示する文字列を管理するファイルです。
下の画像の赤枠に文字列リソースファイルがあります。

実際に触ってみる
レイアウトファイルで作ったプログラムのTextViewの文字を自分の名前に変えてみましょう。
まず、文字列リソースファイルを以下のように書き換えます。
<resources>
<string name="app_name">My Application</string>
<string name="textView">海岸 蒼</string>
</resources>
ここで追加したのは『<string name =”textView”>~』の部分です。
『<string name =”textView”>』は、『この文字列の名前は”textView”です。』という意味です。
『海岸 蒼』の部分が表示したい文字列となります。
ここは好きに変えてください。
ここまでできたら、一度レイアウトファイルへ移動しましょう。
先ほど追加したTextViewを選択すると、右下の属性欄にテキスト、という文字が表示されるはずです。

このテキスト欄に書かれている『TextView』を消して、『@string/textView』と入力してください。
すると、レイアウトの『TextView』 の文字列が『海岸 蒼』に変わったのが分かると思います。
この『@string/textView』はstring.xmlのtextViewという名前の文字列を参照してください、という意味です。
textView という名前の文字列は『海岸 蒼』という内容だったため、それが反映されたわけです。
ここまでできたらプログラムを実行してみましょう。
スマホ画面上でも入力した文字列が表示されたら成功です。
補足
テキスト欄に文字列を直接入力してもいいのですが、長い文字列を入力するときなど使い勝手が悪いため、通例としてstring.xmlに文字列を入力することになっています。
アクティビティファイル
最後に紹介するのがアクティビティファイルです。
スマホアプリの動作に関する情報をまとめたファイルがアクティビティファイルとなります。
アクティビティファイルは下の画像の赤枠のJavaファイルです。

このアクティビティファイルにJavaのコードを書きこむことで、
ボタンを押したときの動作を指示したり、画像を動的に動かしたりすることができます。
ボタンを押したときの動作についての解説記事はこちら。
まとめ

今回はAndroid Studio でHELLO WORLDが表示できた方向けに、
Android Studio の3つのファイルが何を構成しているのかを説明しました。
- レイアウトファイル
- 文字列リソースファイル
- アクティビティファイル
上記3つのファイルを組み合わせることでアプリを作成していきます。
文字列リソースファイルで文字列を用意し、
レイアウトファイルで画面レイアウトを作成し、
アクティビティファイルで動作を指示する、というのが基本的な作成の流れです。
今後本ブログにてより実践的な内容を紹介予定です。
Twitter等で更新のお知らせしますのでフォローいただけますと助かります。
初心者の方の助けになれば幸いです。
次の解説記事はこちら
コメント