Hello world~ Skillist입니다.
여러분, 오늘은 UnderLine을 가지는 TextField를 구현할거에요.
이렇게 underLine을 가지고 있죠? 그뿐만이 아닙니다.
focus를 가지면 underLine 색상이 tint색상으로 변경돼요. 티가 잘 안날거 같은데 보이나요?
게다가, error 발생시 빨간색으로 error를 표시할 수 있어요.
Q. 와~우. 이걸 어떻게 구현해요??
A. 그냥 하면 됩니다.
그럼, 빡세게 가봅시다!!
15, 16라인 : placeholder의 string과 color을 저장할 수 있는 저장 프로퍼티를 선언합니다.
18라인 : under에 추가할 line입니다. 아주 간단하죠?
24라인 : 초기화할때, underLine을 추가하고, SnapKit으로 bottom에 추가합니다.
37, 38라인 : textField에 대한 수정 시작과 종료에 대한 action을 추가할게요.
어떤 action인지 볼게요
72라인 : textField 수정 시작하면, 54라인을 통해 placeholder의 색상을 변경합니다. 왜 변경하냐면, error인 경우 placeholder의 컬러가 빨간맛이거든요. 이럴 원상복귀 해주기 위함이에요.
73라인 : 또한 underLine의 색상도 변경합니다.
76라인 : 수정이 끝나면, underLine 색상을 변경합니다.
placeholder의 값과 색상 설정 메소드 입니다.
다음은 에러 표시 메소드에요
생각한것보다 엄청 쉽죠??????
잘못되거나 부족한 내용 등, 피드백 감사합니다!
Skillist의 Unsplash 프로젝트
https://github.com/DeveloperSkillist/UnsplashCloneCode
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 전체 코드 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
import UIKit
import SnapKit
//underLine을 가진 TextField
class UnderLineTextField: UITextField {
//placeHolder 컬러값
lazy var placeholderColor: UIColor = self.tintColor
lazy var placeholderString: String = ""
private lazy var underLineView: UIView = {
let lineView = UIView()
lineView.backgroundColor = .white
return lineView
}()
override init(frame: CGRect) {
super.init(frame: frame)
//underline 추가 및 레이아웃 설정
addSubview(underLineView)
underLineView.snp.makeConstraints {
$0.top.equalTo(self.snp.bottom)
$0.leading.trailing.equalToSuperview()
$0.height.equalTo(1)
}
//textField 변경 시작과 종료에 대한 action 추가
self.addTarget(self, action: #selector(editingDidBegin), for: .editingDidBegin)
self.addTarget(self, action: #selector(editingDidEnd), for: .editingDidEnd)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//placeholder 설정
func setPlaceholder(placeholder: String, color: UIColor) {
placeholderString = placeholder
placeholderColor = color
setPlaceholder()
underLineView.backgroundColor = placeholderColor
}
func setPlaceholder() {
self.attributedPlaceholder = NSAttributedString(
string: placeholderString,
attributes: [NSAttributedString.Key.foregroundColor: placeholderColor]
)
}
func setError() {
self.attributedPlaceholder = NSAttributedString(
string: placeholderString,
attributes: [NSAttributedString.Key.foregroundColor: UIColor.red]
)
underLineView.backgroundColor = .red
}
}
extension UnderLineTextField {
@objc func editingDidBegin() {
setPlaceholder()
underLineView.backgroundColor = self.tintColor
}
@objc func editingDidEnd() {
underLineView.backgroundColor = placeholderColor
}
}
'iOS 개발 > Unsplash 클론 코딩' 카테고리의 다른 글
Unsplash - 12. Search 화면 (0) | 2021.12.07 |
---|---|
Unsplash - 11. Account 화면 (0) | 2021.12.04 |
Unsplash - 9. PhtoDetailViewController의 제스처 (0) | 2021.12.01 |
Unsplash - 8. 사진 상세 화면(PhotoDetailViewController, Cell)의 메인 로직 (0) | 2021.12.01 |
Unsplash - 7. 사진 목록 구현하기 (0) | 2021.11.30 |