Name: Add Responsive Wrapping Using WrapLayout
Uploaded: 2017-02-16T21:16:18-06:00
Description: We will use the WrapLayout component to create a layout that wraps UI widgets to a new row or column if no space is left in a NativeScript app.

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 WrapLayout component to create a layout that wraps UI widgets to a new row or column if no space is left in a NativeScript app.

https://app.egghead.io/api/v1/lessons/nativescript-add-responsive-wrapping-using-wraplayout/subtitles

[00:00] Start by adding a wrap layout to your page. And we're going to set a width on the wrap layout, so we can really see the visual effect once we run this. Inside of the wrap layout, we need a few view components to fill the space. We'll start with a label, put the text set to 'hello'. And we're also going to use background color to really see the wrap layout here in effect.

[00:30] We'll add another label with the text 'goodbye', background color of yellow, another label with the text of 'egghead', background color 23489DBE as a hex. And last, we use another label with the text 'set to go home' and background color equal to pink. And again, to see this in effect, we're going to set a few properties that you might not normally need, such as the width on these child items. And we're going to use '70' on each of these labels.

[01:22] And when we run this, we should see three items on the first row and this last label should wrap. And here, you see the first label, the second label, third, and fourth. The fourth label is wrapped because all four items have greater width, when they're combined, than the entire wrap layout of 250. If we change this to 280, which would be the sum of the four labels' widths, they should be on one row. And here, you see one, two, three, four all on the first row.

[02:02] The wrap layout also provides the orientation property, which you can set to vertical. The default is horizontal. When you run this, the wrap will present items in a column.

Add Responsive Wrapping Using WrapLayout

Share this video with your friends

Course

Build Basic NativeScript App Templates