SwiftUI AttributedString 3탄: TextField에서 해시태그 기능 구현하기

SwiftUI 프레임워크를 사용하면 사용자 인터페이스를 쉽게 구축할 수 있습니다. 그 중에서도 TextField와 AttributedString을 결합하여 다양한 텍스트 스타일링과 기능을 구현할 수 있습니다. 이 글에서는 해시태그 기능을 지원하는 TextField를 구현하는 방법을 단계별로 설명하겠습니다.

준비 작업

먼저, 프로젝트를 생성하고 필요한 라이브러리를 임포트합니다. SwiftUI와 Combine 프레임워크가 필요합니다. 레이아웃을 계획하고 기본적인 TextField를 설정합니다.

swift
import SwiftUI
import Combine

struct ContentView: View {
    @State private var text: String = ""
    var body: some View {
        TextField("Enter text...", text: $text)
            .padding()
    }
}

해시태그 감지 및 스타일링

해시태그를 감지하고 스타일링하기 위해서 AttributedString을 사용할 수 있습니다. 글자가 입력될 때마다 텍스트를 분석하여 해시태그를 찾아 스타일을 부여합니다.

우선, 문자열을 AttributedString으로 변환하고 이를 통해 해시태그를 감지할 함수를 작성합니다.

swift
func attributedString(from text: String) -> AttributedString {
    var attributedString = AttributedString(text)
    let hashtagPattern = "#\w+"
    let regex = try! NSRegularExpression(pattern: hashtagPattern, options: [])
    let matches = regex.matches(in: text, options: [], range: NSRange(location: 0, length: text.utf16.count))

    for match in matches {
        if let range = Range(match.range, in: text) {
            let word = text[range]
            if let attributedRange = Range(word.startIndex..<word.endIndex, in: attributedString) {
                attributedString[attributedRange].foregroundColor = .blue
                attributedString[attributedRange].font = .boldSystemFont(ofSize: 16)
            }
        }
    }

    return attributedString
}

TextField와 AttributedString의 결합

이제 TextField가 사용자의 입력을 받을 때마다 텍스트를 업데이트하고, 해시태그가 있을 경우 스타일을 적용하도록 해야 합니다. 사용자의 입력을 모니터링하기 위해 onChange 수정을 사용할 수 있습니다.

swift
struct ContentView: View {
    @State private var text: String = ""
    @State private var attributedText: AttributedString = AttributedString("")

    var body: some View {
        VStack {
            TextField("Enter text...", text: $text)
                .padding()
                .onChange(of: text) { newText in
                    attributedText = attributedString(from: newText)
                }
            Text(attributedText)
                .padding()
        }
    }
}

이제 사용자가 TextField에 입력할 때마다 attributedString 함수가 호출되어 해시태그가 포함된 텍스트를 스타일링합니다.

추가 기능 구현

해시태그가 있는 텍스트를 눌렀을 때 특정 동작을 수행하도록 하려면, TapGesture를 추가할 수 있습니다. 이를 위해서는 Text 뷰에 제스처를 추가하고, 클릭 이벤트를 처리합니다.

swift
struct ContentView: View {
    @State private var text: String = ""
    @State private var attributedText: AttributedString = AttributedString("")

    var body: some View {
        VStack {
            TextField("Enter text...", text: $text)
                .padding()
                .onChange(of: text) { newText in
                    attributedText = attributedString(from: newText)
                }
            Text(attributedText)
                .padding()
                .onTapGesture {
                    handleTapOnText()
                }
        }
    }

    func handleTapOnText() {
        // 해시태그 클릭 이벤트를 처리하는 로직 추가
        print("Hashtag clicked")
    }
}

해시태그를 클릭하면 handleTapOnText 함수가 호출됩니다. 여기서 해시태그 관련 동작을 구체적으로 처리하면 됩니다.

결론

이번 글에서는 SwiftUI와 AttributedString을 사용하여 TextField에서 해시태그 기능을 구현하는 방법을 살펴보았습니다. 이를 통해 동적인 텍스트 스타일링과 특정 텍스트의 클릭 이벤트를 처리하는 방법을 배웠습니다. 이러한 기능을 활용하면 더욱 풍부하고 사용자 친화적인 앱을 개발할 수 있습니다. 앞으로도 SwiftUI의 다양한 기능들을 탐구하며 여러 시도를 해보는 것을 추천드립니다.