Position Views in a Dock Using DockLayout
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.