Question

当用户点击文本字段时，我想让屏幕的其余部分变暗（文本框下方，键盘上方的所有内容），以明确他们应该做什么。我相信这涉及到放置透明的UI视图并为其添加手势识别器，但我不太确定如何做到这一点。

当用户到达屏幕时，我有以下代码。这是我要添加新UI视图的地方吗？

override func viewWillAppear(animated: Bool) {
  super.viewWillAppear(animated)
  textField.becomeFirstResponder()
}

谢谢！

Answer 1

我创建了UIView的子类有两个原因：

您可以为其添加手势识别器
您可以添加代理

由于添加到视图的最后一个子视图位于顶部，我首先添加暗层，然后调用bringSubviewToFront(textview)这将使暗层位于有问题的textview和其他所有内容之间。

我用一个函数创建了一个协议。此函数由手势识别器调用，并将DarkView的实例返回给代理。然后委托（您的ViewController）可以从它的superview中删除它。这可以不使用委托功能，但您还必须在文本字段上调用resignFirstResponder()。

不要忘记在ViewController中设置DarkView的委托。

只是一个带有一些文本字段的VC。

class FirstViewController: UIViewController, DarkViewDelegate, UITextFieldDelegate {

    var masterView : UIView!

    override func viewDidLoad() {

        super.viewDidLoad()

        masterView = UIView(frame: self.view.frame)
        masterView.backgroundColor = UIColor.whiteColor()

        let textField1 = UITextField(frame: CGRect(x: 50, y: 20, width: 300, height: 20))
        let textField2 = UITextField(frame: CGRect(x: 50, y: 60, width: 300, height: 20))
        let textField3 = UITextField(frame: CGRect(x: 50, y: 100, width: 300, height: 20))
        let textField4 = UITextField(frame: CGRect(x: 50, y: 140, width: 300, height: 20))

        func styleTextField(field : UITextField) {
            field.layer.borderColor = UIColor.blackColor().CGColor
            field.layer.borderWidth = 2
            field.layer.cornerRadius = field.frame.size.height / 2
            field.backgroundColor = UIColor.whiteColor()
            field.delegate = self
            masterView.addSubview(field)
        }

        styleTextField(textField1)
        styleTextField(textField2)
        styleTextField(textField3)
        styleTextField(textField4)

        self.view.addSubview(masterView)
        // Do any additional setup after loading the view, typically from a nib.

    }

    // delegate function of a textfield 
    func textFieldDidBeginEditing(textField: UITextField) {
        focusUserOn(textField) // darken everything else
    }

    // delegate function of DarkView undarken everything
    func tappedDark(view: DarkView) {

        guard let superV = view.superview else {
            return
        }

        if let textField = superV.subviews.last as? UITextField {
            textField.resignFirstResponder() // also stop editing
        }

        view.removeFromSuperview()
    }

    func focusUserOn(textfield: UITextField) {

        guard let superV = textfield.superview else {
            return
        }

        let darkArea = DarkView(frame: superV.bounds)
        darkArea.delegate = self
        superV.addSubview(darkArea)// add DarkView (everything is dark now)

        superV.bringSubviewToFront(textfield) // bring the textview back to the front.
    }

}

带有手势识别器的UIView的简单子类

class DarkView : UIView, UIGestureRecognizerDelegate {

    weak var delegate : DarkViewDelegate?

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.4)
        let tap = UITapGestureRecognizer(target: self, action: Selector("tapped"))
        tap.delegate = self
        self.addGestureRecognizer(tap)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    deinit {
        print("deinit dark")
    }

    func tapped() {
        guard let del = self.delegate else {
            return
        }
        del.tappedDark(self)
    }
}

在点击VC时传递DarkView的协议

protocol DarkViewDelegate : class {

    func tappedDark(view:DarkView)

}

经过思考

func textFieldDidEndEditing(textField: UITextField) {
    guard let superV = view.superview else {
        return
    }

    for subview in superV.subviews {

        if subview is DarkView {
            subview.removeFromSuperview()
        }

    }
}

Answer 2

是的，你有正确的想法。将你的UIView（让它叫做darkeningView）加到你的故事板上，并将它的背景颜色设置为50％不透明的黑色。将它放在您想要的位置，并添加将其定位的约束。

您还可以将点击手势识别器附加到IB中的darkeningView并设置它的委托。（您可能需要在darkeningView上设置userInteractionEnabled = true，以便它响应点击。

在您的视图中添加IBOutlet。在IB中，将其设置为hidden = true。

在您的代码中，当您激活文本字段进行编辑时，还要设置您的darkeningView.hidden = false。

在用户输入

2 个答案: