18. UITextField underline

TextField의 경우 제공하는 4가지 형식 말고 다양한 구성을 원하는 경우가 있다.

그중 한가지가 아래와 같이 밑줄을 넣고 underline을 만드는 경우가 있고,

클릭되었을 때 반응하게 만드는 경우도 존재한다.

 

아래의 코드에서는 viewSize와 color을 파라미터로 받게된다.

 

자체적인 viewSize를 사용하는 경우 다양한 폰에서 textField의 크기를 인식 못한다는 점을 발견했다.

그래서 호출하는 당시에 view.bounds.width를 파라미터로 보내면 된다.

 

color은 원하는 컬러를 호출하는 곳에서 결정하도록 만들었다.

 

예를 들어, emailTextField: UITextField 에서 수정을 "시작할 때 혹은 끝낼 때" 호출되는 함수에서 색을 지정해주면 위의 그림과 같이 수정된다.

 

extension ViewController: UITextFieldDelegate {
    
    func textFieldDidBeginEditing(_ textField: UITextField) {
        textField.underlined(viewSize: view.bounds.width, color: UIColor.systemOrange)
    }
    
    func textFieldDidEndEditing(_ textField: UITextField) {
        textField.underlined(viewSize: view.bounds.width, color: UIColor.systemGray)
    }
}

import Foundation
import UIKit

extension UITextField {
    func underlined(viewSize: CGFloat, color: UIColor){
        let border = CALayer()
        let width = CGFloat(1)
        border.borderColor = color.cgColor
        border.frame = CGRect(x: 0, y: self.frame.size.height + 10, width: viewSize - 48, height: width)
        border.borderWidth = width
        self.layer.addSublayer(border)
    }
}