From b452d4498abca569a248a042a72ed11ff97c85fb Mon Sep 17 00:00:00 2001 From: Igor Timofeev Date: Sat, 3 Jun 2017 19:45:18 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A4=D1=83-=D1=83-=D1=83=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Documentation/GUI.md | 72 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 66 insertions(+), 6 deletions(-) diff --git a/Documentation/GUI.md b/Documentation/GUI.md index ea47f636..ec138c27 100644 --- a/Documentation/GUI.md +++ b/Documentation/GUI.md @@ -176,16 +176,19 @@ GUI.**layout**( x, y, width, height, columns, rows ): *table* container | *int* | columnCount | Количество рядов сетки | | *int* | rowCount | Количество строк сетки | -Layout является наследником GUI.**container**, автоматически располагающий дочерние объекты внутри себя. К примеру, если вам хочется визуально красиво отобразить множество объектов, не тратя время на ручной расчет координат, то layout создан для вас. +Layout является наследником GUI.**container**, автоматически располагающим дочерние объекты внутри себя. К примеру, если вам хочется визуально красиво отобразить множество объектов, не тратя время на ручной расчет координат, то layout создан для вас. На картинке ниже хорошо поясняется суть: +![Imgur](http://i.imgur.com/SuNHweA.png?1) +Видно, что имеется layout, состоящий из 9 ячеек, каждая из которых может иметь собственную ориентацию объектов, расстояние между ними, а также выравнивание. Границы ячеек условны, и существуют лишь для расчета позиции дочерних объектов, так что дочерние объекты могут без проблем выходить за них. | Тип свойства | Свойство |Описание | | ------ | ------ | ------ | | *int* | .**columnCount**| Количество рядов сетки | | *int* | .**rowCount**| Количество строк сетки | -| *function* | :**setCellPosition**(*int* column, *int* row, *object* child): *object* child| Назначить дочернему объекту layout конкретную ячейку сетки. В одной ячейке может располагаться сколь угодно много объектов. | -| *function* | :**setCellDirection**(*int* column, *int* row, *enum* direction): *layout* layout | Назначить ячейке сетки метод отображения дочерних объектов. Поддерживаются GUI.directions.horizontal и GUI.directions.vertical | -| *function* | :**setCellSpacing**(*int* column, *int* row, *int* spacing): *layout* layout | Назначить ячейке сетки расстояние в пикселях между объектами. По умолчанию оно равняется 1 | | *function* | :**setGridSize**(*int* columnCount, *int* columnCount): *layout* layout | Установить размер сетки. Все объекты, находящиеся вне диапазона нового размера, должны быть размещены в сетке заново через :**setCellPosition**() | +| *function* | :**setCellPosition**(*int* column, *int* row, *object* child): *object* child| Назначить дочернему объекту layout конкретную ячейку сетки. В одной ячейке может располагаться сколь угодно много объектов. | +| *function* | :**setCellDirection**(*int* column, *int* row, *enum* direction): *layout* layout | Назначить ячейке сетки ориентацию дочерних объектов. Поддерживаются GUI.directions.horizontal и GUI.directions.vertical | +| *function* | :**setCellAlignment**(*int* column, *int* row, *enum* GUI.alignment.vertical, *enum* GUI.alignment.horizontal): *layout* layout | Назначить ячейке сетки метод выравнивания дочерних объектов. Поддерживаются все 9 вариантов | +| *function* | :**setCellSpacing**(*int* column, *int* row, *int* spacing): *layout* layout | Назначить ячейке сетки расстояние в пикселях между объектами. По умолчанию оно равняется 1 | Пример реализации layout: ```lua @@ -197,7 +200,7 @@ local mainContainer = GUI.fullScreenContainer() mainContainer:addChild(GUI.image(1, 1, require("image").load("/MineOS/Pictures/Raspberry.pic"))) mainContainer:addChild(GUI.panel(1, 1, mainContainer.width, mainContainer.height, 0x000000, 40)) --- Добавляем к контейнеру layout с сеткой 5x1 +-- Добавляем к контейнеру layout с сеткой размером 5x1 local layout = mainContainer:addChild(GUI.layout(1, 1, mainContainer.width, mainContainer.height, 5, 1)) -- Добавяляем в layout 9 кнопок, назначая им соответствующие позиции в сетке @@ -238,6 +241,7 @@ layout:setCellPosition(3, 1, layout.children[9]) ![Imgur](http://i.imgur.com/QD0BqWx.png?1) +Более подробно работа с layout рассмотрена в практическом примере 4 в конце документа. Методы для создания виджетов ====== @@ -1187,4 +1191,60 @@ end ![enter image description here](http://i90.fastpic.ru/big/2017/0402/96/96aba372bdb3c1e61007170132f00096.png) -Как видите, в создании виджетов нет совершенно ничего сложного, главное - обладать информацией по наиболее эффективной работе с библиотекой. +Как видите, в создании собственных виджетов нет совершенно ничего сложного, главное - обладать информацией по наиболее эффективной работе с библиотекой. + +Практический пример #4 +====== + +Предлагаю немного попрактиковаться в использовании layout. В качестве примера создадим контейнер-окно, в котором нам не придется ни разу вручную считать координаты при измененнии его размеров. + +```lua +local buffer = require("doubleBuffering") +local GUI = require("GUI") + +--------------------------------------------------------------------- + +-- Создаем полноэкранный контейнер, добавляем на него изображение с малиной и полупрозрачную черную панель +local mainContainer = GUI.fullScreenContainer() + +-- Добавляем в главный контенер другой контейнер, который и будет нашим окошком +local window = mainContainer:addChild(GUI.container(2, 2, 80, 25)) +-- Добавляем в контейнер-окно светло-серую фоновую панель +local backgroundPanel = window:addChild(GUI.panel(1, 1, window.width, window.height, 0xCCCCCC)) + +-- Добавляем layout размером 3x1 чуть меньший, чем размер окна +local layout = window:addChild(GUI.layout(3, 2, window.width - 4, window.height - 2, 3, 1)) + +-- В ячейку 2х1 добавляем загруженное изображение и label с определенным текстом +layout:setCellPosition(2, 1, layout:addChild(GUI.image(1, 1, image.load("/MineOS/System/OS/Icons/Steve.pic")))) +layout:setCellPosition(2, 1, layout:addChild(GUI.label(1, 1, 10, 1, 0x0, "Картиночка" ):setAlignment(GUI.alignment.horizontal.center, GUI.alignment.vertical.top))) +-- В ячейке 2х1 задаем вертикальную ориентацию объектов и расстояние между ними в 1 пиксель +layout:setCellDirection(2, 1, GUI.directions.vertical) +layout:setCellSpacing(2, 1, 1) + +-- В ячейку 3х1 добавляем 3 кнопки +layout:setCellPosition(3, 1, layout:addChild(GUI.adaptiveButton(1, 1, 3, 0, 0xFFFFFF, 0x000000, 0x444444, 0xFFFFFF, "Подробности"))) +layout:setCellPosition(3, 1, layout:addChild(GUI.adaptiveButton(1, 1, 3, 0, 0xFFFFFF, 0x000000, 0x444444, 0xFFFFFF, "Отмена"))) +layout:setCellPosition(3, 1, layout:addChild(GUI.adaptiveButton(1, 1, 3, 0, 0x3392FF, 0xFFFFFF, 0x444444, 0xFFFFFF, "OK"))).onTouch = function() + -- При нажатии на кнопку "ОК" наше окно растянется на 10 пикселей + window.width, backgroundPanel.width, layout.width = window.width + 10, backgroundPanel.width + 10, layout.width + 10 + mainContainer:draw() + buffer.draw() +end +-- В ячейке 3ч1 задаем горизонтальную ориентацию объектов, расстояние между ними в 2 пикселя, а также выравнивание по правому верхнему краю +layout:setCellDirection(3, 1, GUI.directions.horizontal) +layout:setCellSpacing(3, 1, 2) +layout:setCellAlignment(3, 1, GUI.alignment.horizontal.right, GUI.alignment.vertical.bottom) + +mainContainer:draw() +buffer.draw(true) +mainContainer:startEventHandling() +``` + +В результате получаем симпатичное окошко с тремя кнопками, автоматически расположенными в его правой части: + +![Imgur](http://i.imgur.com/aCB4FDU.png?1) + +Если несколько раз нажать на кнопку "ОК", то окошко растянется, однако все объекты останутся на законных местах. Причем без каких-либо хардкорных расчетов вручную: + +![Imgur](http://i.imgur.com/MyMiiDU.png?1) \ No newline at end of file