- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2024-06-05T22:26:06+09:00","","")
''このページは,古いバージョンのAndroidStudioに沿った説明になっています.''
''新しいバージョンで動作するか未確認,かつ,未更新の部分もあるので,参考にする場合はそれを踏まえておいてください.''
#author("2024-06-06T16:00:52+09:00","","")
** ボタンの追加 [#h533e120]
ボタンを押して,何らかの動作を実行させることもできます.~
まず,ボタンを画面上に配置します.~
左側の「Widgets」にある「Button」を,横のAndroidの画面内にドラッグ&ドロップしして配置します.図1が配置後の様子です.~
左側の「Common」か「Buttons」にある「Button」を,横のAndroidの画面内にドラッグ&ドロップしして配置します.図1が配置後の様子です.~
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-6.png, ,60%)
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-5.png,600x400)
CENTER:図1
#BR
配置後,Propertiesの欄の
- textにある「Button」の文字を「ボタン」にかえてください.文字の内容はなんでもいいです.
- IDにある「button」の文字を「try_it_out」にかえてください.文字の内容はなんでもいいです.
配置して周囲にくっつけた後,
- 以下の1行を「strings.xml」のファイルに書き足してください.文字の内容はなんでもいいです.
<string name="button_text">押しボタン</string>
- textにある「Button」の文字を「@string/button_text」にかえてください.
- IDにある「button」の文字を「press_button」にかえてください.文字の内容はなんでもいいです.
大体の設定が終わると,図2のようになります.~
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-6.png,600x400)
CENTER:図2
#BR
** ボタンを押したあとの動作 [#fd4d7c2e]
次に,&color(red){MainActivity.java};に,ボタンが押されたときの動作の内容を追記します.~
&color(red){MainActivity.java};を開くと,いきなり色々なモノが追加されているのがわかります.このへんは,ボタンの動作のために,Android Studioが自動で追加したものです.あまり意識せずに,
protected void onCreate(Bundle savedInstanceState) {
の中に,以下の内容を書き加えてください.
の中に,以下の内容を書き加えてください.図3の色が反転している箇所です.
#BR
// ボタンのパーツをIDから取得
Button tapButton = (Button) findViewById(R.id.try_it_out);
Button tapButton = (Button) findViewById(R.id.press_button);
// ボタンが押されたときの設定
tapButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TextView textView2 = (TextView) findViewById(R.id.textView2);
// テキストの書き換え
textView2.setText("ボタンが押されました");
}
});
#BR
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-7.png,600x400)
CENTER:図3
#BR
これでボタンの設定は終了です.~
実行して,動作内容を確認してみてください.ボタンを押すと,テキストが書き換わります.~
実行して,動作内容を確認してみてください.図4のエミュレータ上でボタンを押すと,真ん中の赤文字のテキストが,図5のように先ほど指定した文字に書き換わります.~
#BR
もし画像を入れ替えたいときは,テキストの書き換えの場所を↓とすると,アンドロイドのマークが他の画像に変わります.
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-8.png,600x400)
CENTER:図4
#BR
ImageView imgView2 = (ImageView) findViewById(R.id.imageView2);
imgView2.setImageResource(R.drawable.julia);
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-9.png,600x400)
CENTER:図5
#BR
#BR
もし画像を入れ替えたいときは,以下の画像をDLして「app -> res -> drawable」の箇所にコピーし,テキストの書き換えの場所を↓とすると,写真が他の画像に変わります.
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/julia.jpg,400x300)
#BR
ImageView imgView = (ImageView) findViewById(R.id.imageView);
imgView.setImageResource(R.drawable.julia);
#BR