이것은 무엇입니까?

머티리얼 디자인의 UI가 간단하게 구현할 수 있는 Material Components 를 사용해 이런 느낌의 TextField를 만들고 싶다.



Material Components의 설치 방법은 생략한다.

구현해보기

Stryboard의 TextField를 선택하여 MDCOutlinedTextField를 설정합니다.
그러면 Controller에 연결한다.

LoginViewController.swift

class LoginViewController: UIViewController {

    // ユーザ名入力欄
    @IBOutlet weak var userNameTextField: MDCOutlinedTextField!

// 中略

TextField의 속성을 설정합니다.

LoginViewController.swift

override func viewDidLoad() {
        super.viewDidLoad()

        userIdTextField.label.text = "ユーザーなまえ"
        userIdTextField.placeholder = "なまえをいれなさい"

        // TextFieldが選択されていない状態の枠と文字の色
        userIdTextField.setOutlineColor(.gray, for: .normal)
        userIdTextField.setFloatingLabelColor(.gray, for: .normal)

        // 編集中の枠と文字の色
        userIdTextField.setOutlineColor(.blue, for: .editing)
        userIdTextField.setFloatingLabelColor(.blue, for: .editing)
}

이제 위의 동영상과 같은 TextField 구현할 수 있습니다.

문제점

――하지만, 여기까지는 문서를 읽으면 써 있었지만, userIdTextField.label.text ).

해결책

userIdTextField.setNormalLabelColor(.gray, for: .normal)

하, 할 수 있어서 좋았다( ;∀;)