15分で作る?【 60秒ストップウォッチ 】

Android 開発【 60秒ストップウォッチ 】768

以前公開した【 アニメストップウォッチ 】に時間による変化を追加します。

具体的には60秒以降にはイラストを変えて、にゃんこが慌てます。

難易度:★★★☆☆

  1. コピペでの再現は可能
  2. Java初歩の知識でアレンジ可能

動画では「簡易的な解説」ですませ、皆さんの「PCで再現」を目指します。
理解やアレンジには、相当なスキルが必要ですので「RPGで学ぶ」や市販テキストの学習をオススメします。

以下の画像を追加します。
クリック後の画像を保存してください。

Android アプリ【タイトル素材】
cat0
Android アプリ【パラパラアニメ素材2】
cat2
Android アプリ【パラパラアニメ素材1】
cat1
cat3
cat3
cat4
cat4
<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"
    tools:context=".MainActivity">

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="スタート"
        android:textSize="40sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="ストップ"
        android:textSize="40sp" />

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

</LinearLayout>

少々ややこしいので、上から順に入力+解説していきます。


package com.test.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements Chronometer.OnChronometerTickListener {

    int x = 0;  // 表示回数カウント

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

    // スタート //////////////////////
    public void onStart(View v) {
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();
        ((Chronometer)findViewById(R.id.c)).setOnChronometerTickListener(this);
    }

    // ストップ ///////////////////////
    public void onStop(View v) {
        ((Chronometer)findViewById(R.id.c)).stop();
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat0);
    }

    // 定期処理(約1秒毎)//////////////////////
    @Override
    public void onChronometerTick(Chronometer chronometer) {

                x++;    // 表示回数カウントを+1

        // 表示タイム = ( 現在時刻 - アプリ起動時刻 ) / 1000
        long time = (SystemClock.elapsedRealtime() - chronometer.getBase()) / 1000;

        if( time < 60 ) {       // 60秒未満?
            if (x % 2 == 0) {   // 偶数?
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
            } else {
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat2);
            }
        } else {
            if (x % 2 == 0) { 
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat3);
            } else {
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat4);
            }
        }
    }
}