swiftUI hiding textfield with firstResponder()

Question

Newbie here

I'm trying to make an "input" in SwiftUI with varying fontSizes.

From what I can tell from other posts, there's no way to do this with the native TextField, so instead I created an HStack with a splicedText and rendering each part of my text separately to achieve the desired result. This bit works fine.

However, now I have both a regular TextField, as well as my "label", and I can't figure out how to hide this textfield and still keep the .decimalPad open.

This is the look I'm trying to achieve:

This is what I have so far:

As you can see my value is showing up twice. one almost properly formatted, and one unformatted below (the TextField).

I tried adding a .hidden() to the TextField, and while this does hide the TextField() my firstResponder() .decimalPad no longer shows up and I have no way to input my value :(

I don't want to just set it to have opacity(0) either as I don't want it to take up any space in my view.

There will eventually be 2 inputs on this screen, and I need to be able to click the "label" to open the .decimalPad again. However I have not gotten this far yet.

Here's the code to render this:

import SwiftUI
import SwiftUIX

struct CreateEntryView : View {
    
    class ViewModel: ObservableObject {
        @Published var value = "$17.00" {
            didSet {
                let validCharSet = CharacterSet(charactersIn: "$1234567890.,")
                
                print("value: " + value)
                // add "$" prefix
                if value.prefix(1) != "$" { value = "$" + value  }
                
                //check if the new string contains any invalid characters
                if (value).rangeOfCharacter(from: validCharSet.inverted) != nil {
                    // remove any invalid characters
                    value = String(value.unicodeScalars.filter {
                        validCharSet.contains($0)
                    })
                }
                
                // replace ',' with '.' (required to handle all locales w/ decimalPad)
                let test = value.replacingOccurrences(of: ",", with: ".")
                print("replace comma: " + test)
                
                
                // check if there's more than 2 decimals
                // check if there's more than 1 dot
                // check if there's more than 1 dollar-sign
                
                
            }
        }
    }
    
    @ObservedObject var viewModel = ViewModel()
    
    // create splicedLabel for making label with varyign fontSize
    var splicedLabel: [String] {
        var spliceString = viewModel.value
        // remove $ from string
        spliceString.remove(at: spliceString.startIndex)
        return spliceString.split(separator: ".").map(String.init)
    }
    
    
    var body: some View {
        VStack {
            HStack(alignment: .bottom, spacing: 0) {
                Text("$")
                    .font(.body)
                    .fontWeight(.bold)
                    .padding(.bottom, 5)
                if self.splicedLabel.indices.contains(0) {
                    Text(self.splicedLabel[0])
                        .font(.largeTitle)
                        .fontWeight(.bold)
                }
                if self.splicedLabel.indices.contains(1) {
                    HStack(alignment: .bottom, spacing: 0) {
                        Text(".")
                            .font(.body)
                            .fontWeight(.bold)
                        Text(self.splicedLabel[1])
                            .font(.body)
                            .fontWeight(.bold)
                    }.padding(.bottom, 5)
                }
            }
            
    
            CocoaTextField("$123", text: $viewModel.value)
                .isFirstResponder(true) // autoFocus
                .keyboardType(.decimalPad)
            
        }
    }
}

Would really appreciate some input on how to achieve this. Maybe I'm going all wrong by trying to use Texts in an HStack for the varying fontSize.

user_6622872 · Answer

Maybe you can do that by using UITextfield and NSAttributedString, which can be decorated with varying font sizes or colors.

import UIKit
import SwiftUI
import Combine

struct MyTextField: UIViewRepresentable {
  private var placeholder: String
  @Binding private var text: String
  private var textField = UITextField()

  init(_ placeholder: String, text: Binding) {
    self.placeholder = placeholder
    self._text = text
  }

  func makeCoordinator() -> Coordinator {
    Coordinator(textField: self.textField, text: self._text)
  }

  func makeUIView(context: Context) -> UITextField {
    textField.placeholder = self.placeholder
    textField.font = UIFont.boldSystemFont(ofSize: 17)
    textField.keyboardType = .decimalPad
    textField.text = self.text
    return textField
  }

  func updateUIView(_ uiView: UITextField, context: Context) {
  }

  class Coordinator: NSObject {
    private var dispose = Set()
    @Binding var text: String

    init(textField: UITextField, text: Binding) {
      self._text = text
      super.init()

      let publisher = NotificationCenter.default
        .publisher(for: UITextField.textDidChangeNotification, object: textField)
        .compactMap { $0.object as? UITextField }
        .share()
        
      publisher.compactMap { $0.text }
        .receive(on: RunLoop.main)
        .assign(to: \.text, on: self)
        .store(in: &dispose)
      
      publisher.receive(on: RunLoop.main)
        .sink(receiveValue: { (textField: UITextField) in
          Coordinator.setAttributedString(textField: textField)
        })
        .store(in: &dispose)
    }
    
    static func setAttributedString(textField: UITextField) {
      guard var text = textField.attributedText?.string else { return }
      text = text.prefix(1) == "$" ? text : "$" + text
      
      let dollarAttributes: [NSAttributedString.Key: Any] = [
        .foregroundColor: UIColor.black,
        .font: UIFont.boldSystemFont(ofSize: 34)
      ]
      let otherAttributes: [NSAttributedString.Key: Any] = [
        .foregroundColor: UIColor.black,
        .font: UIFont.boldSystemFont(ofSize: 17)
      ]
      
      let attributedText = NSMutableAttributedString(string: text)
      attributedText.addAttributes(dollarAttributes, range: NSRange(location: 1, length: text.count - 1))
      
      let strings = text.split(separator: ".")
      if let dollar = strings.first, strings.count > 1 {
        let range = NSRange(location: dollar.count, length: text.count - dollar.count)
        attributedText.addAttributes(otherAttributes, range: range)
      }
      textField.attributedText = attributedText
    }
  }
}

extension MyTextField.Coordinator: UITextFieldDelegate {
  func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    textField.resignFirstResponder()
  }
}

struct ContentView: View {
  @State var text: String = "$"

  var body: some View {
    VStack {
      MyTextField("placeholder", text: self.$text).padding()
      Text(self.text).foregroundColor(.red).padding()
    }
  }
}

swiftUI hiding textfield with firstResponder()

1 Answers