Unsplash - 10. underLine을 가지는 TextField

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

GitHub - DeveloperSkillist/UnsplashCloneCode: 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
    }
}