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アプリで、クリックイベントとロングクリックイベントの2つを取得して処理する方法です。 OnClickListenerとOnLongClickListenerを併記 public clas…続きを読む

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

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

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

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

Androidアプリ:Android StudioでデバッグしようとするとPlease select Android SDKと表示される

Android Studioを使っていて、動作確認するために実行(run)をすると、ADVが起動せず、「Error: Please select Android SDK」と表示されてしまった場合の復旧…続きを読む

Androidアプリ:Firebaseを利用したAdMobの実装方法

AndroidアプリでFirebaseを利用したAdMobの実装方法を調べました。 なお、FirebaseおよびAdMobには既にユーザ登録済みであることを想定しています。 未登録の場合は先に登録して…続きを読む

Androidアプリ:内部テスト版をリリースする

Androidアプリで完成したものをすぐに公開する前に、内部テスト版としてリリースして動作確認をする方法です。 内部テスト版リリース方法 Google Play Consoleにログインして、「すべて…続きを読む

Androidアプリ:App is not indexable by Google Search;と表示される

Android Studioで、 App is not indexable by Google Search; consider adding at least one Activity with a…続きを読む

Androidアプリ:String型の変数に格納した画像や音声ファイル名から表示・再生する

Android Studioを使って画像ファイル名や音声ファイル名から、ImageViewで画像を表示したりMediaPlayerで音声再生する方法です。 String型の変数に、画像ファイル名もしく…続きを読む

Androidアプリ:ClassNotFoundExceptionエラー

Google Play Consoleのクラッシュ報告で、「ClassNotFoundException(ac.loadClass)」というログが表示されていたので、調べました。 恐らくAdmobのS…続きを読む

Androidアプリ:テキストをリスト表示する

Androidアプリで、ListViewを使い、配列に格納したテキストをリスト表示します。 MainActivity.java import android.app.Activity; import …続きを読む