美文网首页花落√莫相思
30-Swift之UISearchBar

30-Swift之UISearchBar

作者: NetWork小贱 | 来源:发表于2017-06-15 11:18 被阅读106次

    一、UISearchBar 的介绍和用途

    搜索框 UISearchBar
    搜索框广泛应用于App中,在很多商品中能够使你快速找到你想要的商品,就是搜索框的功能。

    二、UISearchBar 的属性和方法介绍

    1、初始化&设置大小&渲染

    /**
     搜索框的初始化
     */
    let NetWorkSearchBar = UISearchBar.init()
    /**
     设置大小
     注意:无论我们设置多少,都不会影响显示的样式。但可以改变背景高度。
     */
    NetWorkSearchBar.frame = CGRect.init(x: 20, y: 30, width: 200, height: 40)
    /**
     渲染
     */
    self.view.addSubview(NetWorkSearchBar)
    

    2、搜索框的样式

    /**
     设置样式
     black:  搜索框整体都是黑色
     blackTranslucent :搜索框整体都是黑色 ,等同于 black
     default : 默认,背景为灰色,搜索框为白色
     blackOpaque : 搜索框整体都是黑色 ,等同于 black
     */
    NetWorkSearchBar.barStyle = .blackOpaque
    

    3、搜索框的代理

    /**
     搜索框的代理事件
     */
    NetWorkSearchBar.delegate = self
    
    
    代理方法
    
    // TODO: 搜索编辑结束时候调用
    func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
    print("搜索编辑结束")
    }
    // TODO: 搜索清楚按钮被点击的时候调用
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    print("搜索清楚按钮被点击了")
    }
    // TODO : 搜索开始编辑的时候调用该函数
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
    print("用户开始编辑")
    }
    // TODO : 收索框标志按钮被点击调用该函数
    func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {
    print("标志按钮被点击")
    }
    // TODO: 搜索按钮被点击的时候调用
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    print("搜索按钮被点击了")
    }
    
    //TODO :搜索记录列表被点击
    func searchBarResultsListButtonClicked(_ searchBar: UISearchBar) {
    print("搜搜记录列表被点击")
    }
    // TODO : 控制是否允许用户搜索编辑结束
    func searchBarShouldEndEditing(_ searchBar: UISearchBar) -> Bool {
    return true
    }
    // TODO : 控制是否允许用户搜索编辑开始
    func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
    return true
    }
    // TODO: 这能够获取搜索框输入的文字变化
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    print(searchText)
    }
    //TODO : 这搜索按钮分类栏的选择时,调用该函数
    func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) {
    
    }
    // TODO:控制搜索框文字的输入
    func searchBar(_ searchBar: UISearchBar, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
    return true
    }
    
    

    4、设置搜索文字& 悬浮提示& 默认提示

    /**
     设置文字
     */
    NetWorkSearchBar.text = "搜一搜"
    /**
     搜索框上的悬浮标志
     */
    NetWorkSearchBar.prompt = "我是谁"
    /**
     搜索框提示文字
     */
    NetWorkSearchBar.placeholder = "来一来"
    

    6、是否要显示标志按钮& 搜索历史按钮& 取消搜索按钮 & 分类按钮

    /**
     是否显示标志按钮
     */
    NetWorkSearchBar.showsBookmarkButton = true;
    /**
     搜索历史下拉列表按钮
     */
    NetWorkSearchBar.showsSearchResultsButton = true
    /**
     是否显示取消按钮
     */
    NetWorkSearchBar.showsCancelButton = true
    /**
    是否显示分类标签
    */
    NetWorkSearchBar.showsScopeBar = true
    

    7、设置背景色& 透明度

    /**
     光标是红色和取消按钮是红色
     */
    NetWorkSearchBar.tintColor = UIColor.red
    /**
     背景是蓝色
     */
    NetWorkSearchBar.barTintColor = UIColor.blue
    
    /**
     控制收索框的透明度
     */
    NetWorkSearchBar.isTranslucent = true
    

    8、设置搜索分类的文字& 图片&获取某一状态的图片

    /**
     设置搜索分类下的文字
     */
    NetWorkSearchBar.scopeButtonTitles = ["水果","旅游"]
    /* 设置分类按钮选中第几个*/
    NetWorkSearchBar.selectedScopeButtonIndex = 1
    /* 是否显示分类标签*/
    NetWorkSearchBar.showsScopeBar = true
    /* 设置分类标签的背景图片*/
    NetWorkSearchBar.scopeBarBackgroundImage = UIImage.init(named: "test.png")
    /**
     设置搜索分类某一状态的背景图片
     */
    NetWorkSearchBar.setScopeBarButtonBackgroundImage(UIImage.init(named: "test.png"), for: .selected)
    /* 获取分类标签某一状态的背景图片*/
    let bIamge = NetWorkSearchBar.scopeBarButtonBackgroundImage(for:.selected)
    print(bIamge!)
    /**
     修改分类按钮的文字和样式
     */
    NetWorkSearchBar.setScopeBarButtonTitleTextAttributes([NSFontAttributeName:UIFont.systemFont(ofSize: 10),NSForegroundColorAttributeName:UIColor.red], for: .selected)
    
    

    9、设置搜索标签按某个状态的图片& 获取图片

    /**
     设置搜索控件上各个标签按钮的图片
     search         收索按钮
     clear          清楚按钮
     bookmark       书页按钮
     resultsList    搜索历史按钮
     */
    NetWorkSearchBar.setImage(UIImage.init(named: "test.png"), for: UISearchBarIcon.search, state: UIControlState.selected)
    /* 获取某个按钮某一状态下的图片*/
    let xImage = NetWorkSearchBar.image(for: .search, state: .selected)
    print(xImage!)
    

    10、设置搜索框的背景图片& 获取背景图片

    /**
     设置搜索分类某一状态的背景图片
     */
    NetWorkSearchBar.setScopeBarButtonBackgroundImage(UIImage.init(named: "test.png"), for: .selected)
    /* 获取分类标签某一状态的背景图片*/
    let bIamge = NetWorkSearchBar.scopeBarButtonBackgroundImage(for:.selected)
    print(bIamge!)
    
    

    相关文章

      网友评论

        本文标题:30-Swift之UISearchBar

        本文链接:https://www.haomeiwen.com/subject/luuyqxtx.html