Cara Menggunakan Collection View – Swift Programing

Cara Menggunakan Collection View – Swift Programing

Lama tak bersua dengan teman di blog ini, pasalnya mendapat liburan (lebaran) layaknya seorang karyawan. Semoga dengan rehatnya diri sejenak memberi semangat baru untuk berbagi ilmu terkhusus mengenai aplikasi mobile iOS.

Sesuai ihwal pembuatan aplikasi iOS, postingan kali ini mengulas bagaimana cara menggunakan Collection View di Xcode.

Apa Collection View itu ?

Collection View adalah pengelolaan koleksi dengan memerintahkan item data dan menampilkan item data sesuai tata letak. Fungsi secara umum Collection View hampir sama dengan Table View yaitu menampilkan item data. Pembahasan ini berfokus pada Collection View, sedangkan pembahasan Table View mungkin di lain kesempatan akan dibahas.

Menggunakan Collection View

Sama halnya dengan postingan-postingan sebelumnya dalam membuat aplikasi iOS, pertama-tama membuka Xcode untuk meramu aplikasi.

  1. Langkah awal yaitu buka Xcode dengan mengklik icon
  2. Lalu pilih “Create a new Xcode project”

Screen Shot 2016-08-04 at 12.27.08 AM

3. Pilih Single View Application, lalu tekan tombol Next

4. Kemudian akan muncul tampilan seperti di bawah ini, silahkan diisi lalu tekan tombol Next

Screen Shot 2016-08-04 at 12.48.55 AM

5. Setelah itu pilih Main.storyboard, maka tampilannya seperti gambar di bawah

Screen Shot 2016-08-04 at 12.54.40 AM

6. Ketik “Collection View” di kolom search, lalu pilih object Collection View, setelah itu drag ke  scene (layar editor)

Screen Shot 2016-08-04 at 8.16.24 AM

7. Atur posisi constraint object Collection View

constraints

8. Input gambar yang sudah disiapkan, pilih Assets lalu drag gambar

Screen Shot 2016-08-04 at 2.11.39 PM

9. Tambahkan object image view, lalu ubah gambar sesuai data assets yang telah diinput tadi, pilih Aspect Fill untuk kesesuaian gambar  pada cell

Screen Shot 2016-08-04 at 2.50.20 PM

10. Tambahkan object label pada bagian cell setelah itu pada bagian Lines ubah menjadi nilai 0 untuk kesesuaian tulisan pada baris

label

11. Atur posisi label dengan mengklik object label selanjutnya tekan tombol Control pada keyboard sambil mendrag arah panah ke bawah tetap pada wilayah cell, akan muncul pilihan seperti pada nomor 2 pada gambar di bawah, sama halnya dengan posisi atas, kiri dan kanan langkahnya seperti ini.

constraints label

12. Pilih Collection View seperti nomor 1 pada gambar di bawah, lalu tekan tombol Control pada keyboard selanjutnya akan muncul pilihan pada gambar bagian 2, kemudian pilih dataSource sambil mengarahkan ke view controller (nomor 3). Lakukan juga langkah ini untuk bagian delegate

Screen Shot 2016-08-04 at 3.07.15 PM

13. Pilih Collection View Cell lalu berikan nama pada identifier

Screen Shot 2016-08-04 at 4.26.55 PM

14. Buat satu file swift (UICollectionViewCell) yang akan dihubungkan dengan cell pada scene collection view

cell

Screen Shot 2016-08-04 at 5.03.56 PM

Screen Shot 2016-08-04 at 5.04.51 PM

15. Apabila file swift collectionviewcell telah dibuat, hubungkan dengan scene cell, lihat urutan nomor pada gambar di bawah

tes

16. Selanjutnya buat IBOutlet label, pilih file cellcollectionview.swift lalu klik label (nomor 2) sambil menekan tombol Control pada keyboard kemudian arahkan ke kolom editor, akan muncul pilihan seperti nomor 3 pada gambar di bawah.

outlet label

17. Sama halnya dengan IBOutlet label, buat juga IBOutlet image dengan memilih file cellcollectionview.swift. Setelah itu klik image (nomor 2) sambil menekan tombol Control pada keyboard kemudian arahkan ke kolom editor, akan muncul pilihan seperti nomor 3 pada gambar di bawah.

outlet gambar

18. Pilih file ViewController (nomor 1), lalu tambahkan

UICollectionViewDataSource, UICollectionViewDelegate

pada class ViewController (nomor 2), selanjutnya buat konstanta indentifier (nomor 3), kemudian buat data array label dan image (nomor 4)

controller

19. Tambahkan function seperti gambar di bawah ini:

Screen Shot 2016-08-05 at 1.08.42 AM

- Tulisannya.count (nomor 1), jumlah data array yang akan  
  dibaca pada "var tulisannya" yang sudah dibuat sebelumnya

- Identifiera (nomor 2), konstanta identifier yang dibuat  
  sebelumnya

- CellCollectionView (nomor 3), file swift untuk cell 
  collectionview yang telah dibuat

- GambarMuncul (nomor 4), variabel gambar yang sudah dibuat

- Bisja dan Gamja (nomor 5), IBOutlet yang sudah dibuat pada 
  file cellcollectionview
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return tulisannya.count
} 
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(identifiera, forIndexPath: indexPath) as! CellCollectionView
        cell.bisja.text = tulisannya[indexPath.row]
        cell.gamja.image = UIImage(named: gambarMuncul[indexPath.row])
        return cell 
    }

20. Langkah terakhir, tinggal RUN atau tekan tombol di keyboard “command + R” dan hasilnya seperti ini.

Screen Shot 2016-08-05 at 1.45.53 AM

Banyak hal yang bisa dibuat dengan Collection View, tinggal seberapa besar keinginan untuk mendarasnya lebih dalam akan fungsi-fungsi khususnya. Contoh codenya bisa di download di sini.

Related posts:

Loading Facebook Comments ...