UITextField 点击按钮改变宽度

Question

我想在我的应用程序中创建一个搜索字段，我想知道是否可以从一开始就使其不可见，然后单击一个按钮使其出现，就像下面视频中的放大镜一样。

我曾尝试将 UITextField 的宽度设置为 0，然后制作一个按钮使宽度变大，但我做错了，我不知道是什么。 也许你可以在一个空白项目中做一个例子并显示/链接代码？

我希望你能帮忙:)

Answer 1

UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut, animations: {
        //change view width
    }) { (completed) in
        //you can use completion or you can delete I am using it like that
        self.searchTextview.becomeFirstResponder()
    }

我将其用于我的观点。 您可以根据需要进行更改。 使用 animation 更改约束或宽度

Answer 2

Function 用于扩展 SearchTextField

  func setTextField(setExpand:Bool = false){

        self.txtfldSearch.delegate = self
        self.txtfldSearch.borderStyle = UITextField.BorderStyle.none
        self.txtfldSearch.translatesAutoresizingMaskIntoConstraints = true
        let bottomLine = CALayer()
        bottomLine.backgroundColor = UIColor.red.cgColor
        UIView.animate(withDuration: 0.5) {
          if setExpand{
                      self.txtfldSearch.frame = CGRect(x: 
                      self.viewContainer.frame.origin.x + 8, y: 
                      self.txtfldSearch.frame.origin.y, width: 
                      (self.btnSearch.frame.origin.x - 
                      (self.viewContainer.frame.origin.x + 16)), 
                       height: self.txtfldSearch.frame.size.height)
                       bottomLine.frame = CGRect(x: 0.0, y: 
                      self.txtfldSearch.frame.size.height-2, width: 
                      self.txtfldSearch.frame.size.width, height: 2.0)
            }
       else{
                    self.txtfldSearch.frame = CGRect(x: 
                    self.btnSearch.frame.origin.x - 8, 
                    y: self.txtfldSearch.frame.origin.y, width: 0, 
                    height:self.txtfldSearch.frame.size.height)
                    bottomLine.frame = CGRect(x: 0.0, y: 
                    self.txtfldSearch.frame.size.height-2, width: 
                    self.txtfldSearch.frame.size.width, height: 2.0)
            }  
      }    
    self.txtfldSearch.layer.addSublayer(bottomLine)

}

使用代码进行扩展传递 true 和其他案例传递 false

  self.setTextField(setExpand: true)