swifturltextswiftuihighlight

How to Highlight and Clickable if Text is URL SwiftUI


Is there any way to Highlight the Text And clickable if Text contain URL in the chat screen from both

Sender USer Code:-

  import SwiftUI
  struct TextHighlightURL: View {
  var body: some View {
    HStack(alignment: .bottom){
        Spacer()
        Text("2:22 PM").font(.system(size: 10))
            .foregroundColor(.gray)
        HStack {
            Text("www.google.com")
                .foregroundColor(.white)
                .multilineTextAlignment(.trailing)
                .padding(10)
          }
          .background(Color.init("DTR-ChatSendrColor"))
          .cornerRadius(10.0)
         }.padding(.vertical,5)
         .padding()
      }
  }

Output:-

Screenshot

Screenshot

Reciver User Code:-

struct SenderReciverUI1: View {
var body: some View {
    Group {
        HStack(alignment: .bottom){
            VStack(alignment: .leading,spacing:5) {
                HStack(alignment: .bottom) {
                    Text("www.google.com")
                        .foregroundColor(.white)
                        .padding(10)
                        .cornerRadius(10.0)
                   }
              }
             Spacer()
        }.padding(.vertical,5)
        .padding()
       }
     }
 }

Screenshot

My Goal:-

Screenshot

Can someone please explain to me how to show Highlight the Text from both side if sender send the link and receiver receive the link it automatically highlighted And clickable if Text contain URL, I've tried to implement by above but no results yet.

Any help would be greatly appreciated.

Thanks in advance.


Solution

  • You need to create custom UIViewRepresentable for TextView.

    check below code this might help you.

    struct TextView: UIViewRepresentable {
        
        @Binding var text: String
        @Binding var textStyle: UIFont.TextStyle
        
        func makeUIView(context: Context) -> UITextView {
            let textView = UITextView()
            
            textView.delegate = context.coordinator
            textView.font = UIFont.preferredFont(forTextStyle: textStyle)
            textView.autocapitalizationType = .sentences
            textView.isSelectable = true
            textView.isUserInteractionEnabled = true
            textView.isEditable = false
            textView.dataDetectorTypes = .link
            
            return textView
        }
        
        func updateUIView(_ uiView: UITextView, context: Context) {
            uiView.text = text
            uiView.font = UIFont.preferredFont(forTextStyle: textStyle)
        }
        
        func makeCoordinator() -> Coordinator {
            Coordinator($text)
        }
        
        class Coordinator: NSObject, UITextViewDelegate {
            var text: Binding<String>
    
            init(_ text: Binding<String>) {
                self.text = text
            }
            
            func textViewDidChange(_ textView: UITextView) {
                self.text.wrappedValue = textView.text
            }
        }
    }
    

    In your "Receiver User Code:-" same for "Sender User Code"

    struct SenderReciverUI1: View {
    @State private var message = "Hello, www.google.com. this is just testing for hyperlinks, check this out our website https://www.apple.in thank you."
    @State private var textStyle = UIFont.TextStyle.body
    
    var body: some View {
        Group {
            HStack(alignment: .bottom){
                VStack(alignment: .leading,spacing:5) {
                    HStack(alignment: .bottom) {
                        TextView(text: $message, textStyle: $textStyle)
                            .foregroundColor(.white)
                            .padding(10)
                            .cornerRadius(10.0)
                       }
                  }
                 Spacer()
            }.padding(.vertical,5)
            .padding()
           }
         }
     }
    

    let me know if you need anything.