วิธีสร้าง Digital Speed Dashboard ใน Android

ตัวอย่าง: การสร้าง Digital Speed Dashboard

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio ไปที่ File → New Project แล้วกรอกรายละเอียดที่จำเป็น

ขั้นตอนที่ 2: เพิ่ม Dependency ใน build.gradle (Module: app)

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'
}

เพิ่ม Repository ใน build.gradle (Project Level)

// Top-level build file
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}
allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

สำคัญ: ต้องเพิ่ม maven { url 'https://jitpack.io' } เพื่อโหลด Library จาก GitHub

ขั้นตอนที่ 3: จัดการ Layout (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="เริ่ม Dashboard"
        android:textSize="25sp" />
</LinearLayout>

ใช้ Custom View DigitalSpeedDashboard จาก Library พร้อมกำหนดสีและขนาด

ขั้นตอนที่ 4: เขียนโค้ด 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();
            }
        });
    }
}

การทดสอบแอปพลิเคชัน

เชื่อมต่ออุปกรณ์ Android จริง ใน Android Studio คลิกไอคอน Run เลือกอุปกรณ์ แล้วตรวจสอบหน้าจอ

คลิก TextView จะเริ่ม Dashboard นับความเร็วจาก 0 ถึง 200 แล้วหยุด: