[IOS/UIKit] UITextField left, right, top, bottom 패딩 넣는 방법!!

원래 뷰에 마진을 넣을 때 view.layoutMargins 속성에 UIEdgeInsets를 넣어서 padding을 설정했었다. 근데 UITextField는 placeholder모드랑 editing모드가 있어서 layoutMargins적용이 안되는 것 같았다(제 피셜입니다 정확x). 그래서 공식문서를 좀 읽어봤는데 TextField는 뷰의 text editable 영역의 양쪽 좌, 우에 위치한다. 이는 oveerlay left, right view로 불리는데 text 입력 공간 양 옆에 작은 공간이 있기에 이곳을 조정하면 된다. 이미지 또한 넣을 수 있다.

 현재 textfield 상태이다. 앵커를 이용해 좌 우 offset을 20으로, topAnchor의 offset는 30으로 설정했다. 입력하는 순간 textfield의 왼쪽에 바로 붙어서 작성이 된다. 또한 텍스트 필드를 계속해서 작성하다보면 오른쪽에도 꽉 차게 된다.

 이때 위에서 소개한 textField editing 영역이 아닌 overlay area영역(좌, 우)를 이용하면 된다. UIView로 이루어져 있어 이미지나 버튼을 넣어도 되고 여백을 넣어도 된다. 그래서 난 좌 우에 15정도의 여백을 넣었다. 

tf.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 15, height: 0))
tf.leftViewMode = .always

 

 

leftViewMode는 .always로 해야 placeholder상태일때랑 editing상태일때 둘다 동시에 적용 된다!!

오른쪽도 마찬가지로 하고

위 아래는 어떻게할까 고민하다 그냥 heightAnchor의 offset을 이메일텍스트필드.frame.height+60으로 했다!!

그런데 HeightAnchor를 통해 높이를 정하지않고 textfield.setHeight()를 통해 높이를 지정해도 된다.

공부하다 더 좋은 방법이 있으면 글을 새로 갱신할 것이다!!

 

전체코드

static func initialEmailTextField() -> UITextField {
    let tf = UITextField()
    tf.translatesAutoresizingMaskIntoConstraints = false
    tf.textColor = .white
    tf.font = UIFont.systemFont(ofSize: 20)
    tf.attributedPlaceholder = NSAttributedString(string: "Email", attributes: [NSAttributedString.Key.foregroundColor : .lightGray])
    
    //왼쪽뷰 padding설정
    tf.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 15, height: 0))
    tf.leftViewMode = .always
    return tf
}

func setupEmailTextFieldConstraints() {
    NSLayoutConstraint.activate([
    //아이콘의 bottom으로 emailTextfield topAnchor설정!
        emailTextField.topAnchor.constraint(equalTo: instagramIcon.bottomAnchor, constant: 30),
        emailTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
        emailTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
        emailTextField.heightAnchor.constraint(equalToConstant: emailTextField.frame.height + 60)])
}