safeAreaLayoutGuide to my inputAccesoryView

Question

So with the new iPhone X, some things in my app are in the wrong position. In the bottom of my app, i have an accesoryView, which is basically an UIView with a textfield and other elements. I saw something about safeAreaLayoutGuide in the new iPhone X, but i do not now how to implement in the accessoryView. So i'm trying to find a code to implement it in my app, so the safeArea does not bother me anymore.

This is the code for the inputAccesoryView

lazy var inputContainerView: UIView = {

    let containerView = UIView()
    containerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 50)
    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.backgroundColor = UIColor.white


    containerView.addSubview(self.inputTextField)
    containerView.addSubview(self.swiche)
    containerView.addSubview(self.separatorLineView)
    containerView.addSubview(self.uploadImageView)


    //x,y,w,h
    self.inputTextField.leftAnchor.constraint(equalTo: self.swiche.rightAnchor, constant: 4).isActive = true
    self.inputTextField.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
    self.inputTextField.rightAnchor.constraint(equalTo: self.uploadImageView.leftAnchor, constant: 4).isActive = true
    self.inputTextField.heightAnchor.constraint(equalTo: containerView.heightAnchor).isActive = true
    self.inputTextField.backgroundColor = UIColor.clear


    //x,y,w,h
    self.swiche.leftAnchor.constraint(equalTo: containerView.leftAnchor, constant: 4).isActive = true
    self.swiche.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
    self.swiche.heightAnchor.constraint(equalToConstant: 30).isActive = true
    self.swiche.widthAnchor.constraint(equalToConstant: 55).isActive = true



    //x,y,w,h
    self.uploadImageView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
    self.uploadImageView.rightAnchor.constraint(equalTo: containerView.rightAnchor).isActive = true
    self.uploadImageView.widthAnchor.constraint(equalToConstant: 47).isActive = true
    self.uploadImageView.heightAnchor.constraint(equalToConstant: 47).isActive = true


    //x,y,w,h
    self.separatorLineView.leftAnchor.constraint(equalTo: containerView.leftAnchor).isActive = true
    self.separatorLineView.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
    self.separatorLineView.widthAnchor.constraint(equalTo: containerView.widthAnchor).isActive = true
    self.separatorLineView.heightAnchor.constraint(equalToConstant: 1).isActive = true


    return containerView

}()




//MARK: AccesoryView
override var inputAccessoryView: UIView? {
    get {

        return inputContainerView

    }
}

Thanks for the help!!!

You should share some code to get a grasp of the context. – Mauricio Chirino Oct 23 '17 at 21:58 — Mauricio Chirino, Oct 23 '17 at 21:58
I edited the post @MauricioChirino – Edwjonn Oct 23 '17 at 22:13 — Edwjonn, Oct 23 '17 at 22:13

score 0 · Answer 1 · answered Oct 25 '17 at 02:02

0

Just what I thought, all you need to do is accessing safeAreaLayoutGuide class before pointing out the constraint. In your case, you need to change constraints like these:

self.inputTextField.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true

Into constraint like these:

self.inputTextField.centerYAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.centerYAnchor).isActive = true

Let me know how it goes.

answered Oct 25 '17 at 02:02

Mauricio Chirino

1,182
17
19

Also, you can check this really good answer https://stackoverflow.com/questions/46344381/ios-11-layout-guidance-about-safe-area-for-iphone-x – Mauricio Chirino Oct 25 '17 at 02:04
I tried that, but what i get is the textfield a little than before. The textfield is in a good position, but the rest of the elements (including the inputAccesory in general) still in the same position – Edwjonn Oct 25 '17 at 03:01
I actually tried that with all the elements, and the get in a good position, but the view they are in, which is the inpuaccesory, still in the same position – Edwjonn Oct 25 '17 at 03:04
Hmm share the repo and I'll take a look – Mauricio Chirino Oct 25 '17 at 18:37

Fabio · Answer 2 · 2017-10-29T09:20:43.910

ok, paste this code before lazy var

override func didMoveToWindow() {
    super.didMoveToWindow()
    if #available(iOS 11.0, *) {
    if let window = self.window {
        self.bottomAnchor.constraintLessThanOrEqualToSystemSpacingBelow(window.safeAreaLayoutGuide.bottomAnchor, multiplier: 1.0).isActive = true
     }
   }
}

now your view is up safeAreaLayoutGuide...but at the bottom you can see the tableview because there is no background (your view is up safeAreaLayoutGuide), for correct the problem I built a white uiview, presented it in inputTextField and set the constraint:

let dummyView = UIView()
    dummyView.backgroundColor = .white
    dummyView.translatesAutoresizingMaskIntoConstraints = false

Now set the constraint:

inputTextField.addSubview(dummyView)
    dummyView.topAnchor.constraint(equalTo: inputTextField.bottomAnchor).isActive = true
    dummyView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    dummyView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    dummyView.heightAnchor.constraint(equalToConstant: 50).isActive = true

This is the hack, but I think that's Xcode bug... I hope this help you...

Fabio · Answer 3 · 2017-10-29T12:50:08.560

I hope that for your code you simply add this bottom constraint for inputTextField and in other elements is needed, and set containerView CGRect frame height to 100:

self.inputTextField.bottomAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.bottomAnchor).isActive = true

and I suppose that you can delete:

self.inputTextField.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true

safeAreaLayoutGuide to my inputAccesoryView

3 Answers3