JavaでAndroidアプリ開発(タップで画像変更)

とりあえず、プロジェクトを作成しましょう。名前は適当でOKです。

①画像をdrawbleに入れる

適当に画像をご準備ください。名前については、最初が大文字や数字だとエラーが出るのでご注意。

今回は、下記のような画像でa,bという名前の画像を用意しました。

（画像収集の効率化についても記事にしているのでぜひご参照ください）

画像をコピーして、drawableフォルダ上で右クリックを押して貼り付けを行ってください。

正しく貼り付けられれば、下記のような形になります。

②画像をactivity_main.xmlに入れる（画面に表示する）

activity_main.xml

とりあえず、一番初めに入力されているTextViewは不要なので削除

ImageViewを追加しましょう。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

<ImageView
   android:id="@+id/hayashi"
   android:src="@drawable/a"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>
   
</androidx.constraintlayout.widget.ConstraintLayout>

■id == "hayashi"　とつけました。プログラミングする際のこの画像の名前のようなものです。

■src == さきほど入れた画像を選択。drawableにあるaという名前の付いた画像を選択。

■widthやheight == 画面いっぱいに表示させるため "match_parent"を選択

エミュレータで起動してみるとこんな感じで表示されます。

エミュレータの起動については、以下の記事をご参照ください。

Android Studioのインストールからエミュレーターの起動まで／Windows編

③onTouchEventメソッドを作成

※MainActivity.javaへonTouchEventのメソッドを作成しましょう。このメソッドは、タッチしたら、処理を行うメソッドとなります。

MainActivity.java

package com.example.touchapp;
import android.os.Bundle;
import android.view.MotionEvent;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {

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

   @Override
   public boolean onTouchEvent(MotionEvent event) {

       //この部分にタッチした時の動作を記載する。
       ((ImageView)findViewById(R.id.hayashi)).setImageResource(R.drawable.b);

       
       return super.onTouchEvent(event);
   }
}

今回はidがhayashiという画像をタッチした場合

((ImageView)findViewById(R.id.hayashi))

drawableにあるbという画像をセットするという動作です。

.setImageResource(R.drawable.b);

この状態でエミュレータを起動して、タップしてみると画像が変わっています。これでタップすると画像が変わるコードが完了となります。

色々な動作

switch(event.getAction())を使います。

①押したら、画像を変更。離したら元の画像に戻す。押しながら動かすと違う画像に変更

   @Override
   public boolean onTouchEvent(MotionEvent event) {

       switch(event.getAction()){

           //押した場合に行う動作
           case MotionEvent.ACTION_DOWN:
               ((ImageView)findViewById(R.id.hayashi)).setImageResource(R.drawable.b);
               break;

           //離した場合に行う動作
           case MotionEvent.ACTION_UP:
               ((ImageView)findViewById(R.id.hayashi)).setImageResource(R.drawable.a);
               break;

           //押しながら動かした場合に行う動作
           case MotionEvent.ACTION_MOVE:
               ((ImageView)findViewById(R.id.hayashi)).setImageResource(R.drawable.c);
               break;
       }

       return super.onTouchEvent(event);
   }

※もう1枚cという画像を追加しました。

画像では伝わりませんが、書いた通りに動いております。岡田紗佳良いですね！

他にも色々記事を書いておりますのでぜひ、ご参照ください。