This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
built_in:layouts [2015/01/16 19:05] octazid Options |
built_in:layouts [2018/12/07 18:02] administrator old revision restored (2018/07/21 20:21) |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Layouts ====== | ====== Layouts ====== | ||
- | Layouts are the base to position controls over the screen of your Android device. | + | // |
- | There are the following | + | ===== Description ===== |
+ | Layouts | ||
+ | * " | ||
+ | * " | ||
+ | * " | ||
- | | + | Create layouts using the **CreateLayout** function of the [[built_in: |
- | | + | < |
- | | + | |
- | Linear layouts allow you to add controls one after another without overlapping them, in a vertical or horizontal way. | + | Add child objects |
+ | < | ||
- | Absolute layouts allows you to add controls in any position relative to the width and height | + | The alignment of child objects within a layout can be set by adding |
+ | Remove layouts using the **RemoveLayout** function | ||
+ | < | ||
- | Frame layouts are used to display objects in front or behind each other | + | =====Linear Layouts===== |
- | ===== Methods | + | Linear layouts allow you to add controls one after another without overlapping them, in a vertical or horizontal way. Linear layouts are probably the most useful |
- | ^Method ^Description ^ | + | |
- | |Layout.AddChild( child,order ) | | | + | |
- | |Layout.Animate( | + | |
- | SlideFromLeft | + | |
- | SlideToRight | + | |
- | SlideFromRight | + | |
- | SlideToTop | + | |
- | SlideFromTop | + | |
- | SlideToBottom | + | |
- | SlideFromBottom</ | + | |
- | |Layout.ChildToFront( child ) | | | + | |
- | |Layout.Destroy() | | | + | |
- | |Layout.DestroyChild( child ) | | | + | |
- | |Layout.GetAbsHeight() | | | + | |
- | |Layout.GetAbsWidth() | | | + | |
- | |Layout.GetChildOrder( child ) | | | + | |
- | |Layout.GetHeight() | | | + | |
- | |Layout.GetPosition() | | | + | |
- | |Layout.GetType() | | | + | |
- | |Layout.GetVisibility() | | | + | |
- | |Layout.GetWidth() | | | + | |
- | |Layout.Release() | | | + | |
- | |Layout.RemoveChild( child ) | | | + | |
- | |Layout.SetBackColor( colorCode ) | | | + | |
- | |Layout.SetBackGradient( color1, | + | |
- | |Layout.SetBackGradientRadial( x, | + | |
- | |Layout.SetBackground( imageFile, options ) |options is an optional string that can be “repeat” | | + | |
- | |Layout.SetMargins( left, | + | |
- | |Layout.SetOrientation( orient ) | | | + | |
- | |Layout.SetPadding( left, top, right, bottom ) | | | + | |
- | |Layout.SetPosition( left, top, width, height ) | | | + | |
- | |Layout.SetScale( x,y ) | | | + | |
- | |Layout.SetSize( width, height ) | | | + | |
- | |Layout.SetTouchable( touchable ) | | | + | |
- | |Layout.SetVisibility( visibility ) | | | + | |
+ | ====Example - Vertical==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | btnA = app.CreateButton( " | ||
+ | lay.AddChild( btnA ); | ||
+ | |||
+ | btnB = app.CreateButton( " | ||
+ | lay.AddChild( btnB ); | ||
+ | |||
+ | btnC = app.CreateButton( " | ||
+ | lay.AddChild( btnC ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====Example - Horizontal==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | btnA = app.CreateButton( " | ||
+ | lay.AddChild( btnA ); | ||
+ | |||
+ | btnB = app.CreateButton( " | ||
+ | lay.AddChild( btnB ); | ||
+ | |||
+ | btnC = app.CreateButton( " | ||
+ | lay.AddChild( btnC ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | By default Layouts will auto-size to wrap their contents but you have 3 more options as to how a layout sizes within it's parent: **" | ||
+ | |||
+ | ====Example - Combined==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | layVert = app.CreateLayout( " | ||
+ | |||
+ | btnA = app.CreateButton( " | ||
+ | layVert.AddChild( btnA ); | ||
+ | |||
+ | layHoriz = app.CreateLayout( " | ||
+ | layVert.AddChild( layHoriz ); | ||
+ | |||
+ | btnB1 = app.CreateButton( " | ||
+ | layHoriz.AddChild( btnB1 ); | ||
+ | btnB2 = app.CreateButton( " | ||
+ | layHoriz.AddChild( btnB2 ); | ||
+ | btnB3 = app.CreateButton( " | ||
+ | layHoriz.AddChild( btnB3 ); | ||
+ | |||
+ | btnC = app.CreateButton( " | ||
+ | layVert.AddChild( btnC ); | ||
+ | |||
+ | app.AddLayout( layVert ); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | =====Frame Layouts===== | ||
+ | Frame layouts are used to display objects in front or behind each other. Every time the **AddChild** function is called on a Frame layout, the child object is placed in a new layer **in front** of the previously added object at the top left of the frame. | ||
+ | Frame Layouts are useful if you wish to do **animated Flips** or **Slides** to reveal layers of objects or use **transparency.** | ||
+ | |||
+ | ====Example - Image Swap==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | |||
+ | layFrm = app.CreateLayout( " | ||
+ | img1 = app.CreateImage( "/ | ||
+ | layFrm.AddChild( img1 ); | ||
+ | |||
+ | img2 = app.CreateImage( "/ | ||
+ | img2.SetVisibility( " | ||
+ | layFrm.AddChild( img2 ); | ||
+ | lay.AddChild( layFrm ); | ||
+ | |||
+ | btn = app.CreateButton( "Press Me" ); | ||
+ | btn.SetMargins( 0,0.1,0,0 ); | ||
+ | btn.SetOnTouch( btn_OnTouch ); | ||
+ | lay.AddChild( btn ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | |||
+ | function btn_OnTouch() | ||
+ | { | ||
+ | if( img2.GetVisibility()==" | ||
+ | | ||
+ | else | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | =====Absolute Layouts===== | ||
+ | Absolute layouts allows you to add controls in any position relative to the width and height of your screen from 0 to 1. Absolute layouts ignore all alignment options and allow the absolute positioning of controls by calling the **SetPosition** and **SetSize** functions of each of the child objects. This type of layout is rarely used and you are encouraged use Linear layouts for most of your programs. | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | btn = app.CreateButton( "Press Me" ); | ||
+ | btn.SetPosition( 0.4,0.4 ); | ||
+ | btn.SetOnTouch( btn_OnTouch ); | ||
+ | lay.AddChild( btn ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | |||
+ | function btn_OnTouch() | ||
+ | { | ||
+ | app.Alert( "This is a Absolute Layout!" | ||
+ | } | ||
+ | </ | ||
+ | =====Padding and Margins===== | ||
+ | In Linear and Frame Layouts, you can use the **SetPadding** function of a layout to keep a layout' | ||
+ | < | ||
+ | Also every child object within a layout can have margins added by using the SetMargins function of the child object: | ||
+ | < | ||
+ | Using Linear layouts and setting margins on child objects is usually the best way to position your App's graphical objects. | ||
+ | |||
+ | =====Backgrounds===== | ||
+ | The background of a layout will be transparent by default, but you can set a color using the **SetBackColor** function. | ||
+ | < | ||
+ | Colors are given as hex **color codes** which can be copied from various graphics programs or simply exprimented with until you get the color you want. The format is (# | ||
+ | For example "# | ||
+ | You can also use a gradient background for a layout using the **SetBackGradient** and **SetBackGradientRadial** functions. | ||
+ | < | ||
+ | < | ||
+ | |||
+ | =====Visibility===== | ||
+ | The visibility of both layouts and child objects can be controlled using the **SetVisibility** function. Use the values **" | ||
+ | < | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== Methods ===== | ||
+ | ^ Method | ||
+ | | Layout.AddChild( child,order ) | child is the object to add to the Layout. Order is the rang option to make an object behind an other Object. | ||
+ | | Layout.Animate( type, callback, time ) | known types: SlideFromLeft, | ||
+ | | Layout.ChildToFront( child ) | ||
+ | | Layout.Destroy() | ||
+ | | Layout.DestroyChild( child ) | This function Destroys a child of a Layout forever. | ||
+ | | Layout.GetAbsHeight() | ||
+ | | Layout.GetAbsWidth() | ||
+ | | Layout.GetChildOrder( child ) | This function returns the rang of an Object of a Layout. | ||
+ | | Layout.GetHeight() | ||
+ | | Layout.GetPosition() | ||
+ | | Layout.GetType() | ||
+ | | Layout.GetVisibility() | ||
+ | | Layout.GetWidth() | ||
+ | | Layout.SetOnTouch( callback ) |Does not work in ' | ||
+ | | Layout.SetOnTouchDown( callback ) |only OnTouchDown works when in ' | ||
+ | | Layout.SetOnTouchMove( callback ) |Does not work in ' | ||
+ | | Layout.SetOnTouchUp( callback ) |Does not work in ' | ||
+ | | Layout.Release() | ||
+ | | Layout.RemoveChild( child ) | This removes a Child of an Layout, this Child can be added again with Layout.AddChild( child ). | | ||
+ | | Layout.SetBackColor( colorCode ) | This sets the Background Color of an Layout. | ||
+ | | Layout.SetBackGradient( color1, | ||
+ | | Layout.SetBackGradientRadial( x, | ||
+ | | Layout.SetBackground( imageFile, options ) | You can set an Image as the Background of an Layout ( Layout.SetBackground( " | ||
+ | | Layout.SetMargins( left, | ||
+ | | Layout.SetOrientation( orient ) | " | ||
+ | | Layout.SetPadding( left, top, right, bottom ) | | | ||
+ | | Layout.SetPosition( left, top, width, height ) | ||
+ | | Layout.SetScale( x,y ) | ||
+ | | Layout.SetSize( width, height ) | | | ||
+ | | Layout.SetTouchable( touchable ) | ||
+ | | Layout.SetVisibility( visibility ) | " | ||
===== Options ===== | ===== Options ===== | ||
You can combine options too. Use the comma to seperate the options: | You can combine options too. Use the comma to seperate the options: | ||
Line 65: | Line 218: | ||
|Left| | | |Left| | | ||
|Bottom| | | |Bottom| | | ||
- | |TouchTrough| | | + | |TouchThrough| | |