Swift - 搜索条(UISearchBar)的用法

1,搜索条Options属性还可设置如下功能样式:

Shows Search Results Button:勾选后,搜索框右边显示一个圆形向下的按钮,单击会发送特殊事件。

Shows Bookmarks Button:勾选后,搜索框右边会显示一个书本的按钮,单击会发送特殊事件。

Shows Cancel Button:勾选后,搜索框右边会出现一个“Cancel”按钮,单击会发送特殊事件。

Shows Scope Bar:勾选后,会在搜索条下面出现一个分段控制器。

2,下面是一个搜索条的使用样例,功能如下:

(1)在Main.storyboard界面里拖入一个Search Bar和一个Table View,Search Bar放到Table View的页眉位置

(2)初始化或者搜索条为空时,表格显示所有数据

(3)搜索条不为空时,表格实时过滤显示匹配的项目

3,效果图

   

4,代码如下


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

import UIKit

class ViewController: UIViewController,UISearchBarDelegate,

UITableViewDataSource,UITableViewDelegate {

    

    // 引用通过storyboard创建的控件

    @IBOutlet var searchBar : UISearchBar!

    @IBOutlet var tableView : UITableView!

    

    // 所有组件

    var ctrls:[String] = ["Label","Button1","Button2","Switch"]

    // 搜索匹配的结果,Table View使用这个数组作为datasource

    var ctrlsel:[String] = []

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        // 起始加载全部内容

        self.ctrlsel = self.ctrls

        // 注册TableViewCell

        self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "SwiftCell")

    }

    

    // 返回表格行数(也就是返回控件数)

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return self.ctrlsel.count

    }

    

    // 创建各单元显示内容(创建参数indexPath指定的单元)

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)

        -> UITableViewCell

    {

        // 为了提供表格显示性能,已创建完成的单元需重复使用

        let identify:String = "SwiftCell"

        // 同一形式的单元格重复使用,在声明时已注册

        let cell = tableView.dequeueReusableCellWithIdentifier(identify, forIndexPath: indexPath)

            as UITableViewCell

        cell.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator

        cell.textLabel?.text = self.ctrlsel[indexPath.row]

        return cell

    }

    

    // 搜索代理UISearchBarDelegate方法,每次改变搜索内容时都会调用

    func searchBar(searchBar: UISearchBar!, textDidChange searchText: String!) {

        // 没有搜索内容时显示全部组件

        if searchText == "" {

            self.ctrlsel = self.ctrls

        }

        else { // 匹配用户输入内容的前缀

            self.ctrlsel = []

            for ctrl in self.ctrls {

                if ctrl.lowercaseString.hasPrefix(searchText) {

                    self.ctrlsel.append(ctrl)

                }

            }

        }

        // 刷新Table View显示

        self.tableView.reloadData()

    }

    

    // 搜索代理UISearchBarDelegate方法,点击虚拟键盘上的Search按钮时触发

    //func searchBarSearchButtonClicked(searchBar: UISearchBar!) {

        //searchBar.resignFirstResponder()

    //}

    

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

}

--- Main.storyboard ---


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6254" systemVersion="14B25" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="BYZ-38-t0r">

    <dependencies>

        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>

    </dependencies>

    <scenes>

        <!--View Controller-->

        <scene sceneID="tne-QT-ifu">

            <objects>

                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="SwiftInAction_008_012" customModuleProvider="target" sceneMemberID="viewController">

                    <layoutGuides>

                        <viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>

                        <viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>

                    </layoutGuides>

                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">

                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>

                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>

                        <subviews>

                            <tableView clipsSubviews="YES" contentMode="scaleToFill" fixedFrame="YES" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="44" sectionHeaderHeight="22" sectionFooterHeight="22" translatesAutoresizingMaskIntoConstraints="NO" id="eUR-Ky-A8I">

                                <rect key="frame" x="6" y="32" width="320" height="440"/>

                                <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>

                                <searchBar key="tableHeaderView" contentMode="redraw" id="8pv-hH-OQ9">

                                    <rect key="frame" x="80" y="218" width="320" height="44"/>

                                    <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>

                                    <textInputTraits key="textInputTraits"/>

                                    <connections>

                                        <outlet property="delegate" destination="BYZ-38-t0r" id="0l9-UU-iHJ"/>

                                    </connections>

                                </searchBar>

                                <connections>

                                    <outlet property="dataSource" destination="BYZ-38-t0r" id="o1t-B2-xHp"/>

                                    <outlet property="delegate" destination="BYZ-38-t0r" id="p1t-kn-J9Q"/>

                                </connections>

                            </tableView>

                        </subviews>

                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>

                    </view>

                    <connections>

                        <outlet property="searchBar" destination="8pv-hH-OQ9" id="B0M-ya-PE5"/>

                        <outlet property="tableView" destination="eUR-Ky-A8I" id="YCI-P6-0gY"/>

                    </connections>

                </viewController>

                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>

            </objects>

        </scene>

    </scenes>

</document>

上一篇Swift - 将表格UITableView滚动条移动到底部

时间: 2024-08-26 04:20:10

Swift - 搜索条(UISearchBar)的用法的相关文章

iOS 搜索条使用详解

在ios开发中搜索条的使用挺常见的,不过之前一直没用到也没细细研究,最近做外包项目的时候刚好用到,在这里记录一下使用的过程,只要理解了原理,其实还是比较简单的!上传的图片有点大,刚好可以看清楚它的使用效果! 我喜欢一步步的解析控件使用过程,其实真正的用心做一件事情是很享受的,虽然现在的社会都很注重效率和回报,这也是中国这种社会环境下难出大师级的人物的很重要的一个因素.扯得有点远了,只是希望国内开发者不要太急功近利,熟练应用本不是难事,一点点积累就好.下面开始搜索条 UISearchBar 和 U

Mysql全文搜索match against的用法

全文检索在 MySQL 中就是一个 FULLTEXT 类型索引.FULLTEXT 索引用于 MyISAM 表,可以在 CREATE TABLE 时或之后使用 ALTER TABLE 或 CREATE INDEX 在 CHAR. VARCHAR 或 TEXT 列上创建 对于大的数据库,将数据装载到一个没有 FULLTEXT 索引的表中,然后再使用 ALTER TABLE   (或 CREATE INDEX) 创建索引,这将是非常快的.将数据装载到一个已经有 FULLTEXT 索引的表中,将是非常慢

使用CSS3和jQuery可伸缩的搜索条

搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条. HTML 在需要放置搜索条的页面中放置如下html代码,搜索条#search_bar包含一个form#myform表单,表单中放置一个搜索输入框#search,一个搜索按钮.search_btn以及搜索按钮图标.search_ico. <div id="search_bar" class="se

【转】 Pro Android学习笔记(五十):ActionBar(3):搜索条

目录(?)[-] ActionBar中的搜索条 通过Menu item上定义search view 进行Searchable的配置 在activity中将search view关联searchable activity Searchable activity的代码 ActionBar中的搜索条 我们同样可以在Action Bar中嵌入搜索条.在小例子中,我们在action bar中嵌入一个搜索框的widget(称为search view).当我们输入搜索内容,能够在指定的activity中打开(

模仿京东顶部搜索条效果制作的一个小demo

最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 1 #define kScreenWidth [UIScreen mainScreen].bounds.size.width 2 #define kScreenHeight [UIScreen mainScreen].bounds.size.height 3 4 #import "mainViewController.h" 5 6 @interface mainViewController

一个多功能蓝色漂亮的搜索条效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HTML> <HEAD> <TITLE>一个多功能蓝色漂

一个漂亮的DIV搜索条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HTML> <HEAD> <TITLE>搜索条</

Swift - 带结果列表的搜索条(UISearchDisplayController)的用法

(注:自iOS8起,苹果便废弃UISearchDisplayController的使用,改为使用UISearchController来实现类似功能,可参考我的另一篇文章“Swift - 使用UISearchController实现带搜索栏的表格”) UISearchDisplayController控件默认封装了Search Bar和Table View,可同时提供搜索和结果表格显示功能. 下面提供了一个使用样例,同时通过代码定制Search Bar的一些属性来实现自定义的外观和效果,并且展示用

swift UI专项训练17 SearchBar搜索条

搜索栏算是UI中很简单的一个操作了,拖一个搜索栏上来. 搜索栏中比较重要的属性是占位符,也就是图中右侧的Placeholder,比如输入"请输入关键字",显示如下: 这一项是设置背景颜色: Options选项会对搜索框进行一些调整: 比如我们选择第一项,会显示出一个下拉箭头: 接下来看这部分: 这个里面有一些很有意思的选项,比如这个Keyboard Type,当我们在网页输入的时候要输入汉字和数字,当我们输入电话号码的时候只能输入数字,就是用这个选项. 还有这个Return Key,我