[Swift] UITextField borderStyle 텍스트 필드 테두리 설정

출처 : https://www.pexels.com/ko-kr/photo/9040685/

 

UITextField.BorderStyle

UITextField의 테두리 유형을 설정할 수 있음

 

none

idTextField.borderStyle = .none

• default로 .none 타입

• 테두리 영역이 아무것도 설정 되지 않은채 나타남

---

line

idTextField.borderStyle = .line

• 테두리 영역이 한줄로 나타남

---

bazel

idTextField.borderStyle = .bezel

•  입체감이 있는 베젤 스타일로 텍스트 필드 영역 표시
• 전형적으로 데이터 입력을 받는 영역에서 사용되는 스타일

---

roundedRect

idTextField.borderStyle = .roundedRect

• 라운드를 가진 모서리 스타일로 텍스트 필드 영역을 표시함

 

---

        idTextField.layer.borderColor = UIColor.red.cgColor
        idTextField.layer.borderWidth = 1.0
        idTextField.layer.cornerRadius = 5
        idTextField.borderStyle = .bezel

• layer의 에서 border 설정, UITextField.BorderStyle 동시에 설정할 경우 같은 layer 영역에 표시됨

주의사항

• UITextField.BorderStyle이 .roundedRect 스타일인 경우 custom background image 는 적용되지 않음

idTextField.background = UIImage(named: "test")

• 텍스트필드 영역에 백그라운드 이미지 설정 

        idTextField.background = UIImage(named: "test")
        idTextField.borderStyle = .roundedRect

• 백그라운드 이미지가 있는 상태에서 .roundedRect를 적용할 경우 백그라운드 이미지는 적용되지 않음
• 백그라운드 이미지와 borderStyle을 적용하고 싶은 경우 아래와 같이 수정

        idTextField.layer.borderColor = UIColor.red.cgColor
        idTextField.layer.borderWidth = 1.0
        idTextField.layer.cornerRadius = 5
        idTextField.layer.masksToBounds = true
        idTextField.background = UIImage(named: "test")
//        idTextField.borderStyle = .roundedRect

• borderStyle을 주석 처리하거나 삭제하고 layer.maskToBounds는 true 로 설정

 

 

 

참고 사이트 

https://developer.apple.com/documentation/uikit/uitextfield/borderstyle

Apple Developer Documentation