This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
built_in:layouts [2015/01/07 02:09] bcarroll |
built_in:layouts [2018/07/21 20:19] 90.216.254.199 [Example - Vertical] |
||
---|---|---|---|
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 of your screen from 0 to 1. | + | The alignment of child objects within a layout can be set by adding the options **" |
+ | Remove layouts using the **RemoveLayout** function of the app object: | ||
+ | < | ||
+ | |||
+ | =====Linear Layouts===== | ||
+ | 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 type and are used to organize controls in either the **" | ||
+ | |||
+ | ====Example - Vertical==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | btnA = app.CreateButton( " | ||
+ | lay.AddChild( btnA ); | ||
+ | |||
+ | btnB = app.CreateButton( " | ||
+ | lay.AddChild( btnB ); | ||
+ | |||
+ | btnC = app.CreateButton( "mf yeet on those despacito depressed niBBas", | ||
+ | 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 **" | ||
+ | < | ||
+ | |||
+ | ---- | ||
- | Frame layouts are used to display objects in front or behind each other | ||
===== Methods ===== | ===== Methods ===== | ||
- | ^Method ^Description ^ | + | ^ Method |
- | |Layout.AddChild( child,order ) | | | + | | Layout.AddChild( child,order ) |
- | |Layout.Animate( type, | + | | Layout.Animate( type, callback, time ) | known types: SlideFromLeft,SlideFromRight,SlideFromTop,SlideFromBottom, |
- | SlideFromLeft | + | | Layout.ChildToFront( child ) |
- | SlideToRight | + | | Layout.Destroy() |
- | SlideFromRight | + | | Layout.DestroyChild( child ) |
- | SlideToTop | + | | Layout.GetAbsHeight() |
- | SlideFromTop | + | | Layout.GetAbsWidth() |
- | SlideToBottom | + | | Layout.GetChildOrder( child ) | This function returns the rang of an Object of a Layout. |
- | SlideFromBottom</ | + | | Layout.GetHeight() |
- | |Layout.ChildToFront( child ) | | | + | | Layout.GetPosition() |
- | |Layout.Destroy() | | | + | | Layout.GetType() |
- | |Layout.DestroyChild( child ) | | | + | | Layout.GetVisibility() |
- | |Layout.GetAbsHeight() | | | + | | Layout.GetWidth() |
- | |Layout.GetAbsWidth() | | | + | | Layout.SetOnTouch( callback ) |Does not work in ' |
- | |Layout.GetChildOrder( child ) | | | + | | Layout.SetOnTouchDown( callback ) |only OnTouchDown works when in ' |
- | |Layout.GetHeight() | | | + | | Layout.SetOnTouchMove( callback ) |Does not work in ' |
- | |Layout.GetPosition() | | | + | | Layout.SetOnTouchUp( callback ) |Does not work in ' |
- | |Layout.GetType() | | | + | | Layout.Release() |
- | |Layout.GetVisibility() | | | + | | Layout.RemoveChild( child ) | This removes a Child of an Layout, this Child can be added again with Layout.AddChild( child ). |
- | |Layout.GetWidth() | | | + | | Layout.SetBackColor( colorCode ) |
- | |Layout.Release() | | | + | | Layout.SetBackGradient( color1, |
- | |Layout.RemoveChild( child ) | | | + | | Layout.SetBackGradientRadial( x, |
- | |Layout.SetBackColor( colorCode ) | | | + | | Layout.SetBackground( imageFile, options ) |
- | |Layout.SetBackGradient( color1, | + | | Layout.SetMargins( left, |
- | |Layout.SetBackGradientRadial( x, | + | | Layout.SetOrientation( orient ) | " |
- | |Layout.SetBackground( imageFile, options ) |options is an optional string that can be “repeat” | | + | | Layout.SetPadding( left, top, right, bottom ) | | |
- | |Layout.SetMargins( left, | + | | Layout.SetPosition( left, top, width, height ) |
- | |Layout.SetOrientation( orient ) | | | + | | Layout.SetScale( x,y ) |
- | |Layout.SetPadding( left, top, right, bottom ) | | | + | | Layout.SetSize( width, height ) | | |
- | |Layout.SetPosition( left, top, width, height ) | | | + | | Layout.SetTouchable( touchable ) |
- | |Layout.SetScale( x,y ) | | | + | | Layout.SetVisibility( visibility ) | " |
- | |Layout.SetSize( width, height ) | | | + | ===== Options ===== |
- | |Layout.SetTouchable( touchable ) | | | + | You can combine options too. Use the comma to seperate the options: |
- | |Layout.SetVisibility( visibility ) | | | + | < |
+ | |||
+ | |Vertical| | | ||
+ | |Horizontal| | | ||
+ | |VCenter| | | ||
+ | |TopCenter|Default| | ||
+ | |FillX| | | ||
+ | |FillY| | | ||
+ | |FillXY| | | ||
+ | |Right| | | ||
+ | |Left| | | ||
+ | |Bottom| | | ||
+ | |TouchThrough| | |