[Swift] 프로필 수정 화면 구현 - 1.Placeholder 설정하기(UITextField와 UITextField의 차이)

프로필 수정 화면 구현 이전 글

0.Overview

.

.

.

프로필 수정 화면을 구현하기 위한 기본 UI이다. 

여기서 다룰 내용은 TextField와 TextView에 관련된 내용이다.

 

🧐 TextField vs TextView

먼저 둘 다 텍스트를 편집하기 위한 객체이다. 사용자로부터 텍스트를 입력받고, UI에 반영한다

 

TextField와 TextView의 차이가 뭘까, 사실 난 TextField의 존재만 알았다.

TextField에 2줄 이상의 텍스트가 입력되지 않자 해결 방법을 찾다가 TextView를 알게 되었다. 이게 힌트다.

 

TextField는 한 줄만 입력 받을 수 있고, TextView는 여러 줄 입력 받을 수 있다.

 

또 다른 차이로는, Placeholder 설정 방식이다.

TextField의 경우 Placeholder를 스토리보드에서 쉽게 설정 해줄 수 있는 반면, TextView는 코드로만 구현이 가능하다. (TextField도 물론 코드로 구현 가능하다.)

 

* Placeholder란, TextField 혹은 TextView에 사용자가 아무 것도 입력하지 않았을 때 나타나는 텍스트이다.

아래 이미지를 보면, Username 입력 칸에 'Username'이라고 표시된 부분이 바로 Placeholder이다.

 

Username 입력창은 한 줄만 입력받아도 충분하기 때문에 TextField이고, Bio 입력창은 여러 줄 입력 가능하도록 TextView로 구현했다.

여기에 텍스트를 입력하면, 다음과 같이 입력된 텍스트가 나타난다.

 

아직 초보라 스토리보드를 많이 활용하는데, 스토리보드에서 TextField를 클릭하면 우측 인스펙터 영역의 attribute inspector 탭에서 Placeholder를 쉽게 설정할 수 있다.

 

반면에 TextView는 코드로 따로 구현해야 한다.

    class MyProfileEditViewController: UIViewController {
    	// 프로퍼티 선언
    	@IBOutlet weak var bioTextView: UITextView!
        var placeholderLabel: UILabel!
        .
        .

viewDidLoad 함수에 다음과 같이 placeholder에 들어갈 문구, 폰트, 색상, 크기, 위치 등을 지정해준다.

        // bioTextViewD의 placeHolder 설정
        placeholderLabel = UILabel()
        placeholderLabel.numberOfLines = 0
        placeholderLabel.text = "Bio"
        placeholderLabel.font = UIFont.systemFont(ofSize: (bioTextView.font?.pointSize)!)
        bioTextView.addSubview(placeholderLabel)
        placeholderLabel.textColor = .lightGray
        placeholderLabel.isHidden = !bioTextView.text.isEmpty
        placeholderLabel.sizeToFit()
        placeholderLabel.frame.origin = CGPoint(x: 0, y: (bioTextView.font?.pointSize)! / 2)

그러면 아래처럼 Bio라는 Placeholder가 설정된 것을 확인할 수 있다. 하지만 텍스트를 입력했을 때 사라지지 않는다.

텍스트를 입력했을 때 placeholder가 사라지도록 하기 위해서는 텍스트가 입력될 때마다 글자수를 확인하여 placeholder의 숨김 여부를 결정하도록 해야 한다.

 

다음과 같이 구현할 수 있다.

// 텍스트 입력할 때마다 placeholderLabel의 숨김 여부 결정
@objc private func textDidChange(_ notification: Notification) {
        placeholderLabel.isHidden = !bioTextView.text.isEmpty
}

// NotificationCenter에 textDidChange 등록
NotificationCenter.default.addObserver(self,
                                       selector: #selector(textDidChange(_:)),
                                       name: UITextView.textDidChangeNotification,
                                       object: bioTextView)

전체 코드

//  MyProfileEditViewController.swift

import UIKit

class MyProfileEditViewController: UIViewController {
    
    
    @IBOutlet weak var bioTextView: UITextView!
    var placeholderLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupAttribute()
    }
    
    @objc private func textDidChange(_ notification: Notification) {
            placeholderLabel.isHidden = !bioTextView.text.isEmpty
    }
    
    func setupAttribute() {
        
        // NotificationCenter에 textDidChange 등록
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(textDidChange(_:)),
                                               name: UITextView.textDidChangeNotification,
                                               object: bioTextView)
        
        // bioTextViewD의 placeHolder 설정
        placeholderLabel = UILabel()
        placeholderLabel.numberOfLines = 0
        placeholderLabel.text = "Bio"
        placeholderLabel.font = UIFont.systemFont(ofSize: (bioTextView.font?.pointSize)!)
        bioTextView.addSubview(placeholderLabel)
        placeholderLabel.textColor = .lightGray
        placeholderLabel.isHidden = !bioTextView.text.isEmpty
        placeholderLabel.sizeToFit()
        placeholderLabel.frame.origin = CGPoint(x: 0, y: (bioTextView.font?.pointSize)! / 2)
    }

}

 

 

 

참고 링크

https://ios-development.tistory.com/693

[iOS - swift] TextView placeholder 적용 방법

https://roniruny.tistory.com/151

[iOS] NotificationCenter?