Computer >> 컴퓨터 >  >> 프로그래밍 >> Android

안드로이드 앱에서 다양한 그래프 구현하는 방법 – GraphView 라이브러리 활용 가이드

안드로이드 앱을 개발하다 보면 센서 데이터, 통계 정보, 사용자 활동 기록 등을 시각적으로 표현해야 하는 경우가 많습니다. 이번 예제에서는 GraphView 오픈소스 라이브러리를 사용하여 안드로이드 앱에서 꺾은선 그래프(Line Graph)를 손쉽게 구현하는 방법을 단계별로 살펴보겠습니다.

1단계: 새 프로젝트 생성

Android Studio를 실행하고 File → New Project 메뉴로 이동한 후, 빈 Activity(Empty Activity) 템플릿을 선택하여 새 프로젝트를 생성합니다. 필요한 모든 세부 정보(프로젝트 이름, 패키지명, 언어 등)를 입력하고 프로젝트를 완성합니다.

2단계: Gradle 의존성 추가

그래프를 그리기 위해 GraphView 라이브러리가 필요합니다. build.gradle(Module: app) 파일의 dependencies 블록에 아래 의존성을 추가한 뒤, Sync Now를 클릭하여 프로젝트를 동기화하세요.

implementation 'com.jjoe64:graphview:4.2.1'

3단계: 레이아웃 XML 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가하여 화면에 GraphView 위젯을 배치합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16sp"
    tools:context=".MainActivity">

    <com.jjoe64.graphview.GraphView
        android:id="@+id/graph"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

4단계: MainActivity 코드 작성

src/MainActivity.java 파일에 아래 코드를 작성합니다. DataPoint 배열에 원하는 좌표값(x, y)을 넣으면 해당 데이터가 꺾은선 그래프로 화면에 표시됩니다.

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.jjoe64.graphview.GraphView;
import com.jjoe64.graphview.series.DataPoint;
import com.jjoe64.graphview.series.LineGraphSeries;

public class MainActivity extends AppCompatActivity {

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

        GraphView graph = findViewById(R.id.graph);

        LineGraphSeries<DataPoint> series = new LineGraphSeries<>(new DataPoint[] {
                new DataPoint(0, 1),
                new DataPoint(1, 5),
                new DataPoint(2, 3),
                new DataPoint(3, 2),
                new DataPoint(4, 6)
        });

        graph.addSeries(series);
    }
}

5단계: AndroidManifest.xml 확인

androidManifest.xml 파일에는 아래와 같이 MainActivity가 정상적으로 등록되어 있는지 확인합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 스마트폰을 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 안드로이드 앱에서 다양한 그래프 구현하는 방법 – GraphView 라이브러리 활용 가이드 아이콘을 클릭하세요. 실행 기기 목록에서 본인의 모바일 기기를 선택하면, 아래와 같은 그래프가 화면에 표시됩니다.

안드로이드 앱에서 다양한 그래프 구현하는 방법 – GraphView 라이브러리 활용 가이드

추가 팁: 더 다양한 그래프 스타일

GraphView 라이브러리는 꺾은선 그래프 외에도 다양한 시각화 옵션을 제공합니다.

  • 막대 그래프(BarGraphSeries): 데이터를 막대 형태로 비교할 때 유용합니다.
  • 점 그래프(PointsGraphSeries): 개별 데이터 포인트만 점으로 표시할 수 있습니다.
  • 실시간 데이터 갱신: appendData() 메서드를 활용하면 센서 값처럼 실시간으로 변하는 데이터를 동적으로 그릴 수 있습니다.
  • 그래프 커스터마이징: setTitle(), setDrawDataPoints(), GridLabelRenderer 등을 사용해 제목, 축 레이블, 색상 등을 자유롭게 조정할 수 있습니다.

이처럼 GraphView 라이브러리를 활용하면 복잡한 Canvas 드로잉 없이도 몇 줄의 코드로 전문적인 그래프 UI를 완성할 수 있습니다. 여러분의 앱에 데이터 시각화 기능을 추가해 보세요!