像在 Safari 中一样向 UISearchBar 添加 UIProgressView

Question

当您按下刷新时，Safari 的搜索栏会显示进度视图。

我的要求是：

进度视图的圆角应与搜索栏的角相匹配
如果显示取消按钮，进度视图宽度应自行调整。

这是我使用 PureLayout 进行约束的幼稚尝试：

 if let tf = sb.textField {
      tf.addSubview(progressView)

      // Match the search bar's text field height - 1
      progressView.autoPinEdgesToSuperviewEdges(
        with: UIEdgeInsets(top: 0.0, left: 0.0, bottom: 1.0, right: 0.0)
      )
      progressView.isUserInteractionEnabled = false
      progressView.clipsToBounds = true
      progressView.layer.cornerRadius = 12

      let mask = UIView(forAutoLayout: ())
      mask.backgroundColor = UIColor(white: 0.0, alpha: 1.0)

      progressView.addSubview(mask)

      mask.autoPinEdgesToSuperviewEdges(
        with: UIEdgeInsets(top: 0.0, left: 0.0, bottom: 1.0, right: 0.0)
      )
    }

它可以工作，但搜索栏的文本字段失去了灰色背景。

有人有更好的方法吗？

Answer 1

1.你可以用这种方式，它完全适合我。代码如下：

let backview = UIView()
backview.backgroundColor = UIColor.clear
 DispatchQueue.main.async {
        let progress = UIProgressView()

        let searchfield = (self.searchbar.value(forKey: "searchField") as? UITextField)! //searchBar's textField

        progress.frame = CGRect(x: 0, y: searchfield.frame.height - 2, width: self.searchbar.subviews[0].subviews[1].frame.width  , height: 2)
        progress.tintColor = UIColor.systemBlue //Color you want
        progress.progress = 0.0
    
        backview.frame = searchfield.frame
        backview.autoresizingMask = .flexibleWidth
        backview.layer.cornerRadius = 10
        backview.layer.masksToBounds = true
        backview.isUserInteractionEnabled = false
        backview.addSubview(self.progress)

        self.searchbar.addSubview(backview) //self.searchbar is your UISearchBar
    }

2。当您点击 searchBar 时，您可以显示取消按钮并隐藏您的 progressView。 希望对你有所帮助

Answer 2

感谢 virani-vevek 为我指明了正确的方向。这是一个可行的解决方案。

  if let tf = sb.textField {
      let back = UIView()
      tf.addSubview(back)

      back.autoPinEdgesToSuperviewEdges(
        with: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
      )
      back.backgroundColor = UIColor.clear
      back.isUserInteractionEnabled = false
      back.layer.cornerRadius = 12
      back.layer.masksToBounds = true
      back.addSubview(progress)

      progress.autoPinEdgesToSuperviewEdges(
        with: UIEdgeInsets(top: tf.frame.height - 1, left: 0, bottom: 0, right: 0)
      )

      progress.trackTintColor = .clear
      progress.tintColor = Theme.current.tintColor
      progress.progress = 0.5 // debug value
    }

像在 Safari 中一样向 UISearchBar 添加 UIProgressView

Adding a UIProgressView to UISearchBar like in Safari

uisearchbar

uiprogressview

ios

swift