Membuat Search Bar di iOS – FoodPin Apps

Pada postingan kali ini kita akan membahas tentang implementasi Search Bar pada aplikasi FoodPin di iOS. Kita akan membahas bagaimana membuat search bar di iOS, dan apa saja method yang digunakan.

Search Bar Cover

Pengenalan UISearchController

Search Screen
Search Screen

Untuk kebanyakan aplikasi table-based, biasanya memiliki fitur pencarian diatasnya. Nah dipostingan kali ini kita akan mengimplementasikan search bar untuk pencarian data. Untuk mempermudah penjelasan kita akan mengimplementasikannya pada aplikasi FoodPin yang telah kita buat sebelumnya. Dengan search bar, kita akan mempermudah user untuk mencarai restaurant yang diinginkan dan yang tersedia di database aplikasi kita.

Sebenarnya tidak akan susah menambahkan search bar, karena kita hanya butuh beberapa pekerjaan. Di iOS 8, class baru yang dinamakan dengan UISearchController diperkenalkan untuk memperbarui API UISearchDisplatController semenjak di iOS 3.

UISearchController merupakan cara mudah untuk membuat search bar dan mengatur hasil pencarian. Kita tidak hanya dibatasi untuk mengimplementasikan fitur search ini di table view controller tapi juga bisa digunakan di banyak view controller seperti collection view controller.


 

Menggunakan UISearchController

Biasanay, untuk menambahkan search bar pada aplikasi table-based, kita akan menggunakan code dibawah ini:

searchController = UISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
tableView.tableHeaderView = searchController.searchBar
definesPresentationContext = true

Baris pertama code berfungsi untuk membuat instansi dari UISearchController. Jika kita mengirimkan nilai nul, artinya hasil pencarian akan ditampilkan sama dengan tampilan ketika sedang melakukan pencarian. Pilihan lainnya kita bisa menspesifikasikan view controller lain untuk menampilkan hasil pencarian. Mari kita ambil aplikasi FoodPin sebagai contohnya, jika kita menggunakan null, hasil pencarian yang ditampilkan kana akan menampilkan table yang sama persis dengan table awalnya. Jadi jika kita ingin menapilkan hasil pencarian dalam format yang berbeda, kita harus membuat view controller lain dan menspesifikasikannya selama instalasi UISearchController.

Baris kedua dari code memberitahu search controller untuk bertanggung jawab dalam memperbarui hasil pencarian, bisa berupa object.

Baris ketiga dari code berfungsi untuk menambahkan search bar di tampilan header dari table view.

Pasang kondisi definePresentationContext dari current view controller menjadi true. Jadi Ketika menggunakan UISearchController, ini dibutuhkan untuk mendefinisikan property di view control yang ingin dicari.


 

Menambahkan Search Bar

Sekarang mari kita lihat bagaimana menambahkan search bar di aplikasi FoodPin. Buka file RestaurantTableViewController.swift, lalu deklarasikan variabel searchController:

var searchController:UISearchController!

Kemudian tambakan code dibawah ini pada method viewDidLoad :

searchController = UISearchController(searchResultsController: nil)
searchController.searchBar.sizeToFit()
tableView.tableHeaderView = searchController.searchBar
definesPresentationContext = true

Code diatas harusnya sudah familiar karena code diatas juga telah di jelaskan di pembahasan sebelumnya. Method sizeToFit() dipanggil ketika search bar dalam kondisi terlihat dengan navigation bar.

Jika kita meng-compile dan menjalankan aplikasi, seharusnya kita menemukan search bar dibawah navigation bar. Tetapi search bar itu belum bisa difungsikan, karena kita belum mengimplementasikan logika apapun di dalamnya.

Search bar ditambahkan di header table view
Search bar ditambahkan di header table view

 

Memfilter Konten

Search controller tidak bertanggung jawab memfilter data kita. Oleh karena itu kita bertanggung jawab untuk membuat implementasi sendiri untuk memfilter konten. Untuk aplikasi FoodPin, kita memperbolehkan user untuk melakukan pencarian nama dari restaurant. Nah pertama kali deklarasikan variabel baru di RestaurantTableViewController untuk menampilkan hasil pencarian:

var searchResults:[Restaurant] = []

Tambah code dibawah ini untuk membuat method baru agar bisa memfilter konten:

Di Swift, terdapat method bawaan yang di namakan dengan filter untuk memfilter array yang sudah. Oleh karena itu kita hanya perlu membuat syarat filtering di akhir. Pada code diatas kita menggunakan method rangeOfString  untuk melihat jika nama restaurant yang dicari di teks pencarian. Jika pencarian tidak ditemukan, methodinya akan mengembalikan nilai nil/null.


 

Meng-update Hasil Pencarian

Nah sekarang kita telah mengimplementasikan logika pencarian, lalu bagaimana kita bisa memperbarui tampilan untuk hasil pencarian pada aplikasi? Untuk melakukan kita hanya perlu menggunakan protocol UISearchResultUpdating :

class RestaurantTableViewController: UITableViewController, NSFetchedResultsControllerDelegate, UISearchResultsUpdating

Protocol tersebut mendefiniskan method yang dinamakan dengan updateSearchResultForSearchController. Ketika user memilih bar pencarian atau mengisi sesuati didalamnya, method tersebut akan dipanggil. Dengan mengimplementasikan method tersebit, kita menginstruksikan search controller untuk menampilkan hasil pencarian. Tambahkan potongan code dibawah ini pada class RestaurantTabelViewController:

func updateSearchResultsForSearchController(searchController: UISearchController) {
let searchText = searchController.searchBar.textfilterContentForSearchText(searchText)
tableView.reloadData()
}

Kita mendapatkan saran teks pencarian ketika user memasukkan huruf dan kemudian method filterContentForSearchText dipanggil, hingga akhirnya kita secara tidak langsung memanggil ulang data tabel. Seperti yang telah disebutkan sebelumnya, kita menggunakan table view yang sama untuk menampilkan hasil pencarian. Inilah yang dinamakan dengan tableView.reload().

Sekarang table view controller telah bertanggung jawab untuk menampilkan daftar keseluruhan dair restaurant dan hasil pencarian, sekata kita perlu memperbarui beberapa method terkait data source yang ada di table view. Karena hasil pencarian harusnya hanya tampil ketika search controller dalam kondisi aktif. Ketika user menyentuh search filed, tampilan pencarian akan muncul, dan kemudian property active dipasang dalam kondisi true.

Pertama perbarui methood tableView(_:numberOfRowInSection:) :

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// Return the number of rows in the section.
if searchController.active {
return searchResults.count
} else {
return self.restaurants.count
}
}

Ketika search controller dalam keadaan aktif, kita tampilkan jumlah dari hasil pencarian. Jadi ketika search controller tidak dalam keadaan aktif, aplikasi akan menampilkan daftar restaurant secara keseluruhan.

Kedia, perbarui method tableView(_:cellForRowAtIndexPath:) dengan code dibawah ini:

let restaurant = (searchController.active) ? searchResults[indexPath.row] :
restaurants[indexPath.row]

Sekali lagi kita cek jika search controller dalam keadaan aktif. Jika user sedang melakukan pencarian, kita tampilkan restaurant yang diambil dari array restaurant.

Kembali lagi ke fitur share, dimana aplikasi kita menampilkan dua tombol action (Share & Delete) ketika user men-swipe cell, tentunya kita inin menampilkan tombol tersebut pada hasil pencarian. Nah untuk melakukannya kita hanya perlu mengimplementasikan method dibawah ini yang berfungsi untuk mengidikasikan cell dalam kondisi tidak bisa diedit ketika search controller dalam keadaan aktif.

override func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) > Bool {
If searchController.active {
return false
} else {
return true
}
}

Dengan cara yang sama, perbarui method prepareForSegue dengan code berikut:

destinationController.restaurant = (searchController.active) ? searchResults[row] :
restaurants[row]

Ketika mengirimkan restaurant yang dipilih ke detai view controller, kita harus mengecek jika search dalam kondisi aktif dan mengirimkan restaurant yang benar.

Sampai disini kita sudah hampir selesai, hal terakhir yang perlu kita lakukan adalah menambahkan code dibawah ini pada method viewDidLoad :

searchController.searchResultsUpdater = self
searchController.dimsBackgroundDuringPresentation = false

Baris pertama menandakan bawah class sebelumnya search results updater, dan property dimsBackgroundDuringPresentation mengontroler konten selama pencarian.

Nah, kita sudah siap untuk melakukan testing pada fungsi search, dan seharunya akan terlihat seperti gambar dibawah ini.

Cara kerja hasil pencarian
Cara kerja hasil pencarian

 

Memodifikasi Tampilan dari Search Bar

UISearchBar juga bisa dilakukan modifikasi tampilannya seperti mengikuti default atau meng-custom sendiri. Kita bisa mengakses property dari search bar dengan menggunakan code dibawah ini:

searchController.searchBar.tintColor

Berikut beberapa cara untuk memodifikasinya:

  • placeholder – Kita bisa menggunakan property place holder untuk menampilkan teks default ketika user tidak mengisi teks di dalam form pencarian.
  • Prompt – Property propmt memperbolehkan kita untuk menampilkan satu baris text di atas search bar
  • barTintColor – Memasang warna background untuk search bar
  • tintColor – Memberi warna pada element yang ada di search bar. Contohnya kita bisa menggunakannya untuk mengganti warna dari tombol Cancel yang ada di search bar.

Gambar dibawah ini salah satu contoh hasil modifikasi search bar.

Contoh search bar setelah di custom
Contoh search bar setelah di custom

 

Latihan

Sekara aplikasi kita sudah bisa melakuakn pencarian restaurant berdasarkan nama restaurant. Coba kembangkan aplikasi ini dengna fitur pencarian yang baru dimana kita bisa melakukan pencarian bukan hanya berdasarkan nama tapi juga berdasarkan lokasi seperti yang terlihat pada gambar dibawah ini.

Bisa mencari berdasarkan lokasi
Bisa mencari berdasarkan lokasi

Well mungkin cukup sekian pembasan kali ini, oya untuk contoh code di pembahasan kali ini bisa didownload disini: https://www.dropbox.com/s/2jn8ndxod7u9t06/FoodPinSearch.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