Static Table View dan Photo Library di iOS – FoodPin Apps

Setelah sebelumnya kita membahas tentang Map Kit Framework di pembahasan sebelumnya, nah sekarang kita akan membahas tentang membuat halaman statis untuk form penambahan restaurant pada aplikasi FoodPin.

Static Table View dan Photo Library Cover

Pengenalan Static Table View dan UIImagePickerController

CoverSejauh ini aplikasi FoodPin kita telah menampilkan konten yang minimalis, untuk itu kita perlu tambahan fitur lainnya seperti user yang dapat menambahkan restaurant baru. Nah di pembahasan kali ini kita akan membuat halaman baru yang berisikan kumpulan informasi restaurant dan user dapat menambahkan gambar restaurant sendiri dari photo library. Berikut poin-poin nya:

  • Membuat form dari tabel statis
  • Menggunakan UIImagePickerController untuk memilih foto daru photo library atau mengambil photo.

Jika telah mengikuti tutorial yang sebelumnya, tentu akan memahami tentang dasar dari table view. Karena di tutorial sebelumnya kita telah membuat prototype cell dengan table view dan manempilkannya dalam konten yang dinamis. Oya, table view ini tidak hanya dapat digunakan untuk menampilkan sebuah konten yang dinamis, tetapi juga bisa digunakan untuk menampilkan halaman form dan juga halaman pengaturan. Dalam pembahasan kali ini, table view adalah yang kita butuhkan untuk mengimplementasikan Static Table View.

Xcode memperbolehkan developer untuk membuat static table view dengan code yang sederhana. Untuk mengilustrasikan seberapa sederhananya kita bisa menggunakan Storyboard untuk memanfaatkan static table view, dimana kita akan membuat halaman baru untuk menambahkan restaurant. So, let’s get started.


 

Menambahkan Table View Controller Baru

Buka Main.storyboard dan pindahkan table view controller dari Object Library ke storyboard. Di Attribute Inspector, ganti pilihan Content dari Dynamic Prototypes menjadi Static Cell. Setelah menggahntinya, kita telah mempunyai table view dengan 3 cell yang statis.

Static Table View
Static Table View

Disini kita akan membutuhkan 5 cell table view untuk membuat halaman form atau halaman input user:

  • Cell #1 : yang nantinya sebagai gambar untuk menampilkan gambar restaurant
  • Cell #2 : label Name dengan tipe teks
  • Cell #3 : label Type dengan tipe teks
  • Cell #4 : label Location dengan tipe teks
  • Cell #5 : label “Have You Been Here” dengan dua tombol yes/no.

Kita dengan mudah menambahkan jumlah dari cell dengan memilih bagian table view di Document Outline. Di Attribute Inspector, kita bisa mengganti nilai row dari 3 menjadi 5 seperti yang terlihat pada gambar dibawah ini.

Mengganti jumlah garis dari 3 jadi 5
Mengganti jumlah garis dari 3 jadi 5

Sekarang kita akan mendesign setiap cell table view. Pertama kali download kumpulan gambar disini dan unzip filenya. Lalu tambahkan gambar tersebut di images.xcassets.

Untuk cell pertama, ganti ketinggiannya menjadi 250 dan pindahkan image view dari Object Library ke dalamnya. Di Attribute Inspector, isi image menjadi “camera” dan ganti modenya menjadi “Aspect Fit”.

Untuk cell kedua, ganti ketinggiannya menjadi 72, kemudian pindahkan label ke dalam cell dan ganti judulnya dengan Name. Pindahkan text field kedalam cell dan letakkan di bawah label nama. Text field berfungsi untuk mengontrol tampilan teks yang dapat diedit oleh user. Di Attribute Inspector, kita bisa memasang value placeholdernya dengan “Restaurant Name”. Placeholder berfungsi untuk menampilkan teks pemberitahuan jika tidak ada teks di dalam text field tersebut seperti yang terlihat pada gambar dibawah ini.

Untuk cell ketiga dan keempat, ulangi prosedur yang sama tetapi isi labelnya menjadi Type dan Location.

Untuk cell kelima, pindahkan label ke cell dan beri nama cellnya dengan “Have You Been Here”. Kemudan tambahkan dua tombol ke dalam cell. Beri nama tombol pertama dengan Yes dan tombol kedua dengan No. Untuk tombol yes, ganti warna nya menjadi merah, dan tombol no ganti warnannya menjadi abu-abu, berikut contoh hasilnya:

Contoh design cell sederhana untuk menambahk restaurant
Contoh design cell sederhana untuk menambahk restaurant

Untuk menyelesaikan halaman layout, tanamkan table view controller di navigation controller. Untuk melakukannya pilih table view controller lalu pilih Editor>Embed in>Navigation Controller dari menu Xcode. Isi judul dari navigation bar dengan “New Restaurant”.

Seperti yang kita lihat, tanpa menggunakan satu pun code kita telah menggunakan static table view.


 

Menambahkan Segue

Sejauh ini ktia telah membuat view controller, selanjutnya kita akan menampilkan halaman ini ketika user menekan tombol + pada halaman utama. Untuk melakukannya kita harus menghubungkan view controller dengan segue. Pada Interface Builder, pindahkan tombol bar dari Object Library ke navigation bar yang ada di controller FoodPin. Di Attribute Inspector, ganti identifiernya menjadi Add dan nanti akan menjadi icon + seperti gambar dibawah ini.

Menambahkan tombol bar pada main screen
Menambahkan tombol bar pada main screen

Selanjutnya tekan dan tahan tombol control, klik icon + dan pindahkan ke navigation controller untuk menanamkan Restaurant view controller yang baru. Lepaskan tombol dan pilih “Modal” untuk tipe seguenya. Isi identifier dari segue dengan “addRestaurant” dibawah Attribute Inspector.

Menambahkan segue untuk icon +
Menambahkan segue untuk icon +

Dengan modal view controller yang telah kita buat sebelumnya, kita harus membuat tombol batal jika user memiliki pilihan menambahkan restaurant. Jadi tambahkan tombol baru ke navigation bar untuk New Restaurant. Di Attribute Inspector, isi identifiernya dengan Cancel dan dengan warna putih.

Ketika user menekan tombol Cancel, modal view akan menutup. Untuk itu kita harus mendefinisikan unwind segue. Buka file RestaurantTableViewController.swift lalu tambahkan method berikut:


@IBAction func unwindToHomeScreen(segue:UIStoryboardSegue) {
}

Method ini memberitahu code untuk menutup modal view dengan unwound. Dengan method kosong sudah cukup untuk menutup modal viewnya. Buka kembali Interface Builder, lalu tekan dan tahan tombol control dan pindahkan tombol Cance ke icon Exit yang ada di dock view controller seperti yang terlihat pada gambar dibawah ini. Setelah dipindahkan, pilih unwindToHomeScreen untuk action segue nya.

Menambahkan unwind segue untuk tombol cancel
Menambahkan unwind segue untuk tombol cancel

Sekarang mari kita lakukan testing, compile dan jalankan project. Setelah aplikasi berjalan, sentuh tombol + dan seharunya kita akan melihat halaman restaurant yang baru untuk input data menambahkan restaurant.


 

Menampilkan Photo Library menggunakan UIImagePickerController

Ketika cell pertama dari table view di sentuh, kita ingin aplikasi menampilkan photo library dan memperbolehkan user untuk memilih salah satu foto. Untuk mengimplementasikannya yaitu dengan UIKit framework menggunakan class UIImagePickerController yang nantinya dapat memilih foto dari photo library. Class ini juga dapat digunakan untuk mengambil gambar menggunakan camera.

Tetapi karena kita melakukan testing kita tidak dapat menggunakan kamera, karena untuk melakukan testing menggunakan kamera kita harus menggunakan device aslinya. Ok untuk mempermudahnya kita hanya perlu menggunakan foto yang sudah ada di photo library.

Pertama kali buat class baru dengna nama “AddTableViewController” dan isi subclassnya dengan UITableViewController. Pada storyboard, pilih controller New Restaurant dan jadi pasang menjadi custum class untuk AddTableViewController di Identity Inspector.

Pada file AddTableViewController.swift, hapus method yang tidak kita butuhkan pada halaman static table view:

Selanjutnya tambahkan method untuk mendeteksi sentuhan untuk menakses photo library:

Seperti yang telah dijelaskan di pembahasan-pembahasan sebelumnya bahwa method tableView(_:didSelectRowAtIndexPath:) dipanggil ketika cell dipilih. Kita hanya ingin mengakses photo library ketika salah satu cell dipilih, dan untuk melakukannya kita harus membuat instansi dari UIImagePickerController dan mengisi sourceType nya dengan .PhotoLibrary, dengan memanggil method presentViewController.

Nah beres, sekarang compile dan jalankan aplikasi. Sentuh cell kamera dan seharunya membawa kita ke photo library. Ketika selesai, jangan lupa menekan tombol OK untuk memperbolehkan aplikasi mengakses Photos.

Simulator biasanya sudah ada dengan beberapa koleksi foto, jika Anda ingin menggunakan foto sendiri, kita hanya perlu memindahkannya dari Finder ke simulator. Hal itu akan otomatis menambakan aplikasi foto di simulator.

Nah jika ingin mengambil sebuah gambar, kita hanya perlu mengganti sourceType nya menjadi .Camera.


 

UIImagePickerControllerDelegate

Bagimana kita bisa tau foto yang dipilih oleh user? Nah untuk berinteraksi dengan tampilan image picker, AddTableViewController telah mengadopsi UIImagePickerControllerDelegate dan UINavigationControllerDelegate:

class AddTableViewController: UITableViewController, UIImagePickerControllerDelegate,
UINavigationControllerDelegate

Ketika user memilih foto dari photo library maka method imagePickerController(_:didFinishPickingMediaWithInfo:) dipanggil.

func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo
info: [NSObject : AnyObject]) {
}

Dengan mengimplementasikan method ini, kita bisa mendapatkan foto yang terlpilih dari parameter method.

Sebelum mengimplementasikan method ini, pertama kali mari kita deklarasikan variabel outlet untuk image view. Kemudian kita bisa memasang image view dengan gambar yang dipilih

@IBOutlet weak var imageView:UIImageView!

Buka Interface Builder dan koneksikan image view dari cell dengan imageView variabel outlet.

Selanjutnya, implementasikan method delegate dengna code dibawah ini.

Code diatas menjelaskan tentang image view dengan gambar yang telah dipilih. Terakhir kita panggil method dismissViewControllerAnimated untuk keluar dari image picker. Dengan cara menambahkan code dibawah ini pada method tableView(_:didSelectAtIndexPath:):

imagePicker.delegate = self

Sekarang kita telah bisa melakukan testing aplikasi. Coba pilih foto manapun dari album dan harusnya tampil seperti yang kita inginkan,


 

Memperbaiki Bug Status Bar

Satu hal lagi yang harus kita perbaiki yaitu warna status bar yang berubah dari putih menjadi hitam ketika menampilkan photo library. Saya tida yakin ini merupakan bug dari iOS SDK atau tidak, tetapi untuk memperbaikinya kita hanya perlu menambahkan method dibawah ini pada class AddTableViewController:

Memilih foto pada tampilan gambar
Memilih foto pada tampilan gambar

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh source code bisa didownload disini: https://www.dropbox.com/s/hpybgg9x67rtqng/FoodPinStaticTable.zip?dl=0

Semoga bermanfaat ya Guys, See Yaa .. 😉

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s