개요
이 글에서는 안드로이드 앱에서 디지털 속도 대시보드(DigitalSpeedDashboard)를 만드는 방법을 단계별로 살펴봅니다. GitHub의 오픈소스 라이브러리인 ngallazzi/DigitalSpeedDashboard를 JitPack 저장소를 통해 가져와 사용하는 방식입니다.
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 파일을 열고 아래 내용을 추가합니다. 핵심은 allprojects → repositories에 maven { url 'https://jitpack.io' }를 포함시키는 것입니다. JitPack은 GitHub 저장소의 라이브러리를 Gradle 의존성으로 손쉽게 불러올 수 있게 해주는 저장소입니다.
// 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
}3단계: 레이아웃 작성
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 하나가 배치되어 있습니다. 사용자가 TextView를 클릭하면 디지털 대시보드가 시작됩니다. idleColor 속성은 게이지의 빈 영역 색상을, speedColor 속성은 속도 숫자의 색상을 지정합니다.
4단계: MainActivity 코드 작성
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으로 설정했습니다. TextView를 클릭하면 별도의 스레드가 시작되어 속도 값을 10밀리초 간격으로 1씩 증가시키며 대시보드에 반영하고, 속도가 200에 도달하면 스레드를 종료합니다.
앱 실행 및 결과 확인
이제 앱을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하고, 실행할 모바일 기기를 선택합니다. 그러면 기기에 아래와 같은 초기 화면이 표시됩니다.
사용자가 "Start Dashboard" 텍스트를 클릭하면 디지털 대시보드가 시작되어 속도가 점차 올라가고, 최종적으로 200에 도달하면 멈춥니다. 아래 화면과 같습니다.
