This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Add Responsive Wrapping Using WrapLayout

    Brad MartinBrad Martin

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss