アニメーションを使った Android アプリの作成

一番最初に作った Android アプリは画面に "Hello World!" と表示するだけのものでした。もう少し動きのあるアプリの方が面白いので、今回はアニメーションを使ったアプリを作ります。

プロジェクトの作成

今回のアプリは、ボールが転がっているように見えるアニメーションを実装します。まずは新規プロジェクトを作成します。

• Android Studio を起動し [Start a new Android Studio project] をクリック
  
  

• [Application name] に [Ball] と入力し [次へ] をクリック
  
• [Phone and Tablet] をチェックし [Minimum SDK] は [API 19: Android 4.4 (KitKat)] を選択し [次へ] をクリック
  
• [Blank Activity] を選択し [次へ] をクリック
  
• 全てそのままで [終了] をクリック
  

Ball クラスの作成

次に画面内を転がるボールのクラスを作成します。ボールは画面内での位置を示す座標と半径をメンバ変数として持ちます。また、ボール自体を画面内に描画するメソッドも持っています。

• 左端にある [1: Project] をクリック → [app] を右クリック → [新規] → [クラス] をクリック
  
  

• [Choose By Neighbor Class] タブをクリック → [MainActivity] を選択し [OK] をクリック
  
  

• [Name: ] に "Ball" と入力し [OK] をクリック
  

• "Ball.java" を以下のソースコードに書き換え

package com.example.ball;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class Ball extends View {
    int x, y, radius;
    Paint paint;

    public Ball(Context context) {
        super(context);
        radius = 30;
        x = y = 0;
        paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.FILL);
    }
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        canvas.drawCircle(x, y, radius, paint);
    }
}

アニメーションの実装

アニメーションを実現するには MainActivity に Runnable インタフェースを実装します。

• "MainActivity.java" を以下のソースコードに書き換え

package com.example.ball;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.Point;
import android.os.Bundle;
import android.os.Handler;
import android.view.Display;
import android.view.Window;
import android.view.WindowManager;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements Runnable {
    Ball ball;
    Handler handler;
    int width, height;
    int dx = 10, dy = 10, time = 10;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().addFlags(
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        RelativeLayout relativeLayout = new RelativeLayout(this);
        relativeLayout.setBackgroundColor(Color.GREEN);
        setContentView(relativeLayout);

        handler = new Handler();
        handler.postDelayed(this, time);

        WindowManager windowManager = 
                (WindowManager)getSystemService(WINDOW_SERVICE);
        Display display = windowManager.getDefaultDisplay();
        Point point = new Point();
        display.getSize(point);
        width = point.x;
        height = point.y;
        ball = new Ball(this);
        ball.x = width / 2;
        ball.y = height / 2;
        relativeLayout.addView(ball);
    }
    @Override
    public void run() {
        ball.x += dx;
        ball.y += dy;

        if (ball.x <= ball.radius) {
            ball.x = ball.radius;
            dx = -dx;
        } else if (ball.x >= width - ball.radius) {
            ball.x = width - ball.radius;
            dx = -dx;
        }

        if (ball.y <= ball.radius) {
            ball.y = ball.radius;
            dy = -dy;
        } else if (ball.y >= height - ball.radius) {
            ball.y = height - ball.radius;
            dy = -dy;
        }

        ball.invalidate();
        handler.postDelayed(this, time);
    }
    public void onDestroy() {
        super.onDestroy();
        handler.removeCallbacks(this);
    }
}

実行すると、芝生の上をゴルフボールが転がるようなアニメーションをします。画面の端まで到達すると跳ね返って転がり続ける様子も確認できます。

次は、作成したアプリを実機にインストールする手順を紹介します。