WWDC21) keyboardLayoutGuide

pcsoyeon·2021년 10월 22일
0
post-thumbnail

모바일 앱 서비스에서 빠질 수 없는 UI요소 중 하나는 바로 키보드이다. 사용자로부터 어떠한 input값을 받게 된다면 키보드로 값을 받기 때문이다. (여기서 키보드는 숫자만 있는 키패드, 이메일 형식의 키보드 등 모든 인풋창을 의미)

이러한 필수 요소인 키보드는 작은 모바일 화면의 절반을 차지하기 때문에 (툴바까지 포함하거나 모바일 화면이 작은 경우는 절반 이상을 차지하기도 함) 키보드가 활성화 되었을 때와 그렇지 않을 경우의 분기처리가 필수적이었고 그렇기 때문에 iOS 개발자들에게 귀찮은 작업을 수반하는, 반가운 UI요소는 아니었다.

Every UIView on iOS now has a new keyboardLayoutGuide property. This layout guide enables us to use auto layout constraints to attach our own views to the keyboard in several ways. Not only that, but UIKeyboardLayoutGuide inherits from UITrackingLayoutGuide, a new type of layout guide that can activate and deactivate constraints automatically based on the guide’s proximity to certain screen edges.

그러나, 이번 iOS15버전이 나타나면서 wwdc21에서 새로운 속성 값을 발표하였다. 바로 모든 UIView가 keyboardLayoutGuide 속성을 새롭게 갖게 되었다. 키보드의 위치를 보다 수월하게 구현할 수 있게 되었다.

Attaching a view to the keyboard

코드로 어떻게 작성하면 되는지 구현해보자.

 private lazy var textField: UITextField = {
        let field = UITextField()
        
        field.translatesAutoresizingMaskIntoConstraints = false
        field.borderStyle = .roundedRect
        
        return field
    }()
    
private lazy var backgroundView: UIVisualEffectView = {
        let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .systemChromeMaterial))
        
        effectView.layer.cornerRadius = 8
        effectView.layer.cornerCurve = .continuous
        effectView.translatesAutoresizingMaskIntoConstraints = false
        effectView.clipsToBounds = true
        
        return effectView
    }()

위와 같이 UI 요소를 만들어주고

override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(backgroundView)
        backgroundView.contentView.addSubview(textField)
        
        textField.delegate = self
        
        NSLayoutConstraint.activate([
            textField.leadingAnchor.constraint(equalTo: backgroundView.contentView.leadingAnchor, constant: 8),
            textField.trailingAnchor.constraint(equalTo: backgroundView.contentView.trailingAnchor, constant: -8),
            textField.topAnchor.constraint(equalTo: backgroundView.contentView.topAnchor, constant: 8),
            textField.bottomAnchor.constraint(equalTo: backgroundView.contentView.bottomAnchor, constant: -8),
        ])
        
        NSLayoutConstraint.activate([
            backgroundView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8),
            backgroundView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8),
        ])
        
        NSLayoutConstraint.activate([
            view.keyboardLayoutGuide.topAnchor.constraint(
                equalTo: backgroundView.bottomAnchor,
                constant: 8
            )
        ])

    }

뷰에 올리면 된다. 이때, 마지막 코드를 집중해서보자

NSLayoutConstraint.activate([view.keyboardLayoutGuide.topAnchor.constraint(equalTo: backgroundView.bottomAnchor, constant: 8)])

keyboardLayoutGuide를 사용하면 위와 같이 코드를 작성해서 키보드가 위로 올라올 때 backgroundView와 해당 뷰가 품고 있는 textfield가 키보드와 함께 위로 올라가게 되는 모습을 볼 수 있다.

Handling the floating keyboard on iPad

이번에 추가된 keyboardLayoutGuide 속성의 경우 모바일에서도 많은 이점을 주지만 무엇보다 아이패드에서 해당 속성을 통해 구현할 수 있는 것이 많다.

iPad를 구현할 때 위의 코드를 사용하면 잘 돌아가지 않을 것이다. 그 이유는 iPad는 보다 복잡하게 구성되어 있다. 예를 들어, iPad 환경에서 키보드는 고정된 채로 위치하지 않고 스크린 내에서 자유롭게 움직일 수 있기 때문이다.

iPad에서 키보드가 floating layout을 갖기 위해서는 명시적으로 코드를 작성할 필요가 있다.

(iPad 관련된 부분은 아직 .. 구현하지 않아서 참고 자료만 두고 나중에 구현해봐야겠다 ..)

참고자료
Integrating the virtual keyboard into your app with the keyboard layout guide
WWDC 2021 - Your guide to keyboard layout
Your guide to keyboard layout

    
profile
Slowly But Surely

0개의 댓글