Java android app graphics

Графика

Пакет android.graphics имеет все необходимые библиотеки для работы с двухмерной графикой. Существует несколько подходов для рисования графики.

Для рисования простой графики, которая не будет динамически изменяться во время работы приложения, обычно используют класс, наследующий от View и задействуют метод onDraw().

В метод передаётся объект Canvas, у которого есть различные графические методы.

Стандартная реализация подобного подхода выглядит следующим образом:

В методе setContentView() вместо ссылки на разметку передаётся класс MyView, наследующий от View:

В методе onDraw() можете рисовать:

Для рисования динамической графики больше подойдёт класс SurfaceView, имеющий дополнительные возможности. Данному классу мы посвятим отдельный материал.

Класс Color

Класс Color отвечает за цвета. Цвета можно описывать четырьмя числами в формате ARGB, по одному для каждого канала(Alpha, Red, Green, Blue).

Класс Paint

Класс Paint содержит стили, цвета и другую графическую информацию для рисования графических объектов. Он позволяет выбирать способ отображения графических примитивов, которые вы рисуете на объекте Canvas с помощью методов. Изменяя объект Paint, можно контролировать цвет, стиль, шрифт и специальные эффекты, используемые при рисовании. Например, чтобы установить сплошной цвет для рисования линии, нужно вызвать метод Paint.setColor().

В этом примере мы использовали готовую константу. Также можно указать 32-битное целое число, закодированное в схеме ARGB8888.

Можно установить цвет через его составляющие:

Стиль объекта Paint, задаваемый с помощью метода setStyle(), позволяет рисовать либо очертания графического примитива (STROKE), либо его заливку (FILL), либо и то, и другое сразу (STROKE_AND_FILL).

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

Использование полупрозрачности

Любой цвет в Android содержит свойство прозрачности (альфа-канал). Указать его можно при создании описывающей цвет переменной, используя методы argb() и parseColor():

Но мы можем задать прозрачность уже существующего объекта Paint с помощью метода setAlpha():

Пример использования метода setAlpha() для наложения двух картинок.

Режим Xfermode

Изменение режима Xfermode для объекта Paint влияет на способ наложения новых цветов поверх уже нарисованных. В обычных обстоятельствах при рисовании поверх имеющегося рисунка создастся новый верхний слой. Если новый объект Paint на 100% непрозрачный, он полностью закрасит все, что находится под областью для рисования; если он полупрозрачный, то только затенит лежащие ниже цвета. Подклассы Xfermode позволяют изменить такое поведение.

• AvoidXfermode. Определяет цвет, поверх которого объект Paint не может (или наоборот — может только поверх него) рисовать. Задается также параметр tolerance, указывающий на допустимое отклонение.
• PixelXorXfermode. Применяет простое побитовое исключение (XOR) при рисовании поверх существующих цветов.
• PorterDuffXfermode. Мощный режим, с помощью которого можно использовать любое из шестнадцати правил смешивания изображений Портера-Даффа, управляя процессом наложения кисти на уже существующий рисунок.

Для того чтобы применить один из этих режимов, используйте метод setXferMode():

Сглаживание

При создании нового объекта Paint вы можете передать в его конструктор несколько флагов, которые будут влиять на способ отображения. Одним из наиболее интересных из них считается флаг ANTI_ALIAS_FLAG, обеспечивающий сглаживание диагональных линий, рисуемых объектом Paint (снижая при этом производительность).

Сглаживание играет важную роль в процессе отрисовки текста, значительно упрощает его восприятие. Чтобы сделать текст более гладким, можете использовать флаг SUBPIXEL_TEXT_FLAG, который применяет субпиксельное сглаживание. Можно задать оба этих флага программно, используя методы setSubpixelText() и setAntiAlias():

Класс Path

Класс Path позволяет рисовать контуры разных типов — пунктиры, сглаживание линий и т.д.

Класс Canvas

Класс Canvas представляет собой специальную поверхность (холст), на которой вы можете рисовать. С помощью многочисленных методов класса вы можете рисовать линии, окружности, дуги и так далее.

Класс Bitmap

Класс Bitmap отвечает за растровые картинки.

Источник

Добавление диаграмм в приложение для Android с помощью MPAndroidChart

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

Предпосылки

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

1. Добавление MPAndroidChart в проект

Чтобы использовать эту библиотеку в своем проекте Android, вам нужно всего лишь:

1. Загрузите последнюю версию библиотеки из Github. На момент написания последней версии была 1.7.4.
2. Скопируйте файл mpandroidchartlibrary-1-7-4.jar в каталог libs вашего проекта.
3. В Android Studio щелкните правой кнопкой мыши файл JAR и выберите Добавить как библиотеку.

2. Создание DataSet

Все данные должны быть преобразованы в объект DataSet , прежде чем он может использоваться диаграммой. Различные типы диаграмм используют разные подклассы класса DataSet . Например, BarChart использует экземпляр BarDataSet . Аналогично, PieChart использует экземпляр PieDataSet .

Вместо того, чтобы просто иметь дело со случайными числами для создания образца диаграммы, давайте рассмотрим гипотетический сценарий. Алиса и Боб — друзья. Алиса звонит Бобу несколько раз в месяц, чтобы узнать, что он делает. Боб делает заметку, когда она называет его.

В этом уроке мы используем примечания Боба для создания диаграммы, чтобы показать количество раз, когда Алиса звонила Бобу. Вот что записал Боб:

Месяц	Количество звонков
январь	4
февраль	8
март	6
апрель	12
май	18
июнь	9

Гистограмма кажется идеальной для данных такого типа. Чтобы отобразить данные на диаграмме, нам нужно создать экземпляр BarDataSet . Вы можете выполнить те же действия для создания экземпляров других подклассов DataSet .

Каждое отдельное значение необработанных данных должно быть представлено как Entry . ArrayList таких объектов Entry используется для создания DataSet . Давайте создадим несколько объектов BarEntry и добавим их в ArrayList :

Теперь, когда объекты ArrayList из Entry готовы, мы можем создать DataSet :

3. Определение меток X-Axis

Мы уже добавили несколько значений в нашу диаграмму, но они не будут иметь большого смысла для пользователя, если мы не дадим им значимые метки. Каждая метка оси x представлена с использованием String , а ArrayList используется для хранения всех меток.

4. Создание графика

Все диаграммы этой библиотеки являются подклассами ViewGroup , что означает, что вы можете легко добавить их в любой макет. Вы можете определить свою диаграмму с помощью файла XML или кода Java. Если диаграмма займет весь экран Activity или Fragment , то проще всего использовать Java-код:

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

Давайте также добавим описание к диаграмме.

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

5. Использование цветовых шаблонов

Если вам не нравятся цвета по умолчанию, вы можете использовать метод setColors класса DataSet для изменения цветовой схемы. Тем не менее, MPAndroidChart также поставляется с несколькими предопределенными цветовыми шаблонами, которые позволяют изменять внешний вид вашего набора данных без необходимости иметь дело с отдельными значениями цвета.

В текущей версии этой библиотеки доступны следующие шаблоны:

• ColorTemplate.LIBERTY_COLORS
• ColorTemplate.COLORFUL_COLORS
• ColorTemplate.JOYFUL_COLORS
• ColorTemplate.PASTEL_COLORS
• ColorTemplate.VORDIPLOM_COLORS

Чтобы связать шаблон цвета с набором данных, вам необходимо использовать метод setColors . Вот пример:

Запустите приложение еще раз, чтобы увидеть график с более яркими цветами.

6. Добавление анимаций

Все диаграммы этой библиотеки поддерживают анимацию, которую вы можете использовать, чтобы сделать ваши диаграммы более живыми. Метод animateXY используется для анимации обеих осей диаграммы. Если вы хотите анимировать только одну из осей, вы можете использовать animateX или animateY для анимации оси x или оси y соответственно. Вы должны указать продолжительность (в миллисекундах) анимации при вызове этих методов. Например, чтобы анимировать ось y, добавьте следующий фрагмент кода:

7. Использование ограничивающих линий

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

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

8. Сохранение диаграммы как изображение

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

У вас есть два способа выбора:

• saveToGallery Этот метод сохраняет вашу диаграмму в виде файла JPEG. Он также позволяет указать качество или степень сжатия изображения.
• saveToPath Этот метод сохраняет вашу диаграмму в виде PNG-файла в указанном вами пути.

Например, чтобы сохранить диаграмму в виде файла JPEG, вы можете использовать следующий фрагмент кода:

Заключение

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

Источник

Ещё немного о 2D графике под Android

Здравствуйте, читатели Хабра!

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

Немного теории

1) Обычно при поиске основ 2D графики под Android вы встретите примеры расширения класса View. В этом случае мы, по сути, рисуем статичную картинку, либо выводим уже существующую.

2) Рисование происходит с использованием класса Canvas. Если обратиться к аналогии, то это — ваш холст, на котором вы, словно вдохновлённый музой художник, творите свои шедевры. Мы в этом топике шедевры творить не будем, но основы взаимодействия постараемся обозначить.

3) Вывод рисунка на экран происходит добавлением объекта созданного класса на экран.

Напомню, что про основы графики в Android уже шла речь. Давайте немного дополним существующую статью.

Возникшая проблема

Увлечённо проделывая различные интересные и не очень задания, я столкнулся с задачей, поставившей меня в тупик. Её суть состояла в том, что необходимо было выводить наши «шедевры» непосредственно на уже созданную область, изменять рисунки по нажатию кнопки и прочие довольно тривиальные с первого взгляда вещи.

Радостно вздохнув, я понёсся штудировать мануалы и не нашёл ничего, что помогло бы мне в этом деле, потому что, в основном, все ссылки пестрели выводом непосредственно класса, расширяющего View, а не добавлением его на существующую область.

Теперь, когда мы определили задачу, приступим к её решению.

Решение задачи

Для того, чтобы проиллюстрировать работу, сформулируем задание. Пусть на каждое нажатие кнопки у нас выводится треугольник.

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

Великолепно. Теперь нам необходимо создать кнопку, на которую мы и будем кликать. Идём в /res/layout/activity_main.xml и дописываем необходимые данные. Например, так:

Здесь TextView1 — стандартный, оставшийся от дефолтного проекта. Теперь, при нажатии на кнопку, будет вызываться метод onClick, который и должен будет выводить на экран новый треугольник.

Некоторое время поискав в Сети, мне не удалось найти примеров, когда класс, расширяющий View рисовал бы на уже существующим layout, потому, поломав голову, я решил немного переработать уже существующую задачу.

Для начала создадим второй класс, назвав его, например, DrawTriangles, конструктор и метод onDraw, где, собственно, будем рисовать.

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

Все приготовления готовы, можно орудовать с главным классом.

Добавляем метод onClick:

Теперь нам необходимо по его вызову добавить на экран нарисованный треугольник. Очевидно, что для этого понадобится объект класса DrawTriangles

Теперь необходимо добавить полученный элемент на экран. Нам известен метод setContentView, но он не добавляет элементы, а заменяет ими всё остальное, потому нам не подходит. Подумав, я пришёл к выводу, что, наверняка, существует метод addContentView. И, о правда, такой метод существует. Давайте его рассмотрим:

Первый элемент — то, что мы будем добавлять, а второй — параметры его отображения. Нам необходимо вывести треугольник, потому не будем особенно извращаться:

Великолепно. Теперь осталось только запустить приложение и полюбоваться тем, что получилось.

Результаты

И после нажатия на кнопку (у меня выводится другой треугольник! В данном топике описано построение прямоугольного треугольника):

Надеюсь, что это поможет кому-нибудь, кто, как и я, будет искать необходимый материал, но уже не потратит время на подобные манипуляции. Успеха!

Источник