Android studio работа с графикой

Работаем с графикой. Основы

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

Создадим новый проект SimplePaint. Создадим новый класс Draw2D, который будет наследоваться от View. Именно в этом классе мы и будем проводить графические опыты. Щёлкаем правой кнопкой мыши на имени пакета и выбираем в меню New | Kotlin Class/File или New | Java Class. В открывшемся диалоговом окне устанавливаем имя для класса Draw2D.

В данном коде мы наследуемся от класса android.view.View и переопределяем метод класса onDraw().

Далее необходимо загрузить созданный класс при старте программы. Открываем основной файл активности MainActivity и заменяем строчку после super.onCreate(savedInstanceState):

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

Подготовительные работы закончены. Перейдём к графике. Весь дальнейший код мы будем писать в классе Draw2D. Совсем коротко о теории рисования. Для графики используется холст Canvas — некая графическая поверхность для рисования. Прежде чем что-то рисовать, нужно определить некоторые параметры — цвет, толщина, фигура. Представьте себе, что вы рисуете на бумаге и в вашем распоряжении есть цветные карандаши, фломастеры, кисть, циркуль, ластик и т.п. Например, вы берёте толстый красный фломастер и рисуете жирную линию, затем берёте циркуль с жёлтым карандашом и рисуете окружность. Улавливаете аналогию? Теория закончена.

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

Итак, холст готов. Далее начинается собственно рисование. Следуя описанному выше принципу мы задаём перед каждым рисованием свои настройки и вызываем нужный метод. Например, для того, чтобы нарисовать жёлтый, круг мы включаем режим сглаживания, устанавливаем жёлтый цвет и вызываем метод drawCircle() с нужными координатами и заливаем окружность выбранным цветом. Получилось симпатичное солнышко.

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

Для рисования зелёного прямоугольника мы также задаём координаты и цвет. У нас получится красивая лужайка.

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

При желании можно вывести текст под углом. Пусть это будет лучик солнца.

И завершим нашу композицию выводом рисунка из ресурсов.

В данном примере я вручную подбирал размеры и координаты фигур для экрана свого телефона. В реальных приложениях необходимо сначала вычислить размеры экрана у пользователя, а потом уже выводить фигуры в соответствии с полученными результатами. Иначе получится так, что некоторые элементы композиции просто не попадут на экран при вращении устройства. Допустим, в альбомном режиме вы установите у точки X значение 800, но в портретном режиме ширина экрана будет, скажем, 480, и точка окажется вне поле зрения. Поэтому следует позаботиться о вычислениях размеров экрана и плясать от этой печки. Ниже представлен немного переделанный вариант для общего понимания.

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

Источник

Графика

Пакет 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 отвечает за растровые картинки.

Источник

Графики MPAndroidChart в Android Studio

Для рисования графиков будем использовать библиотеку MPAndroidChart с 25 тысячами звезд на GitHub.

Справочная информация

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

Создание болванки

Создадим для примера пустое приложение в Android Studio с LinearLayout и кнопкой, для которой подготовим слушателя клика.

Файл MainActivity.java (без строки package ):

Подключение библиотеки

На странице библиотеки посмотрите текущее описание подключения библиотеки:

И в файле настроек Gradle скопируйте два куска кода в указанные ниже ан рисунке места и синхронизируйте проект:

Попробуйте запустить проект на эмуляторе или физическом устройстве:

Если всё запустилось хорошо, то всё отлично. Но у меня вылетает такая ошибка:

Для этого в том же файле Gradle нужно прописать еще такие строки в разделе android :

Добавьте их именно в раздел android :

После этого синхронизируйте Gradle и запустите проект. Если вы видите пустое приложение с кнопкой, то всё хорошо:

Если вылетит ошибка с подобным сообщением, то просто перезапустите Android Studio, откройте проект и запустите заново приложение:

Создание компонента графика

Для разных видов графиков существуют свои компоненты, которые описаны в документации. Мы хотим написать приложение, в которых выводятся обычные линейные графики в виде линий. Поэтому добавим в activity_main.xml компонент com.github.mikephil.charting.charts.LineChart :

Как всегда, в коде активности создадим переменную для добавленного компонента и свяжем с XML элементом через findViewByID() :

Добавление графика с данными

Теперь в коде клика кнопки пропишем код добавления данных:

Две линии на графике

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

Настройка графиков

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

Это можно сделать следующим кодом:

Полный вариант кода клика кнопки:

Полные коды активности

Полные коды

Файл MainActivity.java (без строки package ):

Для рисования графиков будем использовать библиотеку MPAndroidChart с 25 тысячами звезд на GitHub.

Для рисования графиков будем использовать библиотеку MPAndroidChart с 25 тысячами звезд на GitHub.

Источник

Библиотека GraphView

Библиотека для построения графиков двух видов.

Официальная страница

Готовую библиотеку можно скачать по адресу http://android-graphview.org/. Также есть страница на Гитхабе с открытыми исходниками.

Работаем с библиотекой

Скопируем библиотеку в папку libs вашего проекта.

Подключение происходит следующим образом. Вы создаёте макет экрана на основе LinearLayout и программно подключаете нужный класс к данному контейнеру.

Осталось написать код для активности. Нужно указать данные для графика, а компонент постарается автоматически вычислить доступный ему размер и пропорционально разместить данные для сетки, а затем нарисует график. Начнём с линейной графики.

Чтобы линейный график заменить на гистрограмму (или как он там называется?), то нужно заменить класс LineGraphView на BarGraphView:

На графике видно, что понедельник — день тяжёлый и кот поймал только три мышки. Потом обычные трудовые будни, в пятницу кот уже ждёт предстоящих выходных и работает спустя рукава. Ну а в субботу и воскресенье он отказывается работать, ссылаясь на трудовой кодекс и угрожая пожаловаться в Общество защиты животных. Бездельник!

Также существуют различные методы для управления стилями: цветом, размерами и т.п. Примеры можно посмотреть на сайте автора.

Источник

Записки разработчика

Посвящаю разработке ПО и всего с ним связанного

Основы работы с графикой Android (часть 1)

Сентябрь 26th, 2011 § 2 comments

Здравствуй читатель, это начало цикла статей по работе с платформой Android. Я постараюсь излагать интересные вещи, т.к. в рунете не так много информации по работе с платформой. Много букав, давай ближе к делу. Я предполагаю, что у тебя уже стоит Eclipse + ADT , ты более или менее владеешь основами работы платформы (если нет то можешь, отправится на офф сайт, там много полезной инфы гайды, документация, форум, если с английским не очень то поищи книги наших соотечественников, но большинство из них пока оставляет желать лучшего). Первое что мы сейчас сделаем это простой вывод изображения в рабочую область. Сразу хочу предупредить, что это по большей части перевод или рерайт вот этого урока (хотел было присвоить себе лавры, но так и не смог не хорошо это).

Первым делом мы создаем свой класс унаследованный от Activity. В конструкторе указываем, какой layout использовать для вывода. В настройках layout’а укажите свойства wrap_content в layout_width и layout_height, тогда ваш layout растянется по всей поверхности экрана, ниже привожу, как это выглядит у меня в xml. Вам не обязательно ковырять xml в ручную, достаточно воспользоваться визуальным редактором, щелкнув правой клавишей на рабочей области layout’а установив галочку в

Layout Width->Wrap Content

Layout Height ->Wrap Content

Следующим делом нам нужно создать класс унаследованный от View и переопределить там метод отрисовки.

В этом коде мы в конструкторе вызываем базовый конструктор View это обязательно, тут же можно сделать дополнительную инициализацию переменных, но у нас их пока нет. Что же происходит в методе onDraw? Мы загружаем картинку из ресурсов, заполняем фон черным цветом и выводим, загруженное изображение в координатах 10,10. Координатная сетка начинается в левом верхнем углу с координатами (0,0) нижний правый (width-1,heaight-1). Полный листинг

Из всего, что здесь приведено не понятным может быть разве что, загрузка изображения, первое, что нужно знать это Android поддерживает следующие форматы графических файлов jpg,png,gif. Изображения хранятся в папке res/drawable, при добавлении изображения класс R автоматически пере компилируется и мы получаем доступ к изображению. Есть некоторые ограничения по именованию, а именно это только строчные буквы, цифры и символ подчеркивания. Для того что бы проект собрался вам нужно положить графический файл в поддерживаемом формате в папку res/drawable.

Источник