JavaでAndroidアプリ開発(タップでテキスト変更)

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

①テキストを編集（画面の作成）

activity_main.xml

<?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">

   <TextView
       android:id="@+id/counter"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textSize="70dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

②テキストを変更する。

全体像

MainActivity.java

package com.example.touchtextapp;

import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

   //変数を作成
   int cnt = 0;


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


   @Override
   //タップしたら、cntに1が足されていく。

   public boolean onTouchEvent(MotionEvent event) {
       cnt++;
       ((TextView)findViewById(R.id.counter)).setText("" + cnt);
       return super.onTouchEvent(event);
   }
}

その他、解説

・変数を作成

int cnt = 0;

※上記ではcntという変数に0を代入しています。

・HelloWorld!をcntに変更する。

((TextView)findViewById(R.id.counter)).setText("" + cnt);

※cntは数値型なので前に""が必要。

・タップしてテキストを変える（onTouchEventメソッドを作成）

   public boolean onTouchEvent(MotionEvent event) {
       cnt++;
       ((TextView)findViewById(R.id.counter)).setText("" + cnt);
       return super.onTouchEvent(event);
   }

onTouchEventについては、以下の記事でも解説しているのでさきにそちらをご参照ください。

しかし、このままだと押しても話しても、動かしてもonTouchEvent内の処理が実行されてしまいます。

③押したときだけ、実行するようにする。

switch(event.getAction())で条件分岐

MotionEvent.ACTION_DOWN:で押した場合の条件を記載する。

    public boolean onTouchEvent(MotionEvent event) {
       switch (event.getAction()) {
           case MotionEvent.ACTION_DOWN:
               cnt++;
               ((TextView) findViewById(R.id.counter)).setText("" + cnt);
       }
               return super.onTouchEvent(event);
       }
   }

④最終全体像

MainActivity.java

package com.example.touchtextapp;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
   //変数を作成
   int cnt = 0;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       }
   @Override
   //タップしたら、cntに1が足されていく。
   public boolean onTouchEvent(MotionEvent event) {
       switch (event.getAction()) {
           case MotionEvent.ACTION_DOWN:
               cnt++;
               ((TextView) findViewById(R.id.counter)).setText("" + cnt);
       }
               return super.onTouchEvent(event);
       }
}

条件に合致したら、画像を表示する。

activity_main.xml

<?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">

   <TextView
       android:id="@+id/counter"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textSize="70dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <ImageView
       android:id="@+id/iv"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:layout_editor_absoluteX="0dp"
       tools:layout_editor_absoluteY="213dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

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

   //変数を作成
   int cnt = 0;

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

   @Override
   //タップしたら、cntに1が足されていく。
   public boolean onTouchEvent(MotionEvent event) {
       switch (event.getAction()) {
           case MotionEvent.ACTION_DOWN:
               cnt++;
               ((TextView) findViewById(R.id.counter)).setText("" + cnt);
               if (cnt == 10) {
                   ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.pa);
               }else {
                   ((ImageView) findViewById(R.id.iv)).setImageDrawable(null);
               }
       }
       return super.onTouchEvent(event);
       }
   }

ボタンが押されれば、cntが加算されていき、10になると、drawableにあるpaという画像が表示されます。10でなければ、画像が表示されない　という処理内容になります。

まずは適当に画像を準備して、drawableに入れ込みましょう。詳しくは以下の記事内にある『①画像をdrawbleに入れる』をご参考ください。

①空のImageViewを設定する。

   <ImageView
       android:id="@+id/iv"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:layout_editor_absoluteX="0dp"
       tools:layout_editor_absoluteY="213dp" />

idがiv（任意）という空のImageViewを作成。

②if関数を追加する。

    public boolean onTouchEvent(MotionEvent event) {
       switch (event.getAction()) {
           case MotionEvent.ACTION_DOWN:

               cnt++;
               ((TextView) findViewById(R.id.counter)).setText("" + cnt);
               if (cnt == 10) {
                   ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.pa);
               }else {
                   ((ImageView) findViewById(R.id.iv)).setImageDrawable(null);
               }
       }
       return super.onTouchEvent(event);
       }
   }

onTouchEventメソッドへif関数とImageViewを追加しましょう。

画像のsetの行い方は以下の記事をご参考ください。

以上で終了となります。ここまで読んでくださり、ありがとうございました。マガジン作成しました。合わせてご一読いただけると幸いです。

【初心者】JavaやAndroid Studioを学ぼう｜tamurasann｜note