Android プログラミング【 Viewの移動 】~ 疑似モグラたたき ~

Android プログラミング【 Viewの移動 】~ 疑似モグラたたき ~

今回はTextViewを使って、擬似的な「モグラたたき」っぽいアプリを作ってみたいと思います。
入力する行は少ないのですが、初めての命令が多いので、初心者の方は少々戸惑うかもしれません。
Java未経験の方は参考程度に抑えてください。

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name CountGame
Company Domain test.com
Package name com.test.countgame

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.countgame.MainActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onTv"
        android:text="0"
        android:textSize="42sp" />

</RelativeLayout>
package com.test.countgame;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

    int count = 0;

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

    public void onTv(View v) {
        // カウントの加算
        count++;
        ((TextView) findViewById(R.id.tv)).setText("" + count);

        // 表示位置の変更
        int w = findViewById(R.id.activity_main).getWidth();
        int w1 = (int) (w * 0.8);
        int w2 = new Random().nextInt(w1);
        ((TextView) findViewById(R.id.tv)).setTranslationX(w2);

        int h = findViewById(R.id.activity_main).getHeight();
        int h1 = (int) (h * 0.8);
        int h2 = new Random().nextInt(h1);
        ((TextView) findViewById(R.id.tv)).setTranslationY(h2);
    }

}

Android プログラミング【 AlertDialog 】~ 「戻る」ボタンで表示 ~

Android プログラミング【 AlertDialog 】~ 「戻る」ボタンで表示 ~

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。

この動画は「AlertDialog(アラートダイアログ)の利用」を行ってます。
戻るボタンを押したときにダイアログを表示し、YESを選択するとアプリを終了します。

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyDialog
Company Domain test.com
Package name com.test.mydialog

alertdialog プロジェクト名

alertdialog-mainactivity2

package com.test.mydialog;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;

public class MainActivity extends AppCompatActivity {

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

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        switch (keyCode){
            case KeyEvent.KEYCODE_BACK:
                new AlertDialog.Builder(this)
                        .setTitle("終了確認")
                        .setMessage("アプリを終了しますか?")
                        .setNegativeButton("NO", null)
                        .setPositiveButton("YES",

                                new DialogInterface.OnClickListener() {
                                    @Override
                                    public void onClick(DialogInterface dialog, int which) {
                                        finish();
                                    }
                                }

                        )
                        .show();
        }
        return super.onKeyDown(keyCode, event);
    }
}

Android プログラミング【 AlertDialog 】 ~ ダイアログ利用 ~

Android プログラミング【 AlertDialog 】 ~ ダイアログ利用 ~

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyDialog
Company Domain test.com
Package name com.test.mydialog

alertdialog プロジェクト名

alertdialog-activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.mydialog.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

alertdialog-mainactivity2

package com.test.mydialog;

import android.content.DialogInterface;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        new AlertDialog.Builder(this)
                .setTitle("背景色")
                .setMessage("背景色を変更しますか?")
                .setPositiveButton("YES",
                        new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                findViewById(R.id.activity_main).setBackgroundColor(Color.BLUE);
                            }
                        }
                )
                .setNegativeButton("NO",
                        new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                Toast.makeText(MainActivity.this,"了解しました!",Toast.LENGTH_SHORT).show();
                            }
                        }
                )
                .show();

    }
}

Android Studio入門

Android プログラミング【 AlertDialog 】 ~ ダイアログ表示 ~

Android プログラミング【 AlertDialog 】 ~ ダイアログ表示 ~

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyDialog
Company Domain test.com
Package name com.test.mydialog

alertdialog プロジェクト名

alertdialog-mainactivity

package com.test.mydialog;

import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        new AlertDialog.Builder(this)
                .setTitle("ああああ")
                .setMessage("いいいいいいいいいいい")
                .setPositiveButton("YES",null)
                .setNegativeButton("NO",null)
                .show();
        
    }
}

Android プログラミング【 タッチイベント 】 ~ Switchの利用 ~

Android プログラミング【 タッチイベント 】 ~ Switchの利用 ~
アプリ開発初心者用の学習動画です。

「画面タッチで画像が変わる」を学習しますが、以下の知識が無いと理解は難しいです。

・JavaのSwitchとオブジェクト指向

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyTouch
Company Domain test.com
Package name com.test.mytouch

画面タッチ_新規作成

* 注意 *
・画像をご自身で要するにはファイル名やファイルサイズ、拡張子に注意する必要があります。
・ファイル名は半角小文字の英数(a~z 0~9)とアンダーバー( _ )のみで、最初の1文字目は半角英字( a ~ z)のみです。
・慣れてない方はサンプル画像の使用をオススメします。

ノーマル画像
ノーマル画像
ダウン時
ダウン時

ムーブ時
ムーブ時

Android 開発 タッチイベント xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.mytouch.MainActivity">

    <ImageView
        android:id="@+id/iv"
        android:src="@drawable/img0"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
</RelativeLayout>

package com.test.mytouch;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.widget.ImageView;

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.iv)).setImageResource(R.drawable.img1);
        return super.onTouchEvent(event);
    }
}
package com.test.mytouch;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.widget.ImageView;

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) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.img1);
                break;
            case MotionEvent.ACTION_UP:
                ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.img0);
                break;
        }

        return super.onTouchEvent(event);
    }
}

タップの種類2

switch図解

onTouchEvent図解2

switch図解3

package com.test.mytouch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;

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) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.img1);
                break;
            case MotionEvent.ACTION_UP:
                ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.img0);
                break;
            case MotionEvent.ACTION_MOVE:
                ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.img2);
                break;
        }

        return super.onTouchEvent(event);
    }

}
Android Studio入門

Android プログラミング【 タッチイベント 】 ~ 画面タッチで画像変更 ~

アプリ入門 【タッチ処理 画像変更】768

アプリ開発初心者用の学習動画です。

今回は画面タッチ時の処理を勉強する動画で、前回の「画面タッチで文字変更」の復習動画です。

※ 前回だけではよくわからなかった人用の復習動画です。

* 注意 *
・画像をご自身で要するにはファイル名やファイルサイズ、拡張子に注意する必要があります。
・ファイル名は半角小文字の英数(a~z 0~9)とアンダーバー( _ )のみで、最初の1文字目は半角英字( a ~ z)のみです。
・慣れてない方はサンプル画像の使用をオススメします。

タッチ前の画像
タッチ前の画像
タッチ後の画像
タッチ後の画像

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.mytouch.MainActivity">

    <ImageView
        android:id="@+id/iv"
        android:src="@drawable/gilli0"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>


タッチ処理_プログラミング


package com.test.mytouch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;

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.iv)).setImageResource(R.drawable.gilli1);

        return super.onTouchEvent(event);
    }
}

Android Studio入門

Android プログラミング【 タッチイベント 】 ~ 画面タッチで文字変更 ~

Android 開発 【タッチ処理】768

アプリ開発初心者用の学習動画です。

画面タッチ時の処理を勉強する動画です。
ここでは、「画面をタッチすると文字が変わる」をサンプルに取り上げたいと思います。

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyTouch
Company Domain test.com
Package name com.test.mytouch

画面タッチ_新規作成

タッチイベント_xml_イメージ


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.mytouch.MainActivity">

    <TextView
        android:textSize="40sp"
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="タッチしてね!" />
</RelativeLayout>


タッチ処理_MainActivity_完成



package com.test.mytouch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.TextView;

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) {

        // 文字の変更
        ((TextView)findViewById(R.id.text)).setText("タッチしたよ!!");

        return super.onTouchEvent(event);
    }
}


Android プログラミング【 トーストの表示 】 ~ 簡易ポップアップ ~

Android プログラミング 【トースト】Toast 768

簡易的ポップアップを表示するプログラミングです。
超初心者用の動画で、トーストが使えると今後の学習に便利です。

適切な箇所に以下の1行とインポートでOK。

import android.widget.Toast;
Toast.makeText(this,"こんにちは!", Toast.LENGTH_SHORT).show();

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name TouchTest
Company Domain test.com
Package name com.test.touchtest

トースト-プロジェクト名

package com.test.touchtest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    ///////////////////////////////////////////////////////////
    // アプリケーション起動時に実行される処理
    ///////////////////////////////////////////////////////////
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // トーストの表示  ////////////////////////////
        Toast.makeText(this,"こんにちは!", Toast.LENGTH_SHORT).show();

    }


    ///////////////////////////////////////////////////////////
    // アプリケーション終了時に実行される処理
    // * 今回は「戻るボタンで呼び出される」の認識でOK
    ///////////////////////////////////////////////////////////
    @Override
    protected void onDestroy() {
        super.onDestroy();

        // トーストの表示  ////////////////////////////
        Toast.makeText(this,"さようなら!", Toast.LENGTH_SHORT).show();
    }
}

トーストの簡単な解説です。
アプリが複雑の場合起動しない時があります。

Android-Toast-解説

Android プログラミング【 アクティビティ⑥ 】 ~ ゲームの画面移行 ~

Android プログラミング【 アクティビティ⑥ 】 ~ ゲームの画面移行 ~ 768

擬似的なゲームを想定し、画面移行を学習する動画です。

この動画は以前UPしたアクティビティの続編です。以下を先に御覧ください。

  1. 【 アクティビティ① 】 ~ アクティビティとは ~
  2. 【 アクティビティ② 】 ~ 画面の作成 ~
  3. 【 アクティビティ③ 】 ~ 画面の編集 ~
  4. 【 アクティビティ④ 】 ~ 画面の切替 ~
  5. 【 アクティビティ⑤ 】 ~ 画面を閉じる ~

Activity 画面移行

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name RpgGame
Company Domain test.com
Package name com.test.rpggame

Activity 新規プロジェクト

学習に使用する素材です。
ご自身で用意する場合はファイル名や拡張子、ファイルサイズにご注意ください。
初心者の方はサンプルを使用することを強くおすすめします。

使用素材 タイトル画面使用素材 プレイ画面使用素材 ゲームオーバー画面

Activity ファイル構造

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.test.rpggame.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/main" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:onClick="onButton1"
        android:text="スタート"
        android:textSize="30sp" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.test.rpggame.PlayActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/play" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:onClick="onButton2"
        android:text="アタック"
        android:textSize="30sp" />

</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.test.rpggame.OverActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/over" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:onClick="onButton3"
        android:text="タイトルに戻る"
        android:textSize="30sp" />

</RelativeLayout>

package com.test.rpggame;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    public void onButton1(View v) {
        Intent intent = new Intent(this, PlayActivity.class);
        startActivity(intent);
    }
}

package com.test.rpggame;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class PlayActivity extends AppCompatActivity {

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

    public void onButton2(View v) {
        Intent intent = new Intent(this, OverActivity.class);
        startActivity(intent);
        finish();
    }
}

package com.test.rpggame;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class OverActivity extends AppCompatActivity {

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

    public void onButton3( View v){
        finish();
    }
}

Android Studio入門

Android プログラミング【 EditText 】 ~ 文字加工 ~

Android プログラミング【 EditText 】 ~ 文字加工 ~768

ユーザーの入力文字を取得し、利用する方法を学習します。

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name EditText
Company Domain test.com
Package name com.test.edittext

Android プログラミング【 EditText 】 ~ 文字加工 ~ 新規作成

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.edittext.MainActivity">


    <EditText
        android:id="@+id/et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:onClick="onButton"
        android:text="セット"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ダミー"
        android:textSize="30sp" />

</LinearLayout>


package com.test.edittext;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    public void onButton( View v){
        // 文字の取り出し
        String s = ((EditText)findViewById(R.id.et)).getText().toString();
        // 文字のセット
        ((TextView)findViewById(R.id.tv)).setText(s);
    }
}

Android プログラミング【 EditText 】 ~ 文字加工 ~ ポイント