HOME技術AndroidAndroidアプリ:ボタンを押すとメッセージが入れ替わる

Androidアプリ:ボタンを押すとメッセージが入れ替わる

Android StudioでAndroidアプリを試作します。
今回は「ボタンを1回押すとテキストの内容が変わり、もう1回押すと元に戻る」というだけのアプリをつくります。

プロジェクトの生成

Android Studioを起動して、「File」→「New」→「New Project」をクリックします。

または、1つもプロジェクトをつくっていないときには「Welcome to Android Studio」が表示されるので、「Start a new Android Studio project」をクリックします。

「Configure your new project」では以下のように設定します。

「Application name:」には、アプリ名を入力します。
ここではとりあえず「myApp」にしておきます。

「Company domain:」には、独自ドメインのウェブサイトを持っている場合には、そのドメインを入力します。
ここではとりあえず「kuuur.net」にしておきます。

「Pakage name:」は変更する必要はありません。
変更したい場合には、右端の「edit」をクリックします。

「Include C++ support」は不要なので、チェックを入れません。

「Project location:」には、このプロジェクトを構成するファイル群を格納する場所を示します。多くの場合、自動生成された場所で問題ありません。

ここまで設定したら「Next」をクリックします。

「Select the form factors your app will run on」と表示されます。
スマホ用に開発をするので、「Phone and Tablet」にチェックを入れます。

「Minimum SDK」では、Android OSのバージョンを指定します。
古いバージョンを選べばより多くのスマホをカバーすることができます。
カバー率はその下のメッセージに「By targeting API ** and later, your app will run on approximately **% of the devices that are active on the Google Play Store.」のように表示されるので、目安にしましょう。

「Next」をクリックします。

「Add an Activity to Mobile」が表示されます。
ここではどのような画面でアプリを表示させるかを選ぶことができます。
今回は「Empty Activity」を選択して、「Next」をクリックします。

「Customize the Activity」が表示されます。
「Activity Name:」はメインのjavaファイル名です。
「Layout Name:」はレイアウトを記述するxmlファイル名です。
どちらも変更する必要はありません。
「Finish」をクリックします。

しばらく待つとプロジェクトが生成されます。

エミュレータの起動

「Tools」→「Android」→「AVD Manager」をクリックするか、上のアイコンからAVD Managerを起動します。

左下の「Create Virtual Device…」をクリックします。

「Select Hardware」が表示されます。
今回は適当に「Nexus 6」を選びます。「Nexus 6」をクリックして「Next」をクリックします。

「Select a system image」で、動作させるOSのバージョンを選びます。
低いバージョンのOSにすれば、それだけ古いスマホのユーザにも対応できるようになりますが、新しいAPIが使えなくなります。
今回は「Recommended」タブを開き、「Lollipop」を選択して「Next」をクリックします。

「Verify Configuration」では、特に変更せず「Finish」をクリックします。
AVD Managerに新しいエミュレータが登録されます。

「Your Virtual Devices」画面で、先ほど追加したエミュレータの右側にある「Actions」の欄の右三角マークのアイコンをクリックします。これでエミュレータが起動します。

エミュレータの起動には結構時間がかかりますので、しばらく待ってください。
エミュレータを起動して、エミュレータの画面が真っ暗なままになっている場合は、エミュレータが動作していません。動作させるOSを替えるなどして様子を見ましょう。

画面上にテキストとボタンを配置する

左側のペインから、「app」→「res」→「layout」→「activity_main.xml」をダブルクリックします。

右側に「activity_main.xml」の内容が表示されます。
下側の「Design」タブで、デザイン画面が表示されます。
「Text」タブでxmlファイルを直接修正できます。

テキストの修正

「Design」タブにしておいて、プロジェクトを生成すると既にできている「Hello World」の位置を修正します。
まず、「Hello World」のテキストをクリックすると、選択画面になります。
Hello Worldが中央表示になっていない場合には、中央表示にしてみます。
右クリックメニューから「Center Horizontally」を指定すると、水平に対して中央に配置されます。
「Center Vertically」を指定すると垂直に対して中央に配置されます。

次に、テキストを別の文字に書き換えます。
デザイン画面の「Hello World」の文字をダブルクリックすると、右側にプロパティが表示されます。

ここで、「ID」に「appText」と入力してEnter。
IDを設定しておくと、後でプログラムで値を取得できるようになります。
「TextView」項目の「text」に「Change Me」と入力してEnterを押すと、「Hello World」の文字が「Change Me」に変わります。
さらにテキストの大きさが小さいので、プロパティの一番したにある「View all properties」をクリックすると、全プロパティの設定画面に移行します。

ここで「textSize」欄に「40」と入力してEnterを押します。
テキストサイズはspという単位が使われます。
spを入力しなくてもEnterを押した時点でspという単位が割り振られます。

ボタンの配置

次に、ボタンを配置します。
「Design」タブにすると、左側に部品の一覧が表示されます。
表示されていないときは「Palette」をクリックしたり、表示のペインをいじったりすると表示されます。

この部品一覧から、「Button」クリックしてそのままデザイン画面にドラッグします。

「BUTTON」という名前のボタンが配置されます。
このボタンも中央表示するため、右クリックメニューから、「Center Horizontally」「Center Vertically」をクリックします。
するとテキストと重なるので、クリックして移動すると、センター位置のガイドにそりながら、移動させることができるようになります。
適当な位置になるように、ボタンを下にずらします。

ボタンをダブルクリックして、プロパティを表示します。

「ID」を「appButton」にします。

「text」を「Change」にします。

さらに「View all properties」をクリックして、「onClick」の値を「changeText」にします。
これは後でプログラムで使う関数名になります。

ボタンをクリックするとメッセージを変える

次にjavaのプログラムコードを書いていきます。

左ペインから、「app」→「java」→「net.kuuur.myapp」→「MainActivity」をダブルクリックします。

右ペインに「MainActivity.java」が表示されます。

protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

の次に続いて、以下のように入力します。

public void changeText(View text1){
TextView text2 = (TextView)findViewById(R.id.appText);
String text3 = text2.getText().toString();
if (text3 == “Change Me”){
text2.setText(“Changed.”);
}
else{
text2.setText(“Change Me”);
}
}

public void changeText(View text1){}
は、changeTextという名前の関数を宣言しています。
changeTextは、テキストの内容を書き換えるだけで戻り値はないので、voidを指定します。
(View text1)は、引数です。
ボタンに関わる関数を設定する場合には、View型の引数が必要になりますので、このように入力します(「text1」は任意の文字列)。

TextView text2 = (TextView)findViewById(R.id.appText)
は、TextView型の変数「text2」に、画面に配置されているIDが「appText」を参照できるようにします。

findViewById(R.id.***)は、idの名前が***を参照する場合に使います。
参照するには型の宣言が必要なので、参照値を格納する変数と同じ型であるTextViewを指定します。

String text3 = text2.getText().toString();
は、String型の変数「text3」にappTextのテキスト自体を格納します。

if (text3 == “Change Me”){
text2.setText(“Changed.”);
}
else{
text2.setText(“Change Me”);
}
は、現在画面に表示されているテキストが、「Change Me」であれば、「Changed.」にします。
現在画面に表示されているテキストが「Change Me」でなければ、「Change Me」にします。

動作を確認する

ここまで設定したら、一度左上のフロッピーディスクのアイコンをクリックして、保存します。

次に、右三角のアイコンをクリックすると、設定したエミュレータでの動作確認ができます。

エミュレータの画面が動作する前に、エラーメッセージが表示された場合には、コードのどこかに間違いがあります。

関連記事

Androidアプリ:画面遷移時に値を渡す

Androidで画面遷移時に値を渡す方法です。 数値を渡す場合 MainActivity.java public class MainActivity extends Activity { @Over…続きを読む

Androidアプリ:ボタンをタップして別画面に遷移する

ボタンをタップしたら別画面に遷移させる方法です。 以下の例では、メイン画面の「ボタン」をクリックすると、サブ画面に移動し、サブ画面の「終了」ボタンを押すとメイン画面に戻ってきます。 メイン画面 act…続きを読む

Androidアプリ:アイコンの下に表示されるテキストの設定

Androidアプリをインストールした後に、スマホ画面に生成されるアイコンの下に表示されるテキストの設定方法です。 AndroidManifest.xml AndroidManifest.xmlを開き…続きを読む

Androidアプリ:ボタンやEditTextに背景色・枠線をつける

Android Studioで、ボタンやEditTextに背景色や枠線をつける方法です。 コントロールの見た目の設定をするには、別途専用のxmlファイルを生成して、そこに書いた設定を読み込むようにしま…続きを読む

Androidアプリ:ストアの掲載情報

Androidアプリのプログラムが完成したらすぐにGoogle Playにアップロードできるわけではありません。 プログラム以外に必要なデータを以下にリストアップしました。 ストアの掲載情報として必要…続きを読む

Androidアプリ:アダプティブアイコンに対応する

AndroidではOS 8.0からAdaptiveアイコン(アダプティブアイコン)というアイコンを用意する必要がでてきました。 これまでの通常のアイコン、ラウンドアイコンに加えて、アダプティブアイコン…続きを読む

Androidアプリ:ボタンやEditTextに余白(パディング)を設定する

Android StudioでボタンやEditTextに余白(パディング)を設定します。 余白の設定はレイアウトファイル(activity_main.xml)を編集します。 activity_main…続きを読む

Androidアプリ:背景に画像を指定する

Android Studioを使って、背景に画像を設定する方法です。 背景画像を格納する 今回は以下の画像を使います。 画像サイズなどは適当につくります。 Androidは様々な解像度がありますが、画…続きを読む

Androidアプリ:アプリを更新する場合の設定

一度リリースしたAndroidアプリを更新してアップロードする場合には、必ずバージョンを更新しなければなりません。 今回はバージョンの更新方法について調べました。 build.gradleの修正 bu…続きを読む

Androidアプリ:入力された数値を足して表示する

2つのテキストボックスに入力した数値を受け取り、それぞれを足した結果を表示するアプリをつくります。 ここではレイアウト定義ファイルを「activity_main.xml」、 プログラムファイルを「Ma…続きを読む