Как быстро реализовать красивые диаграммы в приложении для Android

Люди в основном воспринимают информацию визуально: видео, фотографии и диаграммы привлекают внимание и объясняют вещи лучше, чем простые числа или слова. Вот почему многие приложения используют яркие и четкие диаграммы для представления информации. В этой статье мы узнаем, как добавлять диаграммы в ваше приложение, не тратя много времени (и, следовательно, денег) на их разработку.

Зачем и где использовать диаграммы?

Графики стали чрезвычайно популярным элементом современного дизайна пользовательского интерфейса в мобильных приложениях. Есть много способов использовать их в своем приложении, и есть еще больше способов сделать свои диаграммы гладкими и красивыми.

У диаграмм есть преимущества, которые делают этот способ представления информации одним из лучших:

Визуальный. Согласно многочисленным исследованиям, люди воспринимают визуальную информацию намного лучше, чем любую другую информацию. Например, исследование ученых из Университета Миннесоты показало, что люди обрабатывают визуальные эффекты в 60 000 раз быстрее, чем текст. Это означает, что добавление диаграммы в ваше мобильное приложение сделает информацию более понятной и, следовательно, улучшит взаимодействие с пользователем.
Оптимизация места. Диаграмма также может быть компактным способом представления информации. Вместо использования таблиц просто внедрите диаграммы и освободите место на экране.

Вы можете использовать диаграммы для отображения большого количества информации. Например, Apple использует диаграммы в Apple Watch для отображения фитнес-информации.

Вы также можете использовать диаграммы в банковском приложении или приложении для управления личными финансами, чтобы отображать расходы и доход:

Графики можно использовать в приложениях для мобильной аналитики и маркетинга:

И есть бесчисленное множество случаев, когда вы можете использовать диаграммы в своем мобильном приложении. Эти типы приложений часто используют диаграммы:

Банковское дело и личные финансы
Фитнес и питание
Аналитика
Логистика
Социальные медиа
Управление батареей
Тайм-менеджмент
Интернет вещей
Бизнес и менеджмент

Вы можете найти множество творческих способов использования диаграмм и в других типах мобильных приложений.

Теперь давайте поговорим о том, как реализовать диаграмму в мобильном приложении и не тратить на нее много времени на разработку.

Простое решение для вашего приложения

Создание диаграммы с использованием графики может занять много времени, продлить разработку и увеличить затраты. Чтобы избежать этого, вы можете использовать библиотеку с открытым исходным кодом для создания диаграмм. В сети их уже много, и вы можете выбрать любой. В этой статье мы рассмотрим MPAndroidChart от Фила Джея. Это новинка по сравнению с другими библиотеками диаграмм, и мне она нравится, потому что она стабильна. Со мной согласны более 3000 пользователей GitHub. С помощью этой библиотеки вы можете без особых усилий создавать различные виды настраиваемых диаграмм. Вы также можете добавлять анимации и настраивать их.

Теперь я покажу вам, как рисовать диаграммы на Android с помощью этой библиотеки. В этой статье мы сосредоточимся на простой гистограмме с анимацией, но сначала давайте рассмотрим, какие типы диаграмм доступны в этой библиотеке.

Библиотека MPAndroidChart

Все, что вам нужно знать о MPAndroidChart, - это то, что это один из самых простых способов добавления диаграмм в ваше приложение и что он работает с Android API 8 и выше. Если вы хотите использовать анимацию, вам понадобится API 11 или выше.

Анимации - это ключевой элемент пользовательского интерфейса современных мобильных приложений, поэтому очень приятно иметь их в этой библиотеке. Вы найдете более 25 встроенных анимаций, но если вам нужно что-то особенное, вы также можете добавить собственные. Так что же можно построить с помощью MPAndroidChart?

Простая гистограмма
Сгруппированная линейчатая диаграмма
Горизонтальная гистограмма
Простая линейная диаграмма
График с кубическими линиями
Сгруппированная линейная диаграмма
Комбинированная линейная и гистограмма
Круговая диаграмма
Точечная диаграмма
Свечной график
Радарная диаграмма

В этом уроке мы построим сгруппированную линейчатую диаграмму с анимацией, подобную показанной здесь:

Как шаг за шагом интегрировать анимированный график

Шаг 1

Для начала добавьте эти строки в свой файл gradle:

build.gradle (app)
repositories {
    maven { url "https://jitpack.io" }
}
dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

Шаг 2

Создайте макет для вашего MPAndroidChart:

activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".MainActivity">
 
    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</RelativeLayout>

Как вы можете видеть на приведенном выше макете, я использовал тег com.github.mikephil.charting.charts.BarChart xml для создания гистограммы Android.

Шаг 3

Теперь посмотрим на код активности:

MainActivity.java
Java

package com.truiton.mpchartexample;
 
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
 
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
 
import java.util.ArrayList;
 
public class MainActivity extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BarChart chart = (BarChart) findViewById(R.id.chart);
 
        BarData data = new BarData(getXAxisValues(), getDataSet());
        chart.setData(data);
        chart.setDescription("My Chart");
        chart.animateXY(2000, 2000);
        chart.invalidate();
    }
 
    private ArrayList getDataSet() {
        ArrayList dataSets = null;
 
        ArrayList valueSet1 = new ArrayList();
        BarEntry v1e1 = new BarEntry(110.000f, 0); // Jan
        valueSet1.add(v1e1);
        BarEntry v1e2 = new BarEntry(40.000f, 1); // Feb
        valueSet1.add(v1e2);
        BarEntry v1e3 = new BarEntry(60.000f, 2); // Mar
        valueSet1.add(v1e3);
        BarEntry v1e4 = new BarEntry(30.000f, 3); // Apr
        valueSet1.add(v1e4);
        BarEntry v1e5 = new BarEntry(90.000f, 4); // May
        valueSet1.add(v1e5);
        BarEntry v1e6 = new BarEntry(100.000f, 5); // Jun
        valueSet1.add(v1e6);
 
        ArrayList valueSet2 = new ArrayList();
        BarEntry v2e1 = new BarEntry(150.000f, 0); // Jan
        valueSet2.add(v2e1);
        BarEntry v2e2 = new BarEntry(90.000f, 1); // Feb
        valueSet2.add(v2e2);
        BarEntry v2e3 = new BarEntry(120.000f, 2); // Mar
        valueSet2.add(v2e3);
        BarEntry v2e4 = new BarEntry(60.000f, 3); // Apr
        valueSet2.add(v2e4);
        BarEntry v2e5 = new BarEntry(20.000f, 4); // May
        valueSet2.add(v2e5);
        BarEntry v2e6 = new BarEntry(80.000f, 5); // Jun
        valueSet2.add(v2e6);
 
        BarDataSet barDataSet1 = new BarDataSet(valueSet1, "Brand 1");
        barDataSet1.setColor(Color.rgb(0, 155, 0));
        BarDataSet barDataSet2 = new BarDataSet(valueSet2, "Brand 2");
        barDataSet2.setColors(ColorTemplate.COLORFUL_COLORS);
 
        dataSets = new ArrayList();
        dataSets.add(barDataSet1);
        dataSets.add(barDataSet2);
        return dataSets;
    }
 
    private ArrayList getXAxisValues() {
        ArrayList xAxis = new ArrayList();
        xAxis.add("JAN");
        xAxis.add("FEB");
        xAxis.add("MAR");
        xAxis.add("APR");
        xAxis.add("MAY");
        xAxis.add("JUN");
        return xAxis;
    }
}

В результате получится такая великолепно выглядящая гистограмма:

Позвольте мне объяснить, как работает библиотека MPAndroidChart. Как показано в классе выше, сначала инициализируется BarChart. Затем данные генерируются в соответствии с гистограммой с помощью класса BarEntry. Это подкласс класса Entry, который является базовым классом для всех типов данных диаграммы в библиотеке MPAndroidChart.
Кроме того, этот BarEntry добавляется в BarDataSet. Затем все эти значения вместе со значениями оси X устанавливаются на гистограмме с помощью метода chart.setData (data). Теперь, чтобы гистограмма отражала эти последние данные, нам нужно вызвать метод chart.invalidate (). В результате получится великолепно выглядящая гистограмма, показанная выше.

Как я уже упоминал, библиотеку MPAndroidChart можно настраивать. Давайте посмотрим на некоторые из его ключевых особенностей.

MPAndroidChart анимации

Для анимации диаграммы из библиотеки MPAndroidChart используются следующие методы:

chart.animateX (2000) - для анимации по оси X
chart.animateY (2000) - для анимации по оси Y
chart.animateXY (2000, 2000) - для анимации по оси XY.

Приведенный выше код добавит стандартную анимацию. Но если вы хотите изменить стиль анимации или создать собственную анимацию, обратитесь к этой странице. Обратите внимание, что анимация будет работать только с API 11 и выше.

Цвета MPAndroidChart

При создании диаграмм на Android с помощью библиотеки MPAndroidChart вы также можете изменить цвет полос на диаграмме, используя следующие методы:

setColor - используется для установки одного цвета для всего набора данных.
setColors - используется для выделения записей разным цветом в наборе данных.

Эти методы используются при создании объекта DataSet, показанного выше.

Заключение

MPAndroidChart - отличная библиотека, которая может помочь разработчикам создавать красивые, настраиваемые и анимированные диаграммы всего за несколько шагов. В этой статье я показал вам, как построить гистограмму, но вы можете создавать все виды диаграмм для своего приложения - просто измените имена классов. В большинстве случаев вам не нужно ничего менять: библиотека MPAndroidChart создана таким образом, что во все диаграммы вы вводите информацию одинаково.

Если у вас есть какие-либо вопросы по интеграции или использованию диаграмм в вашем мобильном приложении, не стесняйтесь обращаться в Mobindustry за бесплатной консультацией. Будем рады помочь.

Получите бесплатную консультацию!
[email protected]

Https://www.mobindustry.net/how-to-quickly-implement-beautiful-charts-in-your-android-app/

Как быстро реализовать красивые диаграммы в приложении для Android