[Swift] UITextView - PlaceHolder 적용하기

UITextView를 사용하면 위와 같이 사용자의 정보를 입력받을 수 있다. 

그러나 무엇을 입력해야하는지 사용자 입장에서는 제대로 알 수가 없다. 

 

그래서 PlaceHoler라는 기능을 추가해보기로 했다. 

TextFiled는 PlaceHoler 속성이 있는것으로 아는데, 

TextView는 델리게이트를 활용해 따로 커스텀해줘야 가능하다고 한다. 

 

---

 

 

 

 

extension UpdatePhoneBookView: UITextViewDelegate {
    
    // 아래 함수들은 UITextViewDelegate 프로토콜에 포함된 메서드들
    // 1. 사용자가 텍스트 뷰에 입력을 시작할 때 호출되는 메서드
    func textViewDidBeginEditing(_ textView: UITextView) {
        //텍스트 뷰의 현재 텍스트 색상이 플레이스홀더 텍스트 색상인지 확인
        guard textView.textColor == .systemGray4 else { return }
        //색상이 회색이라면 텍스트 뷰의 내용을 비우고, 텍스트 색상을 어두운 회색으로 변경하여 사용자가 입력할 준비
        textView.text = nil
        textView.textColor = .darkGray
    }
    
    // 2. 사용자가 텍스트 뷰에 입력을 마칠 때 호출되는 메서드
    func textViewDidEndEditing(_ textView: UITextView) {
        if textView.text.isEmpty{
        	// 태그에 따라 적절한 플레이스홀더 텍스트를 설정
            if textView.tag == 1 {
                textView.text = "이름을 입력하세요."
            } else if textView.tag == 2 {
                textView.text = "전화번호를 입력하세요."
            }
            //플레이스홀더 텍스트의 색상을 회색으로 변경
            textView.textColor = .systemGray4
        }
    }
}

가독성을 위해 extension으로 델리게이트를 채택해 하단에 따로 빼주었다. 

 

 

 

 

 

---

하지만 여기서 새로 발견한 오류...

 

수정 시 이름을 입력할 때도 .systemGray4로 보인다는 점이다.

 

 

 

import UIKit
import CoreData

class UpdatePhoneBookViewCotroller: UIViewController {
    var updatePhoneBookView: UpdatePhoneBookView!
    var phoneBookViewController: PhoneBookViewController? //변수가 nil일 수 있음
    var phoneBook: PhoneBook? // 수정할 데이터
    let coreDataManager = CoreDataManager()
    
    //네비게이션바 - "적용" 버튼
    lazy var saveButton: UIBarButtonItem = {
        let button = UIBarButtonItem(title: "적용", style: .plain, target: self, action: #selector(saveButtonTapped))
        return button
    }()
    
    
    override func loadView() {
        // UpdatePhoneBookView를 기본 뷰로 설정
        updatePhoneBookView = UpdatePhoneBookView(frame: UIScreen.main.bounds)
        self.view = updatePhoneBookView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //네비게이션바 설정
        navigationItem.rightBarButtonItem = saveButton
        
        updatePhoneBookView.randomImageButton.addTarget(self, action: #selector(randomImageButtonTapped), for: .touchDown)
      
        if let phoneBook = phoneBook {
            // 전달받은 데이터를 뷰에 표시
            title = "\(phoneBook.name!)"
            updatePhoneBookView.inputName.text = phoneBook.name
            updatePhoneBookView.inputPhoneNumber.text = phoneBook.phoneNumber
            updatePhoneBookView.inputName.textColor = .darkGray //🌟🌟🌟🌟추가사항🌟🌟🌟🌟
            updatePhoneBookView.inputPhoneNumber.textColor = .darkGray  //🌟🌟🌟🌟추가사항🌟🌟🌟🌟
            if let imageData = phoneBook.image {
                updatePhoneBookView.profileImage.image = UIImage(data: imageData)
            }
        }
    }
    
    
    // MARK: - 서버 데이터 불러오는 메서드
    // 서버 데이터 가져오기 - 비동기적으로 동작하는 함수로 리턴형이 아닌, 콜백 함수로 설계
    private func fetchData<T: Decodable>(url: URL, completion: @escaping (T?) -> Void) {
        print(#function)
        let session = URLSession(configuration: .default)
        
        session.dataTask(with: URLRequest(url: url)) { data, response, error in
            guard let data = data, error == nil else {
                print("데이터 로드 실패")
                completion(nil)
                return
            }
            let successRange = 200..<300
            if let response = response as? HTTPURLResponse, successRange.contains(response.statusCode) {
                guard let decodeData = try? JSONDecoder().decode(T.self, from: data) else {
                    print("데이터가 없음")
                    completion(nil)
                    return
                }
                completion(decodeData)
            } else {
                print("응답 오류")
                completion(nil)
            }
        }.resume()
    }
    
    // MARK: - 서버에서 랜덤 포켓몬 데이터를 불러오는 메서드
    private func pokemonInfoData() {
        let urlComponents = URLComponents(string: "https://pokeapi.co/api/v2/pokemon/\(Int.random(in: 1...1000))")
        
        guard let url = urlComponents?.url else {
            print("잘못된 URL")
            return
        }
        // 데이터를 가지고 오는 메서드 추출
        fetchData(url: url) { [weak self] (pokemon: Pokemon?) in
            // guard let 을 통해 self를 다시 강한참조를 하여 안전하게 사용
            guard let self, let pokemon else { return }
            // 메인 스레드로 설정을 해주지 않으면 백그라운드 스레드에서 돌아가서 안좋음
            guard let imageUrl = URL(string: pokemon.sprites.frontDefault) else { return }
            // image 를 로드하는 작업은 백그라운드 쓰레드 작업 : Data(contensOf:)
            if let data = try? Data(contentsOf: imageUrl) {
                if let image = UIImage(data: data) {
                    // 이미지뷰에 이미지를 그리는 작업은 UI 작업이기 때문에 다시 메인 쓰레드에서 작업.
                    DispatchQueue.main.async {
                        self.updatePhoneBookView.profileImage.image = image
                    }
                }
            }
        }
    }
    
    
    //MARK: - @objc 메서드
    //"랜덤 이미지 생성" 버튼 액션
    @objc
    func randomImageButtonTapped(){
        pokemonInfoData()
    }
    
    //"적용" 버튼 액션
    @objc
    func saveButtonTapped(){
        if let name = updatePhoneBookView.inputName.text,
           let phoneNumber = updatePhoneBookView.inputPhoneNumber.text,
           let image = updatePhoneBookView.profileImage.image {
            
            if let phoneBook = phoneBook {
                // 기존 데이터를 업데이트
                coreDataManager.updateData(currentPhoneNumer: phoneBook.phoneNumber!, newName: name, newPhoneNumber: phoneNumber, newImage: image)
            } else {
                // 새로운 데이터를 생성
                coreDataManager.createData(name: name, phoneNumber: phoneNumber, image: image)
            }   
            self.navigationController?.popViewController(animated: true)
        }
    }
}

import UIKit
import SnapKit

class UpdatePhoneBookView: UIView {
    
    let updatePhoneBookViewCotroller = UpdatePhoneBookViewCotroller()
    var phoneBookViewController: PhoneBookViewController?
    
    var profileImage: UIImageView = {
        let image = UIImageView()
        image.layer.borderColor = UIColor.systemGray4.cgColor
        image.contentMode = .scaleAspectFit
        image.clipsToBounds = true
        image.layer.borderWidth = 1
        image.layer.cornerRadius = 100
        return image
    }()
    lazy var randomImageButton: UIButton = {
        let button = UIButton()
        button.setTitle("랜덤 이미지 생성", for: .normal)
        button.backgroundColor = .systemGray5
        button.setTitleColor(.black, for: .normal)
        button.layer.cornerRadius = 20
        return button
    }()
    var inputName: UITextView = {
        let textView = UITextView()
        textView.textColor = .systemGray4
        textView.font = .systemFont(ofSize: 16)
        textView.backgroundColor = .white
        textView.text = "이름을 입력하세요."
        textView.tag = 1
        
        // 테두리 설정
        textView.layer.borderColor = UIColor.systemGray4.cgColor
        textView.layer.borderWidth = 1.0
        textView.layer.cornerRadius = 8.0
        return textView
    }()
    var inputPhoneNumber: UITextView = {
        let textView = UITextView()
        textView.textColor = .systemGray4
        textView.font = .systemFont(ofSize: 16)
        textView.backgroundColor = .white
        textView.text = "전화번호를 입력하세요."
        textView.tag = 2
        
        // 테두리 설정
        textView.layer.borderColor = UIColor.systemGray4.cgColor
        textView.layer.borderWidth = 1.0
        textView.layer.cornerRadius = 8.0
        return textView
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        configureUI()
        
        inputName.delegate = self
        inputPhoneNumber.delegate = self
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    private func configureUI(){
        self.backgroundColor = .white
        
        [profileImage, randomImageButton, inputName, inputPhoneNumber].forEach{ self.addSubview($0) }
        
       //오토레이아웃...
    }
}


//MARK: -PlaceHolder 설정
extension UpdatePhoneBookView: UITextViewDelegate {
    
    // 아래 함수들은 UITextViewDelegate 프로토콜에 포함된 메서드들
    // 1. 사용자가 텍스트 뷰에 입력을 시작할 때 호출되는 메서드
    func textViewDidBeginEditing(_ textView: UITextView) {
        
        //텍스트 뷰의 현재 텍스트 색상이 플레이스홀더 텍스트 색상인지 확인
        guard textView.textColor == .systemGray4 else { return }
        //색상이 회색이라면 텍스트 뷰의 내용을 비우고, 텍스트 색상을 어두운 회색으로 변경하여 사용자가 입력할 준비
        if textView.text == "이름을 입력하세요." || textView.text == "전화번호를 입력하세요." {
            textView.text = nil
            textView.textColor = .darkGray
        } else {
            textView.textColor = .darkGray //사용자가 값을 입력된 상태 일 때
        }
    }
    
    // 2. 사용자가 텍스트 뷰에 입력을 마칠 때 호출되는 메서드
    func textViewDidEndEditing(_ textView: UITextView) {
        if textView.text.isEmpty{
            if textView.tag == 1 {
                textView.text = "이름을 입력하세요."
            } else if textView.tag == 2 {
                textView.text = "전화번호를 입력하세요."
            }
            //플레이스홀더 텍스트의 색상을 회색으로 변경
            textView.textColor = .systemGray4
        }
    }
}