7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 NativeScript Layouts

In this lesson I’ll show you each of the default layouts in NativeScript. I’ll go through them one at a time and show you how each one works.

Related Links

3.2 NativeScript Layouts

Hello everyone, I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular 2 course from Tuts+. In this video we will learn about NativeScript layouts. NativeScript provides five predefined layouts that we can use to build our app. The layout we choose will control the options we have when styling our app. The stack layout that is in our temple is one of the layouts that are available to us to use. First, before we see how it works, let's remove it from our project to see what happens without it. As you can see, without it, all it adds is the last component. The action bar appears by default unless we explicitly remove it. Now, if we put the stack layout back, it will go back to the way it was. Now the stack layout stacks its elements below or beside each other. The default is vertical but if we pass horizontal to the layout we can change it. Now we have to rotate our device to landscape to see our interface. It doesn't look very good like this but it should give you an idea of how you can use the stack layout. Now the next layout we're going to talk about is the absolute layout, this uses left-top coordinates to position its elements. If we change our layout to an absolute layout and save, we can see how it looks. Now after we save and the app restarts, we can see that all of our components are placed on top of one another. This is because we have not supplied any coordinates yet. Let's start with the label. Again we don't have to worry about the action bar since it defaults to the area at the top of our view, all we have to do is add a top and a left attribute to our label. This is specifying that the label will be 0 pixels from the top, and 30 pixels to the left. If we made left 0 then the label would be pushed up against the left side of the display, setting this to 30 pixels centers the label better. Next we will add a top and a left to our button. Here we have moved the button down by 60 pixels to compensate for the label, then we also moved the button over by 60 pixels. Then finally, we add coordinates for the text view. Here we have moved this element down by 140 pixels, and have moved it over to the left by 50 pixels. After that we can save our project in preview. Now once we do that the elements should be laid out according to the coordinates that we set. The main drawback for this approach is positioning the elements so that they translate properly regardless of the size of the display. The next layout we will look at is the dock layout, this arranges our elements around a central docking point. Each of the elements will get a dock attribute of top, bottom, right or left, first we will add the dock layout. Now the stretch last child attribute determines whether or not the last element stretches the field of remaining space. The best way to understand this is to use the layout. So let's remove the top and left from the label and replace it with the docks at the top. Then we will set the button to right and remove the top and left from the button. Then finally, we will remove the top and from the text view and add a dock bottom. After that save your file and preview, now as you can see the label is at the top and the button is to the right but the text view isn't on the bottom. This is because of the stretch last child property, while set to true it will make sure the last element takes up the remaining available space. If we set stretch last child to false it will make sure the text view is at the bottom, let's change it and save the file and preview again. Now you will see that the text view is at the bottom instead of taking up all of the remaining space. By using the stretch last child attribute, you can come up with some unique layouts. Now the next layout we will talk about is the wrap layout. This is similar to the stack layout except that it's designed for similar size elements but not required. This layout will wrap the elements if there is no space left, to better understand it let's set up this layout. First let's remove the dock attributes from our elements. Then we will add the wrap layout. The orientation serves the same purpose as the orientation in the stack layout. The width and height set the size of each individual element in the layout. That's all we have to do to set up this layout, let's save and preview our app. As you can see the first two components take up the first row while the text view is on the second row. Next we're going to change the orientation to vertical and see how that affects the display. With the orientation set to vertical, the elements are arranged top to bottom in one column until the available space is used, then it will add the content to a new column. Now the last layout we will look at is the grid layout. This layout let you design your UI using columns and rows to lay out your elements. The way this is implemented is very similar to how you use grids in many popular frameworks. First we will add our grid layout. Now the grid comes with one column and row by default, but we can add further columns and rows by adding the columns and rows property. The width of the column and the height of the row can be specified one of three ways. If we look at the rows property we see the definition for our first row which is set to auto. Auto will take up as much space as needed for the element inside of the row. The next row has an absolute definition which makes the row the size of the provided pixels, this rows property defines two rows. Then the columns are set to the star which allows them to take up as much space is available. In this case we will have two columns that take up 50% each, if I added another star there would be three columns that take up 33% each. This grid is set up as a two by two grid but we will manipulate it to make it fit our interface. Of course we're going to ignore the action bar and go directly to the label. Now, the label is bigger and needs to span both columns to appear correctly. For each element inside of our grid, we have to define the container that holds it. Here we have added the row, col, and colSpan attributes to our label. The row specifies which row this will be placed in, in this case the first row. All rows and columns begin at zero, then the column again is the same thing the first column. Then we have a colSpan of two that makes this element span both columns. Child elements in our grid have access to the rowSpan and colSpan properties. colSpan will make the label appear centered over the top of our display. Since the first row is set to auto it will take up enough height to hold the label. Next we will add the container for our button. Here we are placing the button in the second row, but in the first column. Now the height of this row is set to 200 pixels while the width is set to 50% of the available space, then in the text view we will set our rows and columns. Now here we are using the second row and column, again it will be 200 pixels in height with 50% of the row's width. Go ahead and save the project and preview it. Here the label is centered while the button and text view take up the same amount of space. Now these have all been some basic examples that you can come up with some unique designs using the layout containers. The last thing to understand is that you can nest layouts to mix and match different styles. For example with our grid layout we could have wrapped the entire thing in a stack layout, then we can move the grid layout to wrap just the button and the text view. Now here we have changed our grid layout to have one row set to an auto height, we keep the two columns of the same size. After that we will change the row to the first one for the button and the text view. The last thing we need to do is remove the row, col, and colSpan from our label. Now we have a similar layout to the one we created with the grid alone. Go ahead and save and preview. By using nested layouts, we didn't have to worry about using the colSpan on the label while still being able to have better control over how the button and the text view are styled. Now that you have seen examples, you should have a better idea of how you can lay out your app. In the next video we will learn about styling the app and adding images.

Back to the top