iOS:類似于美團/支付寶 城市選擇器帶拼音搜索實現

1. 分析原型

效果圖

實現demo

要做的頁面是一個UITableViewUISearchController

2. UITabelView

  • UITableView就分為四種cell 使用.plain類型就好

  • 普通城市就可以用自帶的cell

  • 熱門城市 當前城市和最近城市就必須自定義cell

  • 在數據源方法里利用indexPath創建不同種類cell即可

  • 數據通過加載plist文件即可

cities.plist
    /// 懶加載 城市數據
    lazy var cityDic: [String: [String]] = { () -> [String : [String]] in
        let path = Bundle.main.path(forResource: "cities.plist", ofType: nil)
        let dic = NSDictionary(contentsOfFile: path ?? "") as? [String: [String]]
        return dic ?? [:]
        }()
    /// 懶加載 熱門城市
    lazy var hotCities: [String] = {
        let path = Bundle.main.path(forResource: "hotCities.plist", ofType: nil)
        let array = NSArray(contentsOfFile: path ?? "") as? [String]
        return array ?? []
    }()

3. UISearchController

  • 創建搜索控制器
    /// 搜索控制器
    lazy var searchVC: UISearchController = {
       let searchVc = UISearchController(searchResultsController: self.searchResultVC)
        searchVc.delegate = self
        searchVc.searchResultsUpdater = self
        // 不隱藏導航條
        searchVc.hidesNavigationBarDuringPresentation = false
        searchVc.definesPresentationContext = true
        // 是否關閉蒙版
        searchVc.dimsBackgroundDuringPresentation = false
        searchVc.searchBar.frame = CGRect(x: 0, y: 0, width: ScreenWidth - 114, height: 44)
        searchVc.searchBar.placeholder = "輸入城市名或拼音查詢"
        searchVc.searchBar.delegate = self
        return searchVc
    }()
    /// 搜索結果控制器
    lazy var searchResultVC: ResultTableViewController = ResultTableViewController()
  • UISearchBar加到導航條里若需修改搜索條的width就必須先用一個view去接收再添加到導航條上
let titleView = UIView(frame: searchVC.searchBar.frame)
        titleView.addSubview(searchVC.searchBar)
        self.navigationItem.titleView = titleView
  • 搜索邏輯 (支持拼音搜索)

  • 先判斷searchBar.text是否含有中文字符,如果有

    • 將其轉為拼音 根據首字母在cityDic["首字母"]里遍歷查找
    • 把數據傳給searchResultsController顯示數據即可
  • 若沒有中文字符則進行拼音搜索

    • 根據searchBar.text的首字母 將cityDic["首字母"]里轉換為無空格的拼音遍歷查找即可
    • 需要實現bj => 北京 wh=> 武漢此類搜索則分別獲取兩字的首字母即可
    • 搜索不區分大小寫則調用String里的uppercased()lowercased()對應將字符串轉為大寫和小寫
  • 中文轉拼音

func chineseToPinyin() -> String {
        
        let stringRef = NSMutableString(string: self) as CFMutableString
        // 轉換為帶音標的拼音
        CFStringTransform(stringRef,nil, kCFStringTransformToLatin, false)
        // 去掉音標
        CFStringTransform(stringRef, nil, kCFStringTransformStripCombiningMarks, false)
        let pinyin = stringRef as String
        
        return pinyin
    }

GitHub地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 概述在iOS開發中UITableView可以說是使用最廣泛的控件,我們平時使用的軟件中到處都可以看到它的影子,類似...
    liudhkk閱讀 9,093評論 3 38
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,993評論 19 139
  • 我很喜歡一個人。 我很喜歡一個人,有兩種理解:一、我喜歡一個女孩,有種愛她的沖動,不會討厭她;二、我喜歡獨自一人,...
    f543445203bc閱讀 262評論 0 2
  • 文章:說英國人脫歐干我何事的都是傻子今天,你紅包了嗎? “明天情人節,可我還是一個人,只用紅包能給我一絲慰藉。暗戀...
    Karry的蠢萌女友閱讀 379評論 0 0
  • 什么都藏在心里不說,內心還os一大堆的人,久而久之,會有種全世界都欠我的委屈感,這種人,最惡心。而可悲的是,我也是...
    趙阿拉閱讀 363評論 0 0