[pro_grammer]

Создаем простую программу для рисования для Android – PaintDroid



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

1. Файл иконки проекта. Напомню, что найти его можно бесплатно на www.iconfinder.com
2. Среда программирования Basic4Android, желательно версии не древнее 3.**
3. Библиотеки Core (есть по умолчанию) и Dialogs


Запускаем исполняемый файл Basic4android.exe любым удобным вам способом. Меняем в меню Project->Package name на Paint.Droid. Напомню, что каждое приложение в Android идентифицируется по уникальному имени пакета. Это строка, состоящая из нескольких слов, разделенными точками.
Срока должна содержать как минимум две части. Вы не сможете установить два разных приложения с одинаковым именем пакета на одно устройство. Вернее ваше устройство подумает, что это обновление и заменит старое на новое приложение.
Устанавливаем нашу иконку меню Project->Choose Icon и заменить имя и версию под спойлером Project Attributes

#ApplicationLabel: B4A Example -> Меняем на PaintDroid
	#VersionCode: 1 -> это пока лучше не менять
	#VersionName: -> тут можно поставить версию 0.01

#ApplicationLabel – это имя будет названием нашей программы в списке программ, под иконкой программы, когда мы её установим в устройство (или эмулятор)
Мы должны сохранить наш проект в надежное место. Для этого выберите меню File - Save. Рекомендуется сохранять каждую отдельную программу в свою собственную папку.
Создайте новую папку: " PaintDroid ", откройте ее и сохраните программу как "PaintDroid“. В папке будут созданы ещё 2 основные папки Files, Objects с подпапками и файл PaintDroid.b4a
Запускаем свой эмулятор или подключаем своё реальное устройство при помощи B4A-Bridge или просто из меню Tools - Run AVD Manager.




Приступаем к проектированию дизайна нашей программы. Запускаем дизайнер из главного меню-> Designer

Тут сразу меняем Title Activity-> PaintDroid Эта надпись будет видна в работающем приложении.

В нашем приложении будет 1 элемент – Panel, добавим её из меню AddView->Panel и растянем на весь экран. Тут мы и будем рисовать. Рисовать удобно в планшетном варианте, для этого добавим New Variant -> 480х320, т.е планшетный вариант, в этом варианте измените положение панели в соответствии с экраном.
Закрепляем результат – сохраняем в файл с именем Layout1. Если с другим, то запомните – потом пригодится. Этот файл будет в папке File с именем Layout1.bal
Идем в редактор кода и раскоментируем эту строчку
'Activity.LoadLayout("Layout1")
Если сохранили с другим именем, то вставляйте своё.

Sub Activity_Create(FirstTime As Boolean)
	'Do not forget to load the layout file created with the visual designer. For example:
	Activity.LoadLayout("Layout1")

End Sub

В этом проекте у нас появляется новый элемент – модуль. Как и в случае с VB6, модули добавляются к проекту через меню. В данном случае это Project -> Add New Module-> Code Module. Один и тот же модуль можно использовать в различных своих проектах многократно, просто подключив его. Это обычный текстовый файл, имеющий расширение .bas
Создайте новый модуль с именем «SignatureCapture»

'Code module
Sub Process_Globals
	Dim px, py As Int
	Type SignatureData (Canvas As Canvas, Panel As Panel, SignatureColor As Int, SignatureWidth As Int)
	Dim color As Int
	End Sub

Sub Panel_Touch(SD As SignatureData, x As Int,y As Int, Action As Int)
    SD.SignatureColor = color
	If Action = 0 Then 'mouse down constant
		px = x
		py = y
	Else
		SD.Canvas.DrawLine(px, py, x, y, SD.SignatureColor, SD.SignatureWidth)
		SD.Panel.Invalidate
		px = x
		py = y
	End If
End Sub
Sub Clear(SD As SignatureData)
	SD.Canvas.DrawColor(Colors.White)
	SD.Panel.Invalidate
End Sub
Sub Save(SD As SignatureData, Dir As String, Name As String)
	Dim out As OutputStream
	out = File.OpenOutput(Dir, Name, False)
	SD.Canvas.Bitmap.WriteToStream(out, 100, "PNG")
	out.Close
End Sub

Sub SetColor
    Dim cd As ColorPickerDialog
	
	cd.RGB = Colors.Black
	ret = cd.Show("Цвет линии", "Применить", "", "Отмена", Null)	
	
	color = cd.RGB
End Sub

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

Переходим на основной код. Объявляем переменные и настраиваем форму диалога для загрузки и сохранения файлов. Я выбрал png файлы, но можно работать и с jpg!

Sub Globals
	'These global variables will be redeclared each time the activity is created.
	'These variables can only be accessed from this module.
      Dim Panel1 As Panel
	Dim Canvas1 As Canvas
	Dim SD As SignatureData 'This object holds the data required for SignatureCapture
	' For Paint
	Dim fdp As FileDialog
	fdp.FastScroll = True
	fdp.KeyboardPopUp = True
	fdp.FilePath = File.DirRootExternal ' also sets ChosenName to an emtpy string
	fdp.FileFilter = ".png" ' for example or ".jpg,.png" for multiple file types
    Dim ret As Int
End Sub

Что у нас есть? С панелью всё понятно. Далее Canvas1 – это как раз тот контекст, на котором мы и будем рисовать, а SD это объект, в котором будут хранится данные для рисования.
Код при запуске приложения

Sub Activity_Create(FirstTime As Boolean)
	'Do not forget to load the layout file created with the visual designer. For example:
	Activity.LoadLayout("Layout1")
	If File.ExternalWritable = False Then
        Msgbox("Нет доступа к записи на карту памяти.", "PaintDroid")'"Cannot write on storage card."
		Activity.Finish
        Return
    End If
	Panel1.SetLayout(0%x, 0%y, 100%x, 100%y)' Растягиваем панель на весь экран
    Canvas1.Initialize(Panel1)
	SD.Initialize
	SD.Canvas = Canvas1
	SD.Panel = Panel1
	SD.SignatureColor = Colors.Black ' Начальный цвет черный
	SD.SignatureWidth = 3dip 'Толщина линии
	
	' Menu 
    Activity.AddMenuItem("Цвет","mnuColor") ' Adds menu 
    Activity.AddMenuItem("Новый","mnuNew") ' Adds menu 
    Activity.AddMenuItem("Загрузить файл","mnuOpen") ' Adds menu 
    Activity.AddMenuItem("Сохранить файл","mnuSave") ' Adds menu 
	
End Sub

Проверяем, есть ли у устройства возможность записывать изображения:
If File.ExternalWritable = False
Далее, вне зависимости от размеров экрана ( если помните, то у нас 480х320, для современных устройств это крайне мало!) растягиваем панель на весь экран:
Panel1.SetLayout(0%x, 0%y, 100%x, 100%y)

Устанавливаем начальный цвет линии, которой будем рисовать и её толщину.

 SD.SignatureColor = Colors.Black ' Начальный цвет черный
	SD.SignatureWidth = 3dip 'Толщина линии

Добавляем 4 пункта меню. Как делать меню с иконками было в прошлый раз, теперь без иконок ( но вы можете импровизировать!)
Процедура, которая обрабатывает нажатие на экан

Sub Panel1_Touch (Action As Int, X As Float, Y As Float)
	SignatureCapture.Panel_Touch(SD, X, Y, Action)
End Sub

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

Sub ReadPaintExample
    Dim Bild As Bitmap 
	Dim DisRect As Rect
	
	ret = fdp.Show("Загрузить png", "", "Нет", "Да", Null)	
	If ret = -2 Then
	 Bild.Initialize(File.DirRootExternal,fdp.ChosenName )
	 DisRect.Initialize(0,0,Bild.Width,Bild.Height)
	 SD.Canvas.DrawBitmap( Bild, Null, DisRect)
	 Activity.Invalidate ' обновляем изображение на экране
	 	Else
	'ToastMessageShow("Загрузка отменена!", True)	' на некоторых устройствах с сообщением бывают проблеммы!
	End If
	
	
End Sub

При нажатии на пункт меню “Загрузить файл” вызываем эту процедуру:
Sub mnuOpen_Click
ReadPaintExample
End Sub
Сохраняем созданный файл, используем тот же диалог выбора файла:

Sub mnuSave_Click
    ret = fdp.Show("Сохранить как", "", "Нет", "Да", Null)	
	If ret = -2 Then
	SignatureCapture.Save(SD, File.DirRootExternal, fdp.ChosenName) 
	ToastMessageShow("Сохранено в : " & File.Combine(File.DirRootExternal, fdp.ChosenName), True)
		Else
	ToastMessageShow("Сохранение отменено!", True)	' на некоторых устройствах с сообщением бывают проблеммы!

	End If

End Sub

Очистка изображения и смена цвета линии. Эти процедуры описаны в модуле, из меню мы их только вызываем:

Sub mnuNew_Click
  SignatureCapture.Clear(SD)
End Sub

Sub mnuColor_Click
  SignatureCapture.SetColor
End Sub

Для смены цвета линии для рисования мы применяем ColorPickerDialog ( см. код модуля)


Что в итоге получилось:


Как можно развивать приложение?
Рисовалка у нас есть, а вот стиралки нет. Стирать можно так же как и рисовать, выбирая цвет фона. Чтобы не менять каждый раз Цвет кисти-> Цвет фона лучше вывести эту функцию отдельно.
Раз уже заговорили о цвете фона, то его тоже можно менять-выбирать в начале рисования.

Рисование примитивов – овал, квадрат, линия. К примеру, круг:
SD.Canvas.DrawCircle(150dip,150dip,20dip,Colors.Re d,False,10dip)

Смотрите свойства SD.Canvas. – после точки выплывает подсказка со всеми возможностями.
Меню может существенно увеличится, и потому управление процессом лучше организовать кнопками, которые расположить по нижнему краю панели.
Т.о. можно создать приложение отличной функциональности за короткий срок и очень компактное по размеру. Готовый apk всего около 135 КБ.
В приложении все материалы + готовый отдельный apk