初心者でもAndroidアプリ開発を1から学習できる1日集中入門セミナー。

STEP5.おみくじ結果画面を表示してみよう

概要

おみくじ結果画面を新しく作成し、スワイプ画面の表示時に端末をタッチし、スワイプすることによって、おみくじ結果画面に遷移するようにする。

目次

このステップのポイント

  • インテントを使った画面遷移方法を復習する

新しいファイルを作成する

まずは、おみくじ結果画面を作成するために必要なファイルを新しく作成しましょう。 新規ファイルを作成する方法はSTEP3と同様の方法でおこなっていきます。 Customize the Activityという画面が表示し、項目の中から一番上のActivity Nameを以下の内容を設定します。

項目 設定内容 備考
Activity Name ResultActivity アクティビティファイル名を設定する項目。記述ミスがないように注意!
Layout Name activity_result 画面レイアウトファイル名を設定する項目。
アクティビティファイル名に応じたファイル名に自動で変わります。
Make-ResultActivity

設定が完了したら、「終了(F)」をクリックします。

プロジェクトを確認し、新しくResultActivityactivity_result.xmlがあることを 確認してください。

Make-ResultActivity-result

おみくじ結果画面の画面レイアウトを修正する

おみくじ結果画面のファイルを新しく作成したら、先ほど作成したactivity_result.xmlを編集します。activity_result.xmlを開いてください。 今回は、背景画像の設定とイメージボタンを1つ配置します。
以下の手順に沿って進めていきましょう。

テキストビューの削除

初期状態でテキストビューが1つ配置されているので、 テキストビューを選択し、「Delete」キーを押してテキストビューを削除します。

RelativeLayoutの属性を変更

次に、RelativeLayoutの属性を変更します。
Component TreeからRelateveLayoutをクリックして、RelativeLayoutが選択されている状態にしましょう。

RelativeLayoutをクリックしたら、画面右下のPropertiesの確認をして下さい。 background属性に以下の値を設定します。

項目 設定内容 備考
id layoutResult RelativeLayoutを識別するためIDを設定します。
background @drawable/result1 レイアウトの背景を設定します。

設定をおこない、編集画面が以下のような表示になれば完了です。

add-background-of-layout-result

イメージボタンの配置

RelativeLayout上へのビューの配置方法についてはこちらを参考にしてください。
今回は、横方向は親のレイアウトの右端、縦方向は親のレイアウトの下端に配置します。
PaletteからImageButtonをクリックし、 以下の図のようにalignParentRight alignParentBottomが表示されたらクリックを離します。

drag-buttonRetry-on-layout-result

正しく配置すると、以下の画面のようになります。
まだイメージボタンの画像を設定していないので、配置した位置に小さい灰色の枠が表示されていることが確認できます。

drag-buttonRetry-on-layout-result-result

イメージボタンの属性を設定

最後に、イメージボタンの属性を設定します。
まずはイメージボタンをクリックで選択して、Propertiesの項目をイメージボタンの属性一覧に切り替えましょう。
各属性に以下の値を設定します。

項目 設定内容 備考
id buttonRetry ボタンを識別するためのIDを設定します。
ボタンがクリックされたかどうかを識別するためには、ボタンに設定したIDが必要になります。
src @drawable/button_retry イメージボタンで使用する画像を設定します。
background #00000000 イメージボタンの背景の色を設定します。
ここでは、背景の透過処理をおこなっています。

設定をおこない、編集画面が以下のような表示になれば完了です。

add-properties-of-the-buttonRetry

スワイプ画面のアクティビティを修正する

最後に、結果表示画面が表示できるようにスワイプ画面のアクティビティを修正しましょう。 今回はスワイプ画面上で画面をタッチし、垂直方向に一定距離以上指が上に動いたら、インテントを使っておみくじ結果画面に遷移できるようにします。

ソースコードを修正する

SwipeActivityの記述を一旦全て削除し、以下のソースコードをコピー&ペーストで貼り付けます。

[修正] SwipeActivity

[フォルダ] java/com.school.it.kanda.kandaomikuji

package com.school.it.kanda.kandaomikuji;

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


public class SwipeActivity extends AppCompatActivity  {

    private static final int SWIPE_MIN_DISTANCE_Y = 120; //縦の移動距離の最低値
    private static final int SWIPE_MAX_DISTANCE_X = 250; //横の移動距離の最高値
    private static final int SWIPE_THRESHOLD_VELOCITY_Y = 200; //縦の移動速度の最低値
    private GestureDetector mGestureDetector;

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

        mGestureDetector = new GestureDetector(getApplicationContext(), new GestureDetector.SimpleOnGestureListener() {

            /**
             * 画面をスワイプしたときに呼び出される処理
             * @param beforeEvent : 移動前の座標
             * @param afterEvent : 移動後の座標
             * @param velocityX : 横(X軸)の移動速度
             * @param velocityY : 横(Y軸)の移動速度
             * @return false
             */
            @Override
            public boolean onFling(MotionEvent beforeEvent, MotionEvent afterEvent, float velocityX, float velocityY) {

                // 横(X軸)の移動距離が大きすぎる場合は無視
                if (Math.abs(beforeEvent.getX() - afterEvent.getX()) > SWIPE_MAX_DISTANCE_X) {
                    return false;
                }

                //縦の移動距離が指定値より大きい、かつ縦の移動速度が指定値より大きいとき
                if (beforeEvent.getY() - afterEvent.getY() > SWIPE_MIN_DISTANCE_Y && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY_Y) {

                    //ResultActivityに遷移するように設定
                    Intent intent = new Intent(getApplicationContext(), ResultActivity.class);

                    //インテントの開始
                    startActivity(intent);

                    //SwipeActivityの終了
                    finish();
                }
                return false;
            }
        });

    }

    /**
     * 画面をタッチした時に呼び出される処理
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mGestureDetector.onTouchEvent(event);
    }

}

ここでは、まずスワイプ画面を表示している時に画面をタッチした場合、プログラム側で画面をタッチしたことを認識するようにしています。
画面がタッチされたことを認識したとき、タッチした指の位置情報を取得します。
また、指を離さずに画面上をスライドした時にも、プログラム側で指の位置が移動したことを認識するようにしています。
指の位置が動いたことを認識したとき、動いている途中の指の位置を情報を取得します。

35行目から52行の間で、画面をタッチしている指の位置が動いたときの処理を記述しています。
動いている指の位置を取得した後、画面をタッチした指の位置の座標を使って移動距離と移動速度を計算し、 一定距離以上指が動いたら、結果表示画面へインテントを使って画面遷移するようにしています。

実機で実行結果を確認

ソースコードの確認ができたら、一度実機上で実行してみましょう。
正しく画面遷移できていれば完了です。

step6-result
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.