UIButton UnderLine, KeyBoardDown - WhenTapped, ViewUp - WhenKeyboardShow, UIImageShadow

Today 8/8

LoginScreen부분 UI작업을 진행했다.

UIButton UnderLine

state별 UIButton Background 넣기, Label RowHeight와 마찬가지로 NSMutableAttributedString을 사용한다.

Extension으로 사용하려면 title(text아님 주의)로 글자를 받아서 setAttributedTitle로 AttributedString을 넣어주면 된다.

func setUnderline() {
    guard let title = title(for: .normal) else { return }
    let attributedString = NSMutableAttributedString(string: title)
    attributedString.addAttributes([.underlineStyle: NSUnderlineStyle.single.rawValue], range: NSRange(location: 0, length: title.count))
    setAttributedTitle(attributedString, for: .normal)
}

[iOS - swift] UIButton underline 설정 방법

KeyBoardDown - WhenTapped

extension UIViewController {
    func hideKeyboardWhenTapped() {
        let tap = UITapGestureRecognizer(target: self, action: #selector(UIViewController.dismissKeyboard))
        tap.cancelsTouchesInView = false
        view.addGestureRecognizer(tap)
    }
    
    @objc func dismissKeyboard() {
        view.endEditing(true)
    }
}

cancelsTouchesInView를 왜 false로 해주어야하는지 이해가 가지 않아 검색해보았다.

예를들어 tap이 아닌 버튼을 클릭하는 이벤트가 발생했다면 false가 되어있지 않으면 버튼이 눌리고, 키보드는 내려가지 않을 것이다.(tap이 아니기때문에 gesture cancel)

하지만 false로 설정해주면, gesture가 cancel되지 않고 버튼이 눌리지 않고 키보드만 내려갈 것이다. (tap이 우선순위를 가지기때문에 gesture 실행)

[ios] Handling UIKit Gestures

ViewUp - WhenKeyboardShow

NotificationCenter을 통해 키보드의 up,down을 감지한다.

그리고 버튼과 마찬가지로 addTarget 여기서는 addObserver를 통해 함수와 연결해준다.

원래는 frame.origin.x-y를 통해 위치값을 바꾸어주는데, snapkit을 통한 constraint 설정을 했기때문에 updateConstraints로 Constraint 변경을 해준다.

override func viewDidLoad() {
		NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow(_:)), name: UIResponder.keyboardWillShowNotification, object: nil)
		NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide(_:)), name: UIResponder.keyboardWillHideNotification, object: nil)		
}

iOS ) 키보드에 의해 TextField가 가려지는 현상 해결 (Swift)

애니메이션이 안되고 끊겨서 작동하길래 animate를 통해 모션을 넣어주려했다.

하지만 그래도 작동하지 않아서 layoutIfneeded를 통해 뷰를 redraw해주었더니 부드러운 모션이 실행되었다.

@objc func keyboardWillShow(_ sender: Notification) {
    UIView.animate(withDuration: 2) {
        self.loginContainerView.snp.updateConstraints { make in
            make.centerY.equalToSuperview().offset(-100)
        }
        self.view.layoutIfNeeded()
    }
}

@objc func keyboardWillHide(_ sender: Notification) {
    UIView.animate(withDuration: 2) {
        self.loginContainerView.snp.updateConstraints { make in
            make.centerY.equalToSuperview().offset(50)
        }
        self.view.layoutIfNeeded()
    }
}

Swift ) SnapKit Animation ( AutoLayout, Animate )

UIImageShadow

디자인 작업(피그마)에서 shadow 넣는 방식과 거의 동일하게 설정을 해주면 된다.

$0.layer.shadowOffset = CGSize(width: 4, height: 4)
$0.layer.shadowOpacity = 0.7
$0.layer.shadowRadius = 2
$0.layer.shadowColor = Colors.Default.gray4.cgColor

[Swift] UIImageView 기본 사용법과 CornerRadius 와 Shadow 넣기