6. Hello World を書き換える

はじめに

前回は「クラスとメソッド」について紹介しました。

今回はクラスとメソッドについてもう少し詳しく調べながら、「Hello World」という文字列を MainActivity.java から書き換えてみます。

 

「Hello World」を変更する

「Android Studioの使い方とActivityについて」の中で

  • activity_main.xml はアプリの見た目を作る場所
  • MainActivity.java はアプリの機能を作る場所

と紹介しました。

 

activity_main.xml に置いた TextView や Button などの要素は MainActivity.java から操作することができます。

activity_main.xml を開いてみると「Hello World!」という TextView がありますね。

image1

 

この TextView の文字列を MainActivity.java から書き換えてみましょう。

 

 

1. activity_main.xml

まず MainActivity.java から TextView を見つけるために id を設定します。

activity_main.xml を開いて、2行目を追加してください。

Clear Read-Only Status というメッセージが出てきた場合は「OK」を押して下さい。

image2

 

id は android:id="@+id/id名" と書く決まりになっていますが、このコードを覚える必要はありません。

id と書けば自動補完機能で入力候補が出てくるので、簡単に入力することができます。

image3

 

一つ注意点は「同じアクティビティ内に同じ id を持つ要素を置くことはできない」ことです。

例えば TextView が 3つあった場合、textView1, textView2, textView3 のように全て異なる名前にする必要があります。

また、id 名はその要素を表していれば基本的にどんな名前でも良いですが「最初の文字は小文字で、単語の区切りは大文字」で書きます。

例)message, hello, textView, myText, helloWorld

 

 

2. MainActivity.java

次に MainActivity.java を開いて、6行目を追加します。

import

画像のように TextView の部分が赤くなり、青いメッセージが出るかもしれません。

image4

これは「android.widget.TextView をインポートしてください」という警告です。

 

青いメッセージが出ている状態で alt キーと return キーを同時に押してみてください。

 

警告が消えましたか?

コードを見てみると、6行目あたりに import android.widget.TextView; が追加されているはずです。

image5

 

import はクラスファイルを取り込むためのものでしたね。

ここでは TextView クラスを MainActivity クラスで使うために TextView クラスをインポートしています。

 

この import は自動で追加されることもありますが、今後同じように警告が表示された時は alt キーと return キーを同時に押して、必要な import を行ってください。

 

 

findViewById

findViewByIdは「idからビューを見つける」という意味で、findViewById() が前回紹介したメソッドです。

メソッドには

  1. 処理をするだけのメソッド
  2. 処理をして値を返すメソッド

があると紹介しました。

findViewById メソッドはどちらなのか調べてみましょう。

 

Windows の場合は Ctrl キー、Mac の場合は command キーを押しながら findViewById をクリックしてください。

image6

 

AppCompatActivity クラスにある findViewById メソッドが表示されました。

image7

 

なんのこっちゃという感じですが、仕組みは前回紹介した基本的なメソッドと同じです。

image8

void ではなく return で値を返しているので、findViewById メソッドは処理をして値を返すメソッドです。

さらに引数に id を指定しています。引数はメソッド内で使われる値でしたね。

 

MainActivity.java に書いた findViewById メソッドでも R.id.textView を引数として渡しています。

image9

 

このように findViewById メソッドは「引数で受け取った id からその id を持つ要素を見つけて返す」という処理を行うメソッドです。

* TextView textView = という書き方については次のステップ「変数と型」で紹介します。

 

引数 R.id.textView の R は Resource(リソース)の頭文字です。

Android Studio 画面左側にあるプロジェクト構造に res フォルダがあります。

image10

 

この res フォルダにある全てのレイアウトや画像には ID が付けられて、R クラスで管理されています。

image11

 

R.id.textView は「R クラスにある TextView の ID」を使うための書き方です。

メモ
R の部分にエラーが出て id が認識されないエラーがたまに起こります。Android Studio を再起動すれば解決することがほとんどですので、困ったときは再起動してみてください。
参考:Cannot resolve symbol R エラーの原因と解決法

 

ボタンでも画像でも activity_main.xml の要素に対して MainActivity.java から変更を加える場合は「id を設定して findViewById」という手順が必要になります。

アプリ開発で何度も使うことになるので覚えておきましょう

これで MainActivity.java から「Hello World」を変更する準備は完了です。

 

 

3.「Hello World」を変更する

次に「Hello World」を「こんにちは」というテキストに変えてみましょう。

16行目を追加してください。

TextView に表示する文字列をセットするため使うのが「TextView クラスの setText メソッド」です。

 

setText メソッドも調べてみると、このようになっています。

image12

setText メソッドは void なので戻り値がないメソッドで、引数で渡した文字列が TextView に表示される仕組みになっています。

findViewById メソッドは「id から要素をみつけてその要素を返すメソッド」でしたが、setText メソッドは「引数の値を TextView に表示するだけのメソッド」です。

 

 

4. アプリを実行する

最後にアプリをエミュレータで実行してみましょう。

'Run app' ボタンを押します。

image13

 

「こんにちは」と表示されたら成功です

image14

 

 

次に行うこと

クラスとメソッドについて具体的にイメージが湧いてきたでしょうか?

コードを書くことで少しずつプログラミングらしくなってきましたね!

次回は「変数と型」について学んでいきましょう

 

コメント

5 コメント