Кнопка

15.05.2020

Для создания кнопок используется конструктор CreateButton:

app.CreateButton ( str text, float width, float height, [(str)] options )

Параметры:

text - надпись на кнопке

width - ширина кнопки

height - высота кнопки

options:

Опции управления отображением:
- Alum – алюминиевый стиль
- Bar-dark - закруглённая тёмная
- Bar-green - закруглённая зелёная
- Bar-gray - закруглённая светло-серая
- Custom – пользовательский стиль
- Gray – серый стиль
- Grayxs - светло-серый стиль
- Lego - оранжевая кнопка в стиле Лего
- Lego-bw - белая кнопка в стиле Лего
- Lego-screen - оконная кнопка в стиле Лего
- Nopad - без внутренних отступов
- Trans - прозрачный стиль
Опции управления размером:
- FillX - установить ширину равной ширине его родителя
- FillY - установить высоту равной высоте его родителя
- FillXY - установить размер компоновщика равной размерам родителя
Опции оформления надписи:
- FontAwesome – разрешает использовать пиктограммы в надписи
- Html – разрешает использовать следующие теги в надписи:
  - <a href="...">
  - <img src="...">
  - <font color="..." face="...">
  - <b>, <u>, <i>, <strong>, <tt>
  - <small>, <big>
  - <br>
  - <div>, <p>
  - <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  - <sub>, <sup>
- Monospace - задаёт моноширинный шрифт для надписи
- Singleline - задаёт однострочную надпись
Опции действий:
- Link - задание метода для движения NXT
- NoSound - не воспроизводить звук при нажатии

При отсутствиии всех вараметров создаётся кнопка с надписью "undefined". В DroidScript можно создавать кнопки по умолчанию разных стилей и пользовательские при помощи дополнительных опций конструктора а также методов.

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

Базовый пример

Выполнить в DS

var myObject = null;
var customObject = null;

function OnStart(){

var _layMain = (function(){
    	var _object = app.CreateLayout( "linear", "VCenter,FillXY" );
        return _object;
    })();

// кнопка по умолчанию
	_layMain.AddChild( (function(){
    	var _object = app.CreateButton( "Кнопка по умолчанию", 0.7, -1, 'html' );
        myObject = _object;
        return _object;
    })());

// кнопка в алюминиевом стиле
	_layMain.AddChild( (function(){
    	var _object = app.CreateButton( "Алюминиевый стиль", 0.7, -1, 'Alum');
        return _object;
    })());
    
    // кнопка в сером стиле
	_layMain.AddChild( (function(){
    	var _object = app.CreateButton( "Серый стиль", 0.7, -1, 'Gray');
        return _object;
    })());

// пользовательский стиль
	_layMain.AddChild( (function(){
    	var _object = app.CreateButton( "Пользовательский стиль", 0.7, -1, 'Custom');
        return _object;
    })());
    
    // кнопка по умолчанию с тегами
	_layMain.AddChild( (function(){
    	var _object = app.CreateButton( '<b>Кнопка</b> <u>c</u><br><i>тегами<i>', 0.7, -1, 'html');
        return _object;
    })());

// кнопка по умолчанию с пиктограммой
	_layMain.AddChild( (function(){
    	var _object = app.CreateButton( 'Кнопка с пиктограммами ' + 
    	'[fa-bars] [fa-gear] [fa-play] [fa-list] ', 0.7, -1, 'html, fontawesome');
        return _object;
    })());

var _layBack = (function(){
    	var _object = app.CreateLayout( "linear", 'vCenter' );
    	_object.SetSize( -1, 0.1 );
    	_object.SetBackColor( '#ffffffff' );
        return _object;
    })();
    
    // пользовательская кнопка
    var _text = "<font color='#ff0000'>К</font><font color='#00ff00'>нопка</font>";
    
	_layBack.AddChild( (function(){
    	var _object = app.CreateButton( _text, 0.7, -1, 'Custom, html');
    	_object.SetTextShadow( 2, 2, 1, "#666666" ); // тень у надписи
    	// цвет 1, цвет 2, радиус углов, цвет рамки, ширина рамки, тень
    	_object.SetStyle( "#ffffff", "#cccccc", 30, "#ffff0000", 2, 1 );
        customObject = _object;
        return _object;
    })());

_layMain.AddChild( _layBack );
    app.AddLayout( _layMain );
    
}

Тень в стиле кнопоки осуществляет только затенение углов.

Кнопки можно создавать разной формы:

прямоугольные

квадратные

пилюлеобразные

круглые

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

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

Выполнить в DS

function OnStart()
{
    // компоновщик белого фона
	var _layLight = (function(){
    	var _object = app.CreateLayout( "absolute", "vertical" );
        _object.SetBackColor( "white" );
        _object.SetPadding( 0.1, 0.1, 0.1, 0.1 );
        return _object;
    })();

// кнопка серого цвета закруглёнными углами в качестве фона
	_layLight.AddChild( (function(){
    	var _object = app.CreateButton( "", 0.7, 0.4, "Custom" );
        _object.SetStyle( "#666666", "#666666", 20, 0, 0, 0 );
        return _object;
    })() );
   
    // внутренний компоновщик для выравнивания элементов
	var _layInner = (function(){
    	var _object = app.CreateLayout( "linear", "VCenter,fillXY" );
        _object.SetSize( 0.7, 0.4);
        return _object;
    })();

// текст
	_layInner.AddChild( (function(){
    	var _object = app.CreateText( "Привет!" );
        _object.SetTextColor( '#ffffffff' );
        _object.SetTextSize( 24 );
        return _object;
    })() );

// поле ввода
	_layInner.AddChild( (function(){
    	var _object = app.CreateTextEdit( ":)", 0.5, -1 );
        _object.SetTextSize( 24 );
        return _object;
    })() );

// кнопка
	_layInner.AddChild( (function(){
    	var _object = app.CreateButton( "OK", 0.15, -1 );
    	_object.SetTextColor( '#ffffffff' );
        _object.SetTextSize( 18 );
        return _object;
    })() );
    
  _layLight.AddChild( _layInner );
 
  app.AddLayout( _layLight );
}

Методы:

GetText():str - возвращает текст надписи

Выполнить в DS

app.ShowPopup( myObject.GetText() );

GetTextSize( ('px','dip','sp','mm', 'pt') mode ):int - возвращает размер шрифта надписи в заданных единицах

Выполнить в DS

app.ShowPopup( myObject.GetTextSize( 'px' ));

GetType():str - возвращает тип объекта

Выполнить в DS

app.ShowPopup( myObject.GetType() );

SetBackColor( str clr ) - задаёт цвет фона кнопки

Выполнить в DS

myObject.SetBackColor( '#ff337700' );

SetEllipsize( (str) mode ) - задаёт режим отображения текста, если он не поместился в поле надписи. Устанавливает многоточие в начале, середине или конце надписи ('start', ''middle', 'end', 'marq')

Выполнить в DS

myObject.SetEllipsize( 'start' );

SetEnabled( bool enable ) - задаёт активность кнопки

Выполнить в DS

myObject.SetEnabled ( false );

SetFontFile( str file ) - задаёт файл шрифта:

Выполнить в DS

myObject.SetFontFile ( '/system/fonts/DroidSansMono.ttf' );

SetHtml( str html ) - устанавливает текст надписи с тегами myObject.SetText( 'Это кнопка' );

Выполнить в DS

myObject.SetHtml( '<b>Это</b> <font color="#ff0000">кнопка</font>' );

SetOnLongTouch( callback ) - задаёт ФОВ для обработки долгого прикосновения. В функцию может передаваться объект события с полями:

{} source - объект-источник события
str action - действие 'Down', 'Move' или 'Up'
int count - количество одновременных касаний (пальцами)
float X - горизонтальная координата касания
float Y - вертикальная координата касания
[float] x - список горизонтальных коордиат точек касаний
[float] y - список вертикальных координат точек касаний

Выполнить в DS

myObject.SetOnLongTouch( function(){ app.ShowPopup( 'Прикоснулись палецем' ); });

SetOnTouch( callback ) - задаёт ФОВ для обработки короткого прикосновения. В функцию может передаваться объект события с полями:

{} source - объект-источник события
str action - действие 'Down', 'Move' или 'Up'
int count - количество одновременных касаний (пальцами)
float X - горизонтальная координата касания
float Y - вертикальная координата касания
[float] x - список горизонтальных коордиат точек касаний
[float] y - список вертикальных координат точек касаний

Выполнить в DS

myObject.SetOnTouch( function(){ app.ShowPopup( 'Прикоснулись палецем' ); });

SetStyle( str clr1, str clr2, int radius, str strokeClr, int strokeWidth, (0..1) shadow ) - задаёт стиль для пользовательской кнопки:

clr1 - цвет верхней половины кнопки
clr2 - цвет нижней половины кнопки
radius - радиус закругления углов
strokeClr - цвет границ (рамки контура)
strokeWidth - ширина границ
shadow - сила тени

Выполнить в DS

customObject.SetStyle( '#ffff0000', '#ffffff00', 8, '#ff00ff00', 2, 0.5 );

SetText( str text ) - устанавливает текст надписи

Выполнить в DS

myObject.SetText( 'Это кнопка' );

SetTextColor( str clr ) - задаёт цвет надписи

Выполнить в DS

myObject.SetTextColor( '#8800ff00' );

SetTextShadow( int radius, int dx, int dy, str color ) - задаёт тень надписи заданного радиуса действия, смещения и цвета

Выполнить в DS

myObject.SetTextShadow( 2, 1, 1, '#ff333333' );

SetTextSize( intt size, ('px','dip','sp','mm', 'pt') mode ) - задаёт размер шрифта надписи в указанной единице

Выполнить в DS

myObject.SetTextSize( 40, 'px' );