代码之家  ›  专栏  ›  技术社区  ›  kou

如何在导航栏上放置自定义搜索栏?

  •  0
  • kou  · 技术社区  · 6 年前

    我想把自定义搜索栏放在导航栏上,而不是导航栏下。

    我用 SHSearchBar .

    https://github.com/Blackjacx/SHSearchBar

    myStoryboard and Simulator's Image is like this

    var searchBar4: SHSearchBar!
    
    var rasterSize: CGFloat = 11.0
    let searchbarHeight: CGFloat = 44.0
    
    override func viewDidLoad() {
        super.viewDidLoad()
    
        let searchGlassIconTemplate = UIImage(named: "icon-search")!.withRenderingMode(.alwaysTemplate)
    
        // TODO: SearchBar4: centered text lets the icon on the left - this is not intended!
        let leftView4 = imageViewWithIcon(searchGlassIconTemplate, rasterSize: rasterSize)
        searchBar4 = defaultSearchBar(withRasterSize: rasterSize, leftView: leftView4, rightView: nil, delegate: self)
        searchBar4.textAlignment = .center
        searchBar4.text = NSLocalizedString("sbe.exampleText.centered", comment: "")
    
        view.addSubview(searchBar4)
    
        searchBar4.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: rasterSize).isActive = true
        searchBar4.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: rasterSize).isActive = true
        searchBar4.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -rasterSize).isActive = true
        searchBar4.heightAnchor.constraint(equalToConstant: searchbarHeight).isActive = true
    }
    
    func imageViewWithIcon(_ icon: UIImage, rasterSize: CGFloat) -> UIImageView {
        let imgView = UIImageView(image: icon)
        imgView.frame = CGRect(x: 0, y: 0, width: icon.size.width + rasterSize * 2.0, height: icon.size.height)
        imgView.contentMode = .center
        imgView.tintColor = UIColor(red: 235/255, green: 235/255, blue: 241/255, alpha: 1)
        return imgView
    }
    
    func defaultSearchBar(withRasterSize rasterSize: CGFloat, leftView: UIView?, rightView: UIView?, delegate: SHSearchBarDelegate, useCancelButton: Bool = true) -> SHSearchBar {
        var config = defaultSearchBarConfig(rasterSize)
        config.leftView = leftView
        config.rightView = rightView
        config.useCancelButton = useCancelButton
    
        if leftView != nil {
            config.leftViewMode = .always
        }
    
        if rightView != nil {
            config.rightViewMode = .unlessEditing
        }
    
        let bar = SHSearchBar(config: config)
        bar.delegate = delegate
        bar.placeholder = NSLocalizedString("sbe.textfieldPlaceholder.default", comment: "")
        bar.updateBackgroundImage(withRadius: 6, corners: [.allCorners], color: UIColor.white)
        bar.layer.shadowColor = UIColor.black.cgColor
        bar.layer.shadowOffset = CGSize(width: 0, height: 3)
        bar.layer.shadowRadius = 5
        bar.layer.shadowOpacity = 0.25
        return bar
    }
    
    func defaultSearchBarConfig(_ rasterSize: CGFloat) -> SHSearchBarConfig {
        var config: SHSearchBarConfig = SHSearchBarConfig()
        config.rasterSize = rasterSize
        //    config.cancelButtonTitle = NSLocalizedString("sbe.general.cancel", comment: "")
        config.cancelButtonTextAttributes = [.foregroundColor : UIColor.darkGray]
        config.textContentType = UITextContentType.fullStreetAddress.rawValue
        config.textAttributes = [.foregroundColor : UIColor.gray]
        return config
    }
    

    如何将SHSearchBar放在导航栏上?

    1 回复  |  直到 6 年前
        1
  •  0
  •   junaid    6 年前

    你可以把你的搜索栏放在导航的标题视图中。

     lazy var searchBar = UISearchBar(frame: .zero)
         searchBar.placeholder = "Your PlaceHolder"
         navigationItem.titleView = searchBar
    

    希望能帮上忙。。:)