【Android開発】DigitalSpeedDashboardの作り方をステップ別に解説

はじめに

本記事では、AndroidアプリにDigitalSpeedDashboard(デジタル速度ダッシュボード)を実装する方法を、サンプルコードとともに段階的に解説します。外部ライブラリ「ngallazzi/DigitalSpeedDashboard」を活用することで、自動車のスピードメーターのようなスタイリッシュなデジタル表示を、少ないコード量で簡単に実現できます。

ステップ1：新規プロジェクトの作成

まず、Android Studioで新しいプロジェクトを作成しましょう。File → New Project を選択し、必要な項目をすべて入力してプロジェクトを作成してください。

ステップ2：ライブラリの依存関係を追加

次に、build.gradle(アプリレベル)を開き、以下のようにライブラリの依存関係を追加します。

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 19
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    configurations {
        cleanedAnnotations
        compile.exclude group: 'org.jetbrains' , module:'annotations'
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.github.ngallazzi:DigitalSpeedDashboard:master-SNAPSHOT'
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
   implementation 'org.jetbrains:annotations-java5:15.0'
}

続いて、build.gradle(プロジェクトレベル)を開き、JitPackリポジトリを追加します。これは外部ライブラリをGitHub経由で取得するために必要な設定です。

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
   repositories {
      google()
      jcenter()
   }
   dependencies {
      classpath 'com.android.tools.build:gradle:3.2.1'
      // NOTE: Do not place your application dependencies here; they belong
      // in the individual module build.gradle files
   }
}
allprojects {
   repositories {
      google()
      jcenter()
      maven { url 'https://jitpack.io' }
   }
}
task clean(type: Delete) {
   delete rootProject.buildDir
}

編集後は必ずSync Nowをクリックして、Gradleの同期を行ってください。

ステップ3：レイアウトファイル(activity_main.xml)の作成

res/layout/activity_main.xmlに、以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:orientation = "vertical"
   tools:context = ".MainActivity">
   <com.ngallazzi.speedandrpmdashboard.DigitalSpeedDashboard
      android:id = "@+id/srDashboard"
      android:layout_width = "350dp"
      android:layout_height = "350dp"
      app:idleColor = "#35ABABAB"
      android:background = "#000000"
      app:speedColor = "#FFFFFF"/>
   <TextView
      android:id = "@+id/text"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:text = "Start Dashboard"
      android:textSize = "25sp" />
</LinearLayout>

このコードでは、画面にTextViewとDigitalSpeedDashboardを縦方向(LinearLayout)に配置しています。ダッシュボードは350dp四方のサイズで、背景色は黒、速度表示色は白に設定されています。ユーザーがテキストビューをクリックすると、デジタル速度ダッシュボードが起動する仕組みです。

ステップ4：MainActivity.javaの実装

src/MainActivity.javaに、以下のコードを追加します。

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;
import com.ngallazzi.speedandrpmdashboard.DigitalSpeedDashboard;
public class MainActivity extends AppCompatActivity {
    TextView text;
    int speed;
    boolean time;
    DigitalSpeedDashboard digitalSpeedDashboard;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        text = findViewById(R.id.text);
        digitalSpeedDashboard = findViewById(R.id.srDashboard);
        digitalSpeedDashboard.setMaxSpeed(200);
        text.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        time = true;
                        while (time) {
                            speed++;
                            digitalSpeedDashboard.setSpeed(speed);
                            try {
                                Thread.sleep(10);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                            if (speed == 200) {
                                time = false;
                                speed = 0;
                            }
                        }
                    }
                }).start();
            }
        });
    }
}

処理のポイントを整理すると、以下の通りです。

• setMaxSpeed(200)で、ダッシュボードの最高速度を200に設定しています。
• テキストビューをクリックすると、バックグラウンドスレッドが開始され、10ミリ秒ごとに速度値を1ずつ増加させます。
• 速度が200に達するとループを抜け、ダッシュボードの更新が停止します。

なお、UIコンポーネントの操作をスレッドから直接行うのは推奨されないため、実運用ではrunOnUiThread()やHandlerを使うとより安全です。

アプリの実行と動作確認

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンがパソコンに接続されていることを前提としています。Android Studioからアプリを起動するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーのRun(実行)アイコンをクリックします。表示された候補から自分のモバイルデバイスを選択すると、端末に以下のような初期画面が表示されます。

この画面でテキストビューをタップすると、デジタルダッシュボードが起動し、速度カウンターが動き出します。

その後も速度は順調に上昇していきます。

最終的に速度が200に到達すると、ダッシュボードは自動的に停止します。

まとめ

本記事では、外部ライブラリ「DigitalSpeedDashboard」を使って、Androidアプリにデジタル速度ダッシュボードを実装する流れを紹介しました。Gradleへの依存追加、レイアウトXMLへのカスタムビュー配置、スレッドによる速度更新という3つの基本ステップを押さえれば、誰でも簡単にスピードメーター風のUIを構築できます。ぜひ色やサイズのカスタマイズにも挑戦してみてください。