Forum Xamarin.Forms

Html clickable link in Label

ArthurMauryArthurMaury USMember ✭✭

Hello,
I would like to put some html content inside a Label (or something else if needed).
I managed to do a Custom renderer so that the html is displayed in the Label.
On Android there is no problem with making the links clickable, but on iOS the UILabel doesn't have the "shouldInteractWithURL" attribute, only UITextView has it.
Is there a way to make the html links clickable on both iOS and Android?

Thank you.

Tagged:

Posts

  • ArthurMauryArthurMaury USMember ✭✭

    I found a solution, if someone needs it, here is the code of the custom renderer for iOS:

    class HtmlLabelRenderer : ViewRenderer<Label, UITextView>
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
            {
                base.OnElementChanged(e);
    
                var view = (HtmlLabel)Element;
                if (view == null) return;
    
                UITextView textView = new UITextView(new CGRect(0, 0, view.Width, view.Height));
                textView.Text = view.Text;
                textView.Font = UIFont.SystemFontOfSize((float)view.FontSize);
                textView.Editable = false;
                textView.Bounces = false;
    
                // Setting the data detector types mask to capture all types of link-able data
                textView.DataDetectorTypes = UIDataDetectorType.All;
                textView.BackgroundColor = UIColor.Clear;
    
                // overriding Xamarin Forms Label and replace with our native control
                SetNativeControl(textView);
            }
    }
    
  • fshanssenfshanssen NOMember

    @ArthurMaury said:
    // overriding Xamarin Forms Label and replace with our native control
    SetNativeControl(textView);

    Hi! I tried this solution, but I get an error saying: "Cannot convert from 'UIKit.UITextView' to 'UIKit.UILabel'". You didn't have a problem with that?

    Thanks!

  • ArthurMauryArthurMaury USMember ✭✭
    edited July 2017
    Hi,
    Did you copy/paste the whole code? The inherited class is ViewRenderer<Label, UITextView> which shouldn't cause any error with UILabel.
  • fshanssenfshanssen NOMember

    Aha, that did the trick ;) thank you for a quick reply!

  • fshanssenfshanssen NOMember

    Hi again! Before I tried your solution for clickable links, I could convert the html to rich text, but the links were not clickable. Now, the links are clickable, but the html tags show. Does it show rich text in your solution? Thanks!

  • ArthurMauryArthurMaury USMember ✭✭

    Hi,
    I'm sorry I still have access to the code but I can't test it, I think that this piece of code in the custom renderer should do the trick:

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
    
            var view = (HtmlLabel)Element;
            if (view == null) return;
    
            UITextView textView;
    
            if (Control == null)
            {
                textView = new UITextView();
                SetNativeControl(textView);
            }
            else if (e.PropertyName == Label.TextProperty.PropertyName)
            {
                if (Element != null && !string.IsNullOrWhiteSpace(Element.Text))
                {
                    var attr = new NSAttributedStringDocumentAttributes();
                    var nsError = new NSError();
                    attr.DocumentType = NSDocumentType.HTML;
    
                    var myHtmlData = NSData.FromString(view.Text, NSStringEncoding.Unicode);
                    Control.AttributedText = new NSAttributedString(myHtmlData, attr, ref nsError);
                }
            }
    
        }
    
  • fshanssenfshanssen NOMember

    Thank you, that fixed my problem!

Sign In or Register to comment.