Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android SDK: создание приложения для рисования - сенсорное взаимодействие

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Create a Drawing App on Android.
Android SDK: Create a Drawing App - Interface Creation
Android SDK: Create a Drawing App - Essential Functionality

Russian (Pусский) translation by Elen (you can also view the original English article)

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


Формат урока

Данный урок по созданию приложения для рисования будет состоять из трех частей:


Просмотр конечного результата

Drawing App

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


1. Подготовка к рисованию

Шаг 1

В прошлый раз мы создали класс с именем «DrawingView», который представляет собой пользовательский View для функций рисования, которые должны выполняться внутри. Мы создали схему объявления класса и метод с именем «setupDrawing» - вот сейчас мы сделаем это. В своем классе DrawingView добавьте следующие операторы импорта:

Затем добавьте некоторые переменные экземпляра в верхней части класса:

Когда пользователь прикасается к экрану и перемещает палец, чтоб рисовать, мы будем использовать Path для отслеживания его действий рисования на холсте. Как холст, так и рисунок поверх него представлены объектами Paint. Начальный цвет краски соответствует первому цвету в палитре, которую мы создали в последний раз, и которая будет первоначально выбрана при запуске приложения. Наконец, мы объявляем переменные для холста и растрового изображения: пути пользователя, нарисованные с помощью drawPaint, будут нарисованы на холсте, который нарисован canvasPaint.

Шаг 2

Давайте создадим в методе setupDrawing некоторые из этих переменных, чтобы установить класс для рисования. Сначала создайте объекты рисования Path и Paint:

Затем установите начальный цвет:

Теперь задайте начальные свойства пути:

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

Завершите метод setupDrawing, создав экземпляр объекта Paint:

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

Шаг 3

Нам нужно переопределить несколько методов, чтобы сделать пользовательскую функцию View в виде чертежа. Во-первых, все еще находясь внутри класса DrawingView, переопределите метод onSizeChanged, который будет вызываться, когда пользовательскому View присваивается размер:

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

Теперь создайте холст для рисования и растрового изображения, используя значения ширины и высоты:

Шаг 4

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

Внутри метода нарисуйте холст и путь рисования:

Пока мы еще не реализовали возможность для пользователя рисовать путь с помощью Paint, но как только мы это сделаем, он будет представлен в View. Каждый раз, когда пользователь рисует с помощью сенсорного взаимодействия, мы аннулируем View, заставляя выполняться метод onDraw.


2. Содействие рисованию

Шаг 1

Когда чертеж View находится на экране приложения, мы хотим, чтобы пользователь касался его для регистрации в качестве операций рисования. Для этого нам нужно проследить сенсорные события. В своем классе drawingView добавьте следующий метод:

Внутри метода извлеките X и Y позиции  касания пользователя:

Шаг 2

Параметр MotionEvent в onTouchEvent методе позволит нам реагировать на определенные события прикосновения. Действия, в которых мы заинтересованы, чтобы применить рисование, - down, move и up. Добавьте оператор switch в метод для ответа на каждый из следующих:

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

Шаг 3

После оператора switch завершите метод, сделав недействительным View и вернув истинное значение:

Вызов invalidate вызовет выполнение метода onDraw.


3. Выбор цветов

Шаг 1

Теперь давайте реализуем возможность пользователя выбирать цвета из палитры. В главном Activity приложения добавьте следующие импорты:

Добавьте в класс следующую переменную экземпляра:

Это представляет экземпляр пользовательского View, который мы добавили в макет. Внутри onCreate, после существующего кода, создайте эту переменную, извлекая ссылку на нее из макета:

Теперь у нас есть View, который отображается в Activity, на котором мы можем вызвать методы в классе DrawingView.

Шаг 2

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

Внутри onCreate мы теперь хотим получить первую кнопку цвета краски в области палитры, которая изначально будет выбрана. Сначала найдите Linear Layout, содержащуюся внутри:

Получите первую кнопку и сохраните ее как переменную экземпляра:

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

Добавьте этот файл в чертежи вашего приложения, указав ему имя "paint_pressed.xml"  и введя следующую форму:

Это очень похоже на «paint.xml»,  который мы создали в последний раз, но с темным цветом вокруг краски.

Шаг 3

Теперь мы можем позволить пользователю выбирать цвета. Когда в последний раз мы создавали макет, мы указали атрибут onClick для кнопок цветовой палитры; теперь добавьте метод в свой основной класс Activity:

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

Внутри блока if найдите тег, который мы установили для каждой кнопки в макете, представляя выбранный цвет:

Для установки цвета нам нужно использовать собственный класс View. Перейдите в класс DrawingView и добавьте следующий метод:

Внутри метода начните с аннулирования View:

Затем выполните анализ и установите цвет для рисования:

Вернемся к нашему основному Activity и в методе paintClicked, после получения тега цвета, вызовите новый метод на пользовательский чертежный объект View:

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


Вывод

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.