Membuat ListView bentuk simple dan advanced di Nativescript

 

Pada pembahasan kali ini saya ingin sedikit membahas seputar "ListView Component", di nativescript, komponent ini berfungsi untuk membantu kita untuk melakukan rendering items secara vertikal atau horizontal. Kamu juga dapat melakukan rendering items dengan variasi Grid 2 kolom, 3 kolom, 4 kolom dan seterusnya. Orientasi scrollnya pun dapat kamu atur, entah itu orientasi scroll vertikal ataupun horizontal. pada artikel ini, pembahasan akan saya coba bagi menjadi 2 bagian, yaitu Simple dan Advaced.

ListView Simple

ListView Simple ini merupakan list bentuk sederhana, dimana bentuk list hanya ada 1 kolom dengan orientasi scroll vertikal. Bentuknya kurang lebih seperti gambar di bawah ini :

Di atas adalah bentuk ListView sederhana, yang mana untuk membuatnya cukuplah mudah, kita dapat menggunakan komponen bawaan dari nativescript yang dapat kamu baca lebih lanjut disini (https://docs.nativescript.org/ui/list-view) . Kurang lebih kodenya seperti berikut ini :

<!-- xml code -->
<ListView items="{{ items }}">
  <ListView.itemTemplate>
    <Label text="{{ name }}" textWrap="true" />
  </ListView.itemTemplate>
</ListView>


/*  js code */
const items = Array.from({ length: 4 }).map((_, i) => ({
  name: `Item ${i}`,
}))

ListView Advanced

Pada bagian ini kita akan coba membuat ListView yang lebih Advance, tapi untuk melakukan ini, kita tidak bisa lagi menggunakan komponen ListView bawaan Nativescript seperti di contoh sebelumnya. Pada case ini kamu bisa menggunakan plugin tambahan, namanya Nativescript UI ListView atau bisa di sebut juga dengan RadListView, dengan plugin ini kamu dapat membuat tampilan ListView yang lebih advance, contohnya sebagai berikut :

 1. List dengan Orientasi scroll Horizontal

Untuk mengatur orientasi Scroll pada RadListView caranya cukup mudah, kamu cukup definisikan pada attibut scrollDirection, secara default, valuenya berisi Vertical, jadi kita tinggal setting ke Horizontal.

<lv:ListViewLinearLayout scrollDirection="Horizontal" />

kurang lebih contoh kodenya seperti ini :

<!-- xml code -->
<lv:RadListView items="{{ dataItems }}">
  <lv:RadListView.itemTemplate>
    <StackLayout>
      <Label fontSize="20" text="{{ name }}" />
      <Label fontSize="14" text="{{ description }}" textWrap="true" />
    </StackLayout>
  </lv:RadListView.itemTemplate>
  <lv:RadListView.listViewLayout>
    <lv:ListViewLinearLayout scrollDirection="Horizontal" />
  </lv:RadListView.listViewLayout>
</lv:RadListView>


/*  js code */
const dataItems = Array.from({ length: 10 }).map((_, i) => ({
  name: `Item ${i}`,
  description: `Item ${i}`,
}))

2. List dengan Grid kolom

Dengan RadListView kamu juga dapat mengatur Grid kolom dengan mudah. Caranya cukup sederhana, pada attibut spanCount tinggal kamu setting jumlah grid yang kamu mau. Jika kamu ingin membuat Grid 2 kolom berarti kamu cukup seting spanCount="2".

<lv:ListViewGridLayout spanCount="2" />

Kurang lebih contoh kodenya seperti ini :

<!-- xml code -->
<lv:RadListView items="{{ dataItems }}">
  <lv:RadListView.itemTemplate>
    <StackLayout>
      <Label fontSize="20" text="{{ name }}" />
      <Label fontSize="14" text="{{ description }}" textWrap="true" />
    </StackLayout>
  </lv:RadListView.itemTemplate>
  <lv:RadListView.listViewLayout>
    <lv:ListViewGridLayout spanCount="2" />
  </lv:RadListView.listViewLayout>
</lv:RadListView>


/*  js code */
const dataItems = Array.from({ length: 20 }).map((_, i) => ({
  name: `Item ${i}`,
  description: `Item ${i}`,
}))

Lengkapnya kamu bisa lihat disini : https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view

Selain menggunakan komponen RadListView dari plugin Nativescript UI ListView, kamu juga bisa membuat ListView bentuk advanced dengan plugin CollectionView dari Nativescript Community : https://github.com/nativescript-community/ui-collectionview 

Mungkin cukup sekian dulu untuk pembahasan kali ini, semoga bermanfaat, terimakasih :)