ハジカラ 〜はじめからでも、プログラミング勉強〜

入門向けに、IT関連(javaやKotlin)をコツコツ書いたり検証したりします。

【Mac・Android Studio】画像とボタン操作

calendar

reload

こんにちは。

今回は、前回表示してみた画像とボタン操作を組み合わせてみます。
イメージ的には、ボタンを押すと表示してある画面Aが画像Bになり、再度ボタンを押すと
画像Aに戻るような感じで作ってみます✌

↓ ボタンをつけるとこんな感じです。
画像とボタン1−1

あと、変更後の画像を追加します。
画像とボタン1−2

ここから、javaでの開発になるのですが、activity_main.xmlに記載
している画像とボタンのIDを控えておきましょう。

 

<ImageView
android:id=”@+id/imageView2″
・・・・
<Button
android:id=”@+id/button1″
・・・・
 

ここからは、MainActivity.javaを記述してみようと思います。
↓ 出来ているクラス(MainActivity.java)をそのまま開いた状態です。

public class MainActivity extends AppCompatActivity {     //①
   protected void onCreate(Bundle savedInstanceState) {  //②
     super.onCreate(savedInstanceState);         //③
     setContentView(R.layout.activity_main);        //④
   }
}
 

①はMainActivityはMainActivity.javaのクラス名で、②のonCreateは
画像処理が起きた際に最初に呼ばれる関数とのことです。

③は、処理の前にスーパークラス(AppCompatActivity)が実行されるのですが、
今回はここはこのままにしておきます。

④は画像クラス(activity_main.xml)を指定しています。
この後に、コードを記述していきましょう😃

↓ まず、画面で作ったボタン(ID=button1)を使います!!と宣言します。

Button button = findViewById(R.id.button1);
 

↓ すると、エラーになります。
  Buttonクラスをインポートしていないからです。
画像とボタン1−3

↓ Buttonにカーソルを当てて、optionキー+enterキーを押すと・・・
画像とボタン1−4

↓ 自動で、Buttonクラスをインポートしてくれます✌
画像とボタン1−5

同じように画像(ID=imageView2)も宣言します。

ImageView imageView = findViewById(R.id.imageView2);
 

次は、ボタンを押された時に実行される処理を記述します。

button.setOnClickListener(new View.OnClickListener() { //⑤
   public void onClick(View view) {          //⑥
   }
}
 

⑤先ほど宣言した「button」を使用し、setOnClickListenerを呼びます。
ボタンが押された事を検知する関数です。

⑥ボタン押下後の処理は、このonClick内に書いていきます。

private boolean hantei = false;    //⑦
public void onClick(View view) {
   if (hantei) {
    imageView.setImageResource(R.drawable.imag0209); //⑧
    hantei = false;
   } else {
    imageView.setImageResource(R.drawable.imag0134); //⑨
    hantei = true;
   }
}
 

⑦は、判定として置いています。画像Bが設定されたらfalseをセット、画像Aが設定されたら
tureをセットという形で使用します。

⑦の判定をした後、判定がtrueだった場合は、⑧で画像Bをセットしており、判定にfalseをセット
して処理終了。

⑨はその反対の処理をしています。
これで、AVD(エミュレータ)を実行してみると、、、、

↓ 画像とボタンは表示されています😃
  そして、ボタンを押してみると、、、、
画像とボタン1−6

↓ 画像が切り替わりました。
  成功です✌
画像とボタン1−7

今日はここまで。

まだまだコードや役割が理解しきれていない気もするので、
機能を記述して動かしながら理解していきます。

では、次回✋