Nativescript UI Basics : How to implement Nativescript CardView, GridLayout and Label ? - SpartaCode

SpartaCode

Make your development faster and easier !

Nativescript UI Basics : How to implement Nativescript CardView, GridLayout and Label ?

UI basics of NativeScript :
In order to increase the look and feel of your mobile application, we need to use some good native apis available for Nativescript. One of majorly used component of UI is CardView.
CardView improves UI design to a major extend as you might have experienced in Android Development.
In this tutorial,
  We will learn about Gridlayout, CardView and Label NativeScript Components.
GridLayout is type of container which holds any component in NativeScript. You can find more such containers layouts at NativeScript Official Website.
CardView is beautiful component with shadow. CardView looks more beautiful with Ripple Effect which will be implemented in next tutorial.

Lets get started,

Step 1: Install CardView 
To install CardView in your Nativescript project type following command in your terminal/cmd :
tns plugin add nativescript-cardview
Hardly takes 5 seconds to install.

Step2: Import CardView and Label in your Project
Go to app.component.ts file in your project and add this following code
import * as elementRegistryModule from 'nativescript-angular/element-registry';
import * as LabelModule from "tns-core-modules/ui/label";
elementRegistryModule.registerElement("CardView", () => require("nativescript-cardview").CardView);


Once we have imported the Cardview and Label we can use it in this component.
Step 3: Using CardView in Layout
Now we can use cardview in layout. Here we have not created separate file for layout in order to make this tutorial more simple as possible.
Here we are using GridLayout to explain the concept of using container and Cardview in action.
Copy following code into app.component.ts(Component) template attribute as shown in below image:
<actionbar class="action-bar" title="My App"></actionbar>
    <!-- GridLayout with CardView and Label NativeScript -->
    <gridlayout columns="*,2*" height="100%" padding="5" rows="2*,1*,2*" style.backgroundcolor="lightgray" width="100%" xmlns:card="nativescript-cardview">
      
      <card:cardview col="0" elevation="10" marginright="5" radius="5" row="0">
      <label style.verticalalignment="center" text="Row 0 Col 0">
      </label></card:cardview>
      <card:cardview col="1" elevation="10" radius="5" row="0">
      <label style.verticalalignment="center" text="Row 0 Col 1">
      </label></card:cardview>

      <card:cardview col="0" colspan="2" elevation="10" marginbottom="5" margintop="5" radius="5" row="1">
      <label style.verticalalignment="center" text="Row 1 Col 0 with ColSpan = 2">
      </label></card:cardview>

      <card:cardview col="0" elevation="10" marginright="5" radius="5" row="2">
      <label style.verticalalignment="center" text="Row 2 Col 0">
      </label></card:cardview>
      <card:cardview col="1" elevation="10" radius="5" row="2">
      <label style.verticalalignment="center" text="Row 2 Col 1">
      </label></card:cardview>
    
    </gridlayout>


Lets us see how GridLayout is working to arrange these 5 CardViews in layout. Grid means rows and columns.As you can see in the code we have declared rows="2*,1*,2*" and columns="*,2*"



rows="2*,1*,2*" : Here device screen is divided into 3 rows.
                  Calculate the region size i.e. 2* + 1* + 2* = 5*.
                  If we consider screen height is 500pixels. 
                  Then 2* = 2 X (screenheight / 5) = 2 * 100 = 200 pixels.
                  Similarly, 1* equals 1 X (screenheight / 5) = 1 * 100 =100 pixels.
                  In this way, Screen size is divided across any screen size and density.

columns="*,2*"  : Here device screen is divided into 2 columns. Where * means 1*. 
                  If we consider screen width is 300 pixels. 
                  Then 1* =1 X (screenwidth / 3) = 1 X 100 =100 pixels.
                  So, first column is 100 pixels. 
                  Similarly for 2* = 2 X (screenwidth / 3) = 2 X 100 =200 pixels.
                  Remaining 200 pixels is occupied by second column. 

You can also add style for label :
 styles:[`
  Label{
    text-align:center;
    font-size: 18;
  }
  `]


Now, Run the project using following command in terminal/cmd :
Android :
tns run android
IOS :
tns run ios

Output :

Hope you learnt from tutorial.
Thank you. Comment and share with your best friends.

2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. Javascript Online Training from India

    ReplyDelete

News

Get Amazing Traffic to your Site

Traffic Exchange

Post Bottom Ad

Responsive Ads Here