如何在UISearchBar右侧搜索图标旁添加竖直线分隔线？

我已实现一个UISearchBar组件，将搜索图标设置为searchTextField内部的bookmarkButton，当前效果如下：

搜索栏当前效果

现有searchBar实现代码：

private func setupSearchBar() {
        searchBar.translatesAutoresizingMaskIntoConstraints = false
        searchBar.backgroundImage = UIImage()
        searchBar.setImage(UIImage(), for: .search, state: .normal)

        searchBar.showsBookmarkButton = true
        searchBar.setImage(UIImage(systemName: "magnifyingglass")?.withTintColor(self.darklightcolor, renderingMode: .alwaysOriginal).applyingSymbolConfiguration(.init(pointSize: 22)), for: .bookmark, state: .normal)

        cancelButtonSearchBar = UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self])
        cancelButtonSearchBar.tintColor = .systemPink

        searchBar.layer.borderColor = darklightcolor.cgColor
        searchBar.layer.borderWidth = 1.5
        searchBar.layer.cornerRadius = 19
        searchBar.layer.backgroundColor = UIColor.clear.cgColor

        searchBar.searchTextField.backgroundColor = .clear

        searchBar.delegate = self

        view.addSubview(searchBar)
    }

需求为在该UISearchBar的搜索图标旁添加一条灰色竖线，目标效果如下图所示：

目前未找到可行实现方式，寻求解决方案。

你当前是把bookmarkButton复用为搜索图标，有两种实现方式都能达到目标效果：

• 方式一：直接给bookmark按钮添加分隔线子视图
  实现成本最低，代码加在你现有setupSearchBar方法末尾即可：

  // 获取搜索图标对应的bookmark按钮
  guard let bookmarkBtn = searchBar.searchTextField.value(forKey: "bookmarkButton") as? UIButton else { return }
  // 初始化分隔线
  let separator = UIView()
  separator.backgroundColor = .systemGray3 // 可根据需求调整灰色深浅
  separator.translatesAutoresizingMaskIntoConstraints = false
  bookmarkBtn.addSubview(separator)
  // 布局约束，参数可根据你的UI效果微调
  NSLayoutConstraint.activate([
      separator.trailingAnchor.constraint(equalTo: bookmarkBtn.trailingAnchor, constant: 8),
      separator.centerYAnchor.constraint(equalTo: bookmarkBtn.centerYAnchor),
      separator.widthAnchor.constraint(equalToConstant: 1),
      separator.heightAnchor.constraint(equalToConstant: 16)
  ])
  // 调整按钮右内边距，避免分隔线紧贴输入文本
  bookmarkBtn.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 12)
  

• 方式二：生成带分隔线的自定义搜索图标（无审核风险）
  如果担心KVC访问bookmarkButton触发App Store审核问题，可以直接把分隔线画到图标上，完全用公开API实现：

  // 生成带右侧竖分隔线的搜索图标
  func makeSearchIconWithSeparator() -> UIImage? {
      let totalSize = CGSize(width: 34, height: 22)
      let renderer = UIGraphicsImageRenderer(size: totalSize)
      return renderer.image { _ in
          // 绘制放大镜图标
          let searchImg = UIImage(systemName: "magnifyingglass")?
              .withTintColor(darklightcolor, renderingMode: .alwaysOriginal)
          searchImg?.draw(in: CGRect(x: 0, y: 0, width: 22, height: 22))
          // 绘制灰色竖线
          UIColor.systemGray3.setFill()
          UIRectFill(CGRect(x: 30, y: 3, width: 1, height: 16))
      }
  }
  
  // 替换你原来设置bookmark图标的代码即可
  searchBar.setImage(makeSearchIconWithSeparator(), for: .bookmark, state: .normal)
  // 微调图标内边距适配布局
  searchBar.searchTextField.bookmarkButton?.imageEdgeInsets = UIEdgeInsets(top: 0, left: -4, bottom: 0, right: 4)
  

两种方式最终效果和你给出的目标图一致，布局参数可以根据自己的设计稿微调。

内容的提问来源于stack exchange，提问作者Tam Nguyen