GraphLib: Pustaka Android open source untuk grafik

Grafik dan plot data adalah alat yang luar biasa untuk menggambarkan hubungan, menggambarkan tren data, dan melacak sasaran dalam aplikasi Android Anda. Saya melihat ini sendiri beberapa tahun yang lalu, ketika mantan murid saya memenangkan tempat pertama dalam kompetisi aplikasi seluler siswa yang disponsori oleh Asosiasi Kontraktor Pertahanan Charleston. Fitur utama dari aplikasi pemenang, "Diabetes and Me," adalah kemampuan untuk membuat grafik kadar gula harian.

Sebagai contoh lain, pertimbangkan aplikasi pelacakan berat yang memplot kemajuan terhadap bobot sasaran. Gambar 1 mengilustrasikan bagaimana tampilan aplikasi semacam itu di ponsel Android. Gambar tersebut menggunakan grafik garis merah untuk menunjukkan bobot bulanan rata-rata untuk tahun 2017. Ini menunjukkan bobot sasaran sebagai garis lurus hijau di dekat bagian bawah. (Meskipun nilai data yang ditampilkan dalam grafik garis bersifat hipotetis, nilai tersebut realistis untuk penulis artikel ini.)

John I. Moore

Dalam artikel ini, saya akan menggunakan pustaka sumber terbuka saya, GraphLib, untuk mendemonstrasikan dasar-dasar pembuatan grafik fungsi matematika di Android. Ini bukan perpustakaan grafik yang sama yang digunakan murid saya untuk aplikasinya. Faktanya, ini jauh lebih sederhana dan lebih mudah digunakan.

unduh Unduh GraphLib Dapatkan kode sumber untuk pustaka grafik Android sumber terbuka yang diperkenalkan di artikel ini. Dibuat oleh John I. Moore.

Tinjauan GraphLib

GraphLibterdiri dari satu antarmuka dan delapan kelas. Tiga dari kelas tersebut adalah internal perpustakaan dan hanya memiliki akses paket, jadi Anda tidak perlu memahaminya untuk menggunakan GraphLib. Dua dari kelas yang tersisa memiliki fungsi yang sangat sederhana, dan sisanya tidak sulit untuk diambil.

Di bawah ini saya akan menjelaskan antarmuka GraphLib dan masing-masing dari delapan kelasnya. Perhatikan bahwa saya menggunakan fitur Java 8 seperti antarmuka fungsional dan ekspresi lambda untuk mengembangkan dan menguji pustaka, tetapi relatif mudah untuk memodifikasi fitur ini untuk versi Java sebelumnya.

Antarmuka fungsional GraphLib

Seperti yang ditunjukkan pada Listing 1, antarmuka Functionhanya memiliki satu metode abstrak dan, oleh karena itu, merupakan antarmuka fungsional. Perhatikan bahwa antarmuka ini kira-kira setara dengan Java 8 DoubleUnaryOperator, ditemukan dalam paket java.util.function. Perbedaannya adalah Functiontidak menggunakan fitur Java 8 selain anotasi @FunctionalInterface. Menghapus anotasi ini adalah satu-satunya perubahan yang diperlukan untuk membuat Functionantarmuka kompatibel dengan versi Java sebelumnya.

Daftar 1. Fungsi antarmuka

 package com.softmoore.android.graphlib; @FunctionalInterface public interface Function { public double apply(double x); } 

Mempelajari tentang ekspresi lambda

Ekspresi lambda, juga dikenal sebagai closure, function literals, atau hanya lambda, mendeskripsikan sekumpulan fitur yang didefinisikan dalam Java Specification Request (JSR) 335. Perkenalan yang kurang formal untuk ekspresi lambda disediakan di bagian dari versi terbaru Tutorial Java; dalam artikel JavaWorld "Pemrograman Java dengan ekspresi lambda", dan dalam beberapa artikel oleh Brian Goetz, "Status lambda" dan "Status lambda: edisi Perpustakaan".

Kelas GraphLib

Kelas Pointdan Labelrelatif sederhana: Pointmerangkum sepasang nilai ganda yang mewakili titik di bidang x, y , dan Labelmerangkum nilai ganda dan string, di mana nilai ganda mewakili titik pada sumbu dan string digunakan untuk memberi label itu titik. Contoh pada Gambar 1 menggunakan titik untuk mendeskripsikan grafik garis dan label sumbu di bagian bawah, menunjukkan singkatan satu huruf untuk bulan. Saya akan memberikan lebih banyak contoh yang menggambarkan penggunaan kelas-kelas ini nanti di artikel.

Kelas GraphFunction,, GraphPointsdan ScreenPointtidak hanya sangat sederhana, mereka juga internal ke perpustakaan dan hanya memiliki akses paket. Anda tidak benar-benar perlu memahami kelas-kelas ini untuk menggunakan perpustakaan, jadi saya akan menjelaskannya secara singkat di sini:

  • GraphFunctionmerangkum fungsi (yaitu, kelas yang mengimplementasikan antarmuka Function) dan warna yang digunakan untuk menggambar fungsi itu.
  • GraphPointsmerangkum daftar titik bersama dengan warna yang digunakan untuk memplotnya. Kelas ini digunakan secara internal untuk memplot titik dan menggambar grafik garis.
  • ScreenPointmerangkum sepasang nilai integer yang mewakili koordinat piksel di layar perangkat Android. Kelas ini mirip dengan tetapi lebih sederhana daripada kelas Android Pointdalam paket android.graphics.

Saya telah memberikan kode sumber untuk kelas-kelas ini jika Anda tertarik dengan detailnya.

Tiga kelas yang tersisa di perpustakaan GraphLib yang Graph, Graph.Builder, dan GraphView. Penting untuk memahami peran yang dimainkan masing-masing dari mereka dalam aplikasi Android.

Class Graphberisi informasi tentang warna, titik, label, grafik, dll., Yang akan digambar, tetapi pada dasarnya tidak bergantung pada detail grafik Android. Meskipun Graphmemiliki banyak bidang, semuanya memiliki nilai default, dan oleh karena itu masuk akal untuk menggunakan pola Builder untuk membuat instance kelas ini. Kelas Graphberisi subkelas statis bersarang bernama Builder, yang digunakan untuk membuat Graphobjek.

Kedua kelas Graphdan Graph.Builderberjalan bersama, dari perspektif pengembang, dan harus dipahami, pada dasarnya, sebagai satu. Sebenarnya, Anda hanya perlu memahami cara menggunakan kelas bersarang Builderuntuk membuat Graphobjek. Pengembang tidak benar-benar melakukan apa pun secara langsung dengan Graphobjek setelah dibuat selain meneruskannya ke GraphViewobjek, yang berfungsi menampilkan semuanya di perangkat Android.

Daftar 2 merangkum metode yang tersedia di kelas Graph.Builder. Contoh selanjutnya akan mengilustrasikan cara menggunakan pola Builder untuk membuat Graphobjek. Untuk saat ini, cukup untuk dicatat bahwa, selain konstruktor default (baris pertama pada Listing 2) dan build()metode (baris terakhir pada Listing 2), semua metode lain mengembalikan Builderobjek tersebut. Ini memungkinkan panggilan berantai ke metode pembangun.

Daftar 2. Ringkasan metode di kelas Graph.Builder

 public Builder() public Builder addFunction(Function function, int graphColor) public Builder addFunction(Function function) public Builder addPoints(Point[] points, int pointColor) public Builder addPoints(List points, int pointColor) public Builder addPoints(Point[] points) public Builder addPoints(List points) public Builder addLineGraph(Point[] points, int lineGraphColor) public Builder addLineGraph(List points, int lineGraphColor) public Builder addLineGraph(Point[] points) public Builder addLineGraph(List points) public Builder setBackgroundColor(int bgColor) public Builder setAxesColor(int axesColor) public Builder setFunctionColor(int functColor) public Builder setPointColor(int pointColor) public Builder setWorldCoordinates(double xMin, double xMax, double yMin, double yMax) public Builder setAxes(double axisX, double axisY) public Builder setXTicks(double[] xTicks) public Builder setXTicks(List xTicks) public Builder setYTicks(double[] yTicks) public Builder setYTicks(List yTicks) public Builder setXLabels(Label[] xLabels) public Builder setXLabels(List xLabels) public Builder setYLabels(Label[] yLabels) public Builder setYLabels(List yLabels) public Graph build() 

Anda akan mencatat di Listing 2 bahwa banyak metode yang dibebani untuk menerima array objek atau daftar objek. Saya memberikan preferensi ke array di atas daftar untuk contoh dalam artikel ini, hanya karena jauh lebih mudah untuk menginisialisasi array, tetapi GraphLibmendukung keduanya. Namun, Java 9 akan berisi metode pabrik praktis untuk koleksi, sehingga menghilangkan keuntungan kecil ini untuk array. Jika Java 9 digunakan secara luas pada saat artikel ini ditulis, saya lebih suka daftar daripada array di kedua GraphLibdan contoh selanjutnya.

Pola Builder

Untuk mempelajari lebih lanjut tentang pola Builder, lihat edisi kedua dari Efektif Java oleh Joshua Bloch atau artikel JavaWorld "Terlalu banyak parameter dalam metode Java, Bagian 3: Pola pembuat" oleh Dustin Marx.

Kelas antarmuka pengguna di Android disebut tampilan , dan kelas Viewdalam paket android.viewadalah blok penyusun dasar untuk komponen antarmuka pengguna. Tampilan menempati area persegi panjang di layar, dan bertanggung jawab untuk menggambar dan menangani acara. Dari perspektif pewarisan, kelas Viewadalah kelas leluhur tidak hanya dari kontrol antarmuka pengguna (tombol, bidang teks, dll.) Tetapi juga dari tata letak, yang merupakan grup tampilan tak terlihat yang terutama bertanggung jawab untuk mengatur komponen anak mereka.

Kelas GraphViewmemperluas kelas Viewdan bertanggung jawab untuk menampilkan informasi yang dienkapsulasi di Graphlayar perangkat Android. Jadi, kelas GraphViewadalah tempat semua gambar berlangsung.

Menggunakan GraphLib

Ada dua pendekatan dalam membuat antarmuka pengguna untuk Android: pendekatan prosedural (dalam kode sumber Java) atau pendekatan deklaratif (dalam file XML). Salah satunya valid, tetapi konsensusnya adalah menggunakan pendekatan deklaratif sebanyak mungkin. Saya telah menggunakan pendekatan deklaratif untuk contoh saya.

Ada lima langkah dasar untuk menggunakan GraphLibperpustakaan. Sebelum Anda mulai, unduh kode sumber Java yang dikompilasi untuk pustaka GraphLib. 

download Download GraphLib.jar Dapatkan kode sumber Java yang telah dikompilasi untuk GraphLib. Dibuat oleh John I. Moore.

Langkah 1. Buat graphlib.jar tersedia untuk proyek Android Anda

Create a new project using Android Studio and copy the JAR file graphlib.jar to the libs subdirectory of your project's app directory. In Android Studio, switch the folder structure from Android to Project. Next, in the libs folder (nested within the app folder), right-click on the JAR file and click on Add as library. This last action will add the JAR file in the dependencies section of your app's build.gradle file. See "How to add a jar in external libraries in Android Studio" if you need help with this step.

Step 2. Create an Android activity that will use GraphLib

In Android applications, an activity represents a single screen with a user interface. Activities are defined primarily in two files: an XML file that declares the UI layout and components, and a Java file that defines runtime functionality such as event handling. When a new project is created, Android Studio usually creates a default activity named MainActivity. Use this activity or create a new one for your application.

Step 3. Add a GraphView to the layout for the activity

In the XML file for the activity's layout, you will declare a GraphView object in much the same way that you declare a button or a text view, except that you need to provide the full package name for the GraphView. Listing 3 shows an excerpt from a layout file that declares a GraphView followed by a TextView as part of a vertical linear layout. Following recommended practice, the actual values for the width and height of the GraphView are defined in separate dimen resource files, where different resource files provide values for different screen sizes/densities. (Note: I used 325 for both values in the examples below.)

Listing 3. Declaring a GraphView and a TextView in a layout XML file

Step 4. Import the library classes into the activity

Listing 4 shows the list of import statements for an application if the library classes are imported individually. The list of imports can be abbreviated to a single line as import com.softmoore.android.graphlib.* if desired. Personally, I prefer to see the expanded list as shown in Listing 4.

Listing 4. Import the library classes

 import com.softmoore.android.graphlib.Function; import com.softmoore.android.graphlib.Graph; import com.softmoore.android.graphlib.GraphView; import com.softmoore.android.graphlib.Label; import com.softmoore.android.graphlib.Point; 

Step 5. Create a Graph object and add it to the GraphView

Listing 5 shows the creation of a simple graph object--in this case a graph object that uses all of the default values. It essentially contains only a set of x- and y-axes, where the values on both axes range from 0 to 10. The listing also sets a title for the screen and text for the text view below the graph.

Listing 5. Create a Graph object and add it to the GraphView

 Graph graph = new Graph.Builder() .build(); GraphView graphView = findViewById(R.id.graph_view); graphView.setGraph(graph); setTitle("Empty Graph"); TextView textView = findViewById(R.id.graph_view_label); textView.setText("Graph of Axes"); 

Gambar 2 menunjukkan hasil dari menjalankan aplikasi ini di perangkat Android.

John I. Moore

Menggunakan GraphLib di aplikasi Android

Untuk sisa artikel ini saya akan fokus pada penggunaan dunia nyata pustaka GraphLib dalam pengembangan aplikasi Android. Saya akan menyajikan tujuh contoh dengan deskripsi singkat dan kutipan kode sumber. Perhatikan bahwa daftar kode Java untuk contoh ini difokuskan pada penggunaan Graph.Builderuntuk membuat Graphobjek yang sesuai . Panggilan ke findViewById(), setGraph(), setTitle(), dll, akan sama dengan yang ditunjukkan pada Listing 5 dan tidak termasuk dalam daftar kode.