今回より全6回でAndroidアプリのチュートリアルを書いてみます。
しかし、コーディングをする機会を作ってこなかったので、実装なんていつ以来？という状態！
超初心者向けの内容になりそうなのでご期待下さい！

さて、今回は初心者らしく

• 画面をタップして動作させる
• 画像を表示と切り替え

というところまでを目標にします。

まず、セットアップですが、こちらに詳細があるので割愛します・・

 

 １．画面をタップして動作させる

とりあえず手探りで色々と試してみたいと思います。

何かAndroidっぽいものをさっと作って試したい！と言う事で、画面に一個だけボタンを配置し、画面上でボタンをクリックすると何か変化が起こるようなものを作成します。

まずはボタンを配置したいので[プロジェクト]/res/layout/main.xmlを開いて編集します。

まだ、真っ黒な背景に文字しか表示されていないので、ここにボタンを追加します。
画面右に表示されている(筈)のアウトラインウィンドウで[L]LinearLayoutで右クリック→[+]追加。
elementを選択するウィンドウが開くので(B)Buttonを選択。

すると、画面上にボタンが出てきます。

このように表示される筈。

この状態で実行しても・・・当然何も起こりません。
ですので、リスナーを実装。

package android.sample; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class Android_01 extends Activity implements OnClickListener { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); View changeButton = this.findViewById(R.id.Button01); changeButton.setOnClickListener(this); } public void onClick(View v){ if (v.getId() == R.id.Button01){ if(((Button)v).getWidth() == 200){ ((Button)v).setWidth(100); ((Button)v).setText("テスト成功！"); ((Button)v).setBackgroundColor(Color.RED); }else{ ((Button)v).setWidth(200); ((Button)v).setText("戻せ戻せ！"); ((Button)v).setBackgroundColor(Color.BLUE); } } } }

自分自身にOnClickListenerを実装します。
ボタンをクリックすると幅と色と文字が変わるという手抜きシンプルな構成！

ボタンをクリック。

もう一度。

エミュレーター上でも動くとやはり嬉しいですね。

 

２．画像を表示と切り替え

さて、とりあえずボタンは実装できたので、次はボタンの変わりに画像でやってみます。
やる事は一緒で、ボタンではなく画像をクリックすると違う画像に切り替わるようにします。
後は、背景色やレイアウトなどをちょっとだけ設定変更。

新規プロジェクトを作成し、まずはmain.xmlを編集。
またしてもelementの追加をするのですが、今度はImageViewを追加。

表示を画面の真ん中にしたいので、LinearLayoutのGravityをcenterに。

元々配置されているTextViewも真ん中になるかと思ったらのだけど、相変わらず左に寄ったまま。
色々と設定を変えてみましたが、結局はTextViewのLayout widthがfill_parentになっていた、というだけでした・・・
画面幅一杯で表示していたので、いくら中央に表示させようとしても変化がない訳です。
なのでこれをwrap_contentに変更したらちゃんと真ん中に表示されました。

画像は携帯のカメラで撮影した写真を使ってみます。
予め[ワークスペースのディレクトリ]/[プロジェクト]/res/drawable配下に配置しておきます。
今回はPNG形式の画像を二つ配置(g1.png、g2.png)。
そして今回のソースは以下。

package android.sample; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageView; public class ChangeImage extends Activity { // イメージビュー private ImageView changeImageView; //　画像ID private int changeImageId; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); changeImageView = (ImageView)findViewById(R.id.ImageView01); changeImageView.setOnClickListener(new ImageViewOnClick()); changeImageId = R.drawable.g1; changeImageView.setImageResource(changeImageId); } //　OnClickListenerのクラス public class ImageViewOnClick implements OnClickListener { // クリックされたとき public void onClick(View arg0) { // TODO 自動生成されたメソッド・スタブ //　現在のIDから次に表示する画像IDを設定 switch (changeImageId) { case R.drawable.g1: changeImageId = R.drawable.g2; break; default: changeImageId = R.drawable.g1; break; } // 画像を変更 changeImageView.setImageResource(changeImageId); } } }

画像をクリックすると・・・

ニコッ

# モデルはウチの子供です^^;

次回は実機で動かしつつ、バージョンアップさせていきます。

関連する投稿

• ゼロから始めるAndroid開発【設計編】
• ゼロから始めるAndroid開発【環境構築編】
• [音量設定アプリ]第6回 アプリのデザイン（テーマ）を変更
• [音量設定アプリ]第5回 ハードウェアキー（音量ボタン）が押されたときの処理を行う
• [音量設定アプリ]第4回 マナーモードの設定をする