Create Vertical/Horizontal Layouts with StackLayout 

Create an Absolute Positioned Layout Using AbsoluteLayout 

Add Responsive Wrapping Using WrapLayout

Position Views in a Dock Using DockLayout

Make a Grid Layout Using GridLayouts 

Create Flex Based Containers Using FlexboxLayout

Build Basic NativeScript App Templates

We will use the DockLayout component to create a layout container which allows us to specify sides (top, bottom, left, right) to dock child components to in a NativeScript app.

[00:00] Start by adding a dock layout to your page. Inside of the dock layout, we're going to layout four buttons, and they're going to take the dock property, which accepts 'top', 'left', 'right', 'bottom' as the value. We're going to color these inline with the background color, just so we know exactly where they end up inside of the dock layout. 

[00:35] We'll add two more buttons. This one we'll dock to the bottom of the dock layout, and our last button, we will dock to the left. And we run this, we'll have four buttons inside of the dock layout positioned by their dock property, 'top', 'right', 'bottom', and left''. The 'top', 'right', 'bottom', and 'left' button.

[01:00] But the dock layout also provides the stretch 'last' child property, which set to 'true' is likely what you'll use in a production application, if you use the dock layout. We'll set another button with the text to fill, and we'll run this. And you're going to see this button consume all of the space in the center of the dock layout, between the other buttons that have the dock properties specified -- the 'top', 'right', 'bottom', 'left'. And here's your last child, which fills the remaining space inside of the dock layout.



Course

Build Basic NativeScript App Templates

Position Views in a Dock Using DockLayout

Share this video with your friends