기본 UITExt Field는 촌스러워요~ UITExt Field 맞춤형~

UITExtField는 공통성이 높은 UI입니다.E-Mail 주소와 전화번호 등 한마디로 수납이 가능한 짧은 텍스트를 입력할 수 있다.
그러나 기본 Text Field는 외관이 매우 간단하기 때문에 맞춤형 디자인이 필요하다.
이번에는 비망록 대신 실제 응용 개발에 사용된 맞춤형 기술을 총결하였다.

높이 변경하고 싶어요.

Before

After

기본 UIText Filed는 높이가 작아 헤더를 뽑기가 매우 어렵습니다.높이를 바꾸다.프레임의 높이를 바꿉시다.

import UIKit

class CustomTextField: UITextField {

    override func layoutSubviews() {
        super.layoutSubviews()

        self.frame.size.height = 50 // ここ変える       
    }
}

밑줄 치고 싶다.

안드로이드를 제작하는 머티리얼 디자인은 흔한 디자인을 줄 수 있다.이것은 밑줄로 문자 입력 상자를 표시하는 디자인이다.
먼저 밑줄을 치려면 밑줄을 표현하는 UIView를 만들어 Text FieldView에 추가해야 한다.

import UIKit

class CustomTextField: UITextField {

    // 下線用のUIViewを作っておく
    let underline: UIView = UIView()

    override func layoutSubviews() {
        super.layoutSubviews()

        self.frame.size.height = 50 // ここ変える

        composeUnderline() // 下線のスタイルセットおよび追加処理
    }

    private func composeUnderline() {
        self.underline.frame = CGRect(
            x: 0,                    // x, yの位置指定は親要素,
            y: self.frame.height,    // この場合はCustomTextFieldを基準にする
            width: self.frame.width,
            height: 2.5)

        self.underline.backgroundColor = UIColor(red:0.36, green:0.61, blue:0.93, alpha:1.0)

        self.addSubview(self.underline)
        self.bringSubviewToFront(self.underline)
    }
}

이렇게 하면 밑줄을 추가할 수 있다.하지만 이대로 가면 묵인하는 틀이 남아서 불편하다.(어휘력)
layoutSubviews에서 이 문제를 해결합니다.라고 덧붙였다.

...
    override func layoutSubviews() {
        super.layoutSubviews()

        self.frame.size.height = 50 // ここ変える

        composeUnderline() // 下線のスタイルセットおよび追加処理     

        // 追記
        self.borderStyle = .none
    }
...

이렇게 징그러운 경계를 없앴다.

Plaaceholder를 설정하고 싶습니다.

위 텍스트 입력 UI는 주로 로그인 화면의 E-mail 주소 입력 등에 사용됩니다.이 경우 입력 요소가 많기 때문에 무엇을 입력해야 하는지 명확히 해야 한다.이 때문에는 입력 요소입니다.

...
    override func layoutSubviews() {
        super.layoutSubviews()

        self.frame.size.height = 50 // ここ変える

        composeUnderline() // 下線のスタイルセットおよび追加処理     

        self.borderStyle = .none
        self.placeholder = "[email protected]"  // 追記
    }
...

이렇게 하면 Plaaceholder를 추가할 수 있습니다.
이번 내용을 재현하는 간단한 iOS 프로젝트.위에 놓고 일어났어요.
앞으로는 입력 시 효과 등이 적용되기 때문에 그때 내용을 추가하지 않을까 생각한다.