본문 바로가기
개발/ios

SwiftUI TextField 에서 placeholder color 변경하기

by 매몰 2022. 7. 29.

 

안녕하세요 오랜만에 글을 올립니다~

그동안 나이만 먹고 살림살이는 나아지지 않아 슬프지만..

오늘도 저처럼 힘겨운 날을 보내고 계실 개발자분들을 위해 조금이라도 힘내시라고 작은 지식 하나 공유해 봅니다

 

이번 포스팅은 SwiftUI TextField 에서 겪은 삽질? 에서 비롯되었는데요..

문자를 입력하기 전 디폴트로 뜨는 희미한 도움말인 placeholder 의 글자색이 변경이 안되는 겁니다!!

UIKit에선 오래전부터 알려진 방식으로 손쉽게 할수 있었는데,

SwitfUI 이넘은 아직 생긴지 얼마 안되서 그런지 구글신의 힘도 미약하고, 잘 안되서...

SwiftUI의 특성을 최대한 이용해 아래와 같이 만들어 봤습니다.

 

 

textfield costom 뷰...

 

import SwiftUI

struct PlaceHolderField: View {
    private let titleKey: LocalizedStringKey
    private let font: Font?
    private let color: Color?
    private let align: Alignment
    
    @Binding private var text: String
    
    init(_ titleKey: LocalizedStringKey /*도움말*/, font: Font? = nil /*내용과 폰트를 다르게 하고 싶다면 입력*/, color: Color? = nil /*내용과 색을 다르게 하고 싶다면 입력*/, align: Alignment = .leading /*정렬*/, text: Binding<String> /*내용*/) {
        self.titleKey = titleKey
        self.font = font
        self.color = color
        self._text = text
        self.align = align
    }
    
    var body: some View {
        TextField("", text: $text)
            .background(
                Text(text.isEmpty ? titleKey : "")
                    .modifier(FontModifier(font: font))
                    .modifier(ColorModifier(color: color))
                , alignment: align)
    }
    
    struct FontModifier: ViewModifier {
        let font: Font?
        
        func body(content: Content) -> some View {
            if font == nil {
                content
            }
            else {
                content
                    .font(font)
            }
        }
    }
    
    struct ColorModifier: ViewModifier {
        let color: Color?
        
        func body(content: Content) -> some View {
            if color == nil {
                content
            }
            else {
                content
                    .foregroundColor(color)
            }
        }
    }
}

 

 

사용은 이렇게...

 

@State private var input = ""

...

PlaceHolderField("help", font: .custom("폰트이름", fixedSize: 10), color: .gray, align: .center, text: $input)
                    .multilineTextAlignment(.center)

 

간단하죠? 따로 설명이 필요없을듯 하네요ㅎㅎ

 

IOS 앱을 최근에 UIkit 대신 SwiftUI 로 개발하면서...

'뭐지? 이상한데 편하네' 라는 오묘한 감정이 드네요ㅎㅎ

 

 

도움이 되셨다면~ 정성으로 빚은 저희 앱!  많은 이용 바래요:)

 

https://meorimal.com/index.html?tab=spaceship

 

우주선 - AI의 좌출우돌 투자 생존기

미리 맛보는 인공지능 투자!

(주)머리말 meorimal.com

 

https://meorimal.com/subway.html

 

지하철어디있니

더이상 고민하지 마세요. 뛸지 말지 딱 보면 알죠.

(주)머리말 meorimal.com

 

사업자 정보 표시
주식회사 머리말 | 고영진 | 서울특별시 송파구 중대로 135 서관 10층 (가락동, 아이티벤처타워) | 사업자 등록번호 : 524-88-00727 | TEL : 010-9990-3674 | Mail : gyjmeba@hanmail.net | 통신판매신고번호 : 2017-서울강남-03941호 | 사이버몰의 이용약관 바로가기