iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
自我挑戰組

iOS 新手開發的大小事系列 第 24

Day24: [UIKit] UISearchBar 介紹

  • 分享至 

  • xImage
  •  

前言

當資料筆數眾多的時候,就會需要利用搜尋的功能,來過濾不相關的資料,方便我們找到想要的項目,此時就會需要利用 search bar,今天就來介紹 search bar 搭配 table view 做實際的應用。


實際範例

在 view controller 中拉放一個 search bar 和 table view,如下圖,其餘 table view 的設定就不在此贅述

分別把這兩個元件的 outlet 放入 view controller 中

@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tableView: UITableView!

加入 table view 的委任

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
// 省略
}

採用 search bar 的委任並用 extension 的方式加入(方便管理),並用函數 searchBar(_: textDidChange:) 偵測在 search bar 輸入的變化

extension ViewController: UISearchBarDelegate {
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        searchArray = citiArray.filter({ (string) -> Bool in
            return  string.prefix(searchText.count) == searchText
        })
        searching = true
        tableView.reloadData()
    }
}

viewDidLoad() 中加入以下程式碼,讓採用的委任可以順利運作

override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.delegate = self
        tableView.dataSource = self
        searchBar.delegate = self
    }

其餘的程式碼

let citiArray = ["臺北市", "新北市", "新竹縣", "新竹市","桃園市",
                "臺中市", "嘉義市", "臺南市", "高雄市", "屏東縣"]
    
    var searchArray: [String] = [String]()

    // 用此變數表示現在是否為搜尋模式
    var searching = false
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        if searching {
            return searchArray.count
        } else {
            return citiArray.count
        }       
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cellIdentifier = "datacell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
        
        if searching {
            cell.textLabel?.text = searchArray[indexPath.row]
        } else {
            cell.textLabel?.text = citiArray[indexPath.row]
        }
        
        cell.selectionStyle = .none
        
        return cell
    }

實際執行結果


上一篇
Day 23: [UIKit] UICollectionView 介紹
下一篇
Day 25: 玩玩動畫 Animation
系列文
iOS 新手開發的大小事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言