Tracking down WebView URL’s Changes in Xamarin Forms

Hi guys, in this post I just want to share a simple tip that maybe you guys gonna need it. So, in my latest project, I created an app that had a webview on it. Among those web pages that I need to show, there was a certain page that I couldn’t display to the user because it didn’t work properly. In order to keep the business process run well, I had to navigate back to native page whenever user reach that page. In short, I need put a tracker on my webview. I look up to the internet but couldn’t find anything that suit my need so I came up with simple solution.

Custom WebView

The Original Xamarin Forms’s Webview of course didn’t support this tracking feature, even tough you bind a certain variable to source property of web view, it won’t change when you navigate to to other pages. So, we gonna need new property, I call it CurrentUrl.

public class CustomWebView : WebView
{
    public static BindableProperty CurrentUrlProperty =
        BindableProperty.Create(nameof(CurrentUrl), typeof(string), typeof(CustomWebView), null, BindingMode.TwoWay);

    public string CurrentUrl
    {
        get { return (string)GetValue(CurrentUrlProperty); }
        set { SetValue(CurrentUrlProperty, value); }
    }
}

I gonna use this new property to store the current url the web view is showing. No, let see how to store that current url.

WebView Delegate

Because my project requirement only for iOS, for now I just gonna show you how to do it in iOS. But I guess it won’t be much different in Android side.

So, I store the current URL on method ShouldStartLoad in UIWebViewDelegate. That method is run whenever you’re loading  a new page. This is also the method where you put header to web page, if it’s needed.  This is how the renderer and delegate look like.

public class CustomWebViewRenderer : WebViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        Delegate = new CustomUiWebViewDelegate(this);
    }
}

public class CustomUiWebViewDelegate : UIWebViewDelegate
{
CustomWebViewRenderer customWebViewRenderer;
    public CustomUiWebViewDelegate(CustomWebViewRenderer _webViewRenderer = null)
    {
        customWebViewRenderer = _webViewRenderer ?? new CustomWebViewRenderer();
    }

    public override bool ShouldStartLoad(UIWebView webView, NSUrlRequest request, UIWebViewNavigationType navigationType)
    {
       var wv = customWebViewRenderer.Element as CustomWebView;
       wv.CurrentUrl = request.Url.ToString();
       return true;
    }
}

View Model

The last thing you need to do is binding that CurrentUrl property to certain variable in view model. So, whenever it changes, you can trigger something to be done. In the example below, I bind it to a variable with the same name, CurrentUrl.

public class WebViewViewModel : BaseViewModel
{
    private string currentUrl;
    public string CurrentUrl
    {
        get => currentUrl;
        set
        {
            SetProperty(ref currentUrl, value);
DoSomething(value);
        }
    }

    public WebViewViewModel()
    { }

    private void DoSomething(string url)
    {
        // actually do something here<span id="mce_SELREST_start" style="overflow:hidden;line-height:0;">&#65279;</span>
    }
}

Adjusting font Size of Xamarin’s Picker (Part 2)

I already made 2 post about picker, but in this post I want to be more specific about picker in iOS especially about it’s text size. I already told how to do it in Android, now it’s iOS’s turn.  First thing first, now let’s review the custom picker class.

Custom Picker Class

This class actually is almost the same with class in my older post. The only thing I did is changing the name of FontSize property into TextSize. This is because I got warning saying that Font Size is hidden property that Picker already had. I didn’t get this warning when first time I created this class, so I made little adjustment here.

public class CustomPicker : Picker
{
    public static readonly BindableProperty TextSizeProperty =
        BindableProperty.Create(nameof(TextSize), typeof(float), typeof(CustomPicker), 24, BindingMode.TwoWay);

    public float TextSize
    {
        set { SetValue(TextSizeProperty, value); }
        get { return (Int32)GetValue(TextSizeProperty); }
    }

    public static BindableProperty PlaceholderColorProperty =
        BindableProperty.Create(nameof(PlaceholderColor), typeof(string), typeof(CustomPicker), DefaultColor, BindingMode.TwoWay);

    public string PlaceholderColor
    {
        get { return (string)GetValue(PlaceholderColorProperty); }
        set { SetValue(PlaceholderColorProperty, value); }
    }

    public static string DefaultColor => "#CCCCCC";
}

Picker iOS Renderer

Now let’s move on to the picker renderer in iOS project. This class also similar with a class with same name in my old post, when I discussed about placeholder color. The only difference is I added some lines of code to adjust it’s text size. And it’s actually a little bit tricky to do that.

To change the size of picker’s text in iOS, we need to create something called FontDescriptor. Ok, I’m not expert on swift programming, and maybe there’s better way to create FontDescriptor, but I did it by taking the descriptor of UILabel’s font. After I got the description, I made new Font descriptor from it with adjusted size property. Then I create new UIFont with that new description.

Lastly, I put my new font to NSAttributedString so I can update the AttributedPlaceholder and AttributedText property of the iOS picker. I did it so the placeholder and the text had same set of attributes.

public class CustomPickerRenderer: PickerRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        if (e.NewElement != null)
        {
            var customPicker = e.NewElement as CustomPicker;

            // get Bindable properties
            UIColor placeholderColor = GetUIColor(customPicker.PlaceholderColor);
            float textSize = (float)customPicker.TextSize;

            // create font decsriptor
            var label = new UILabel();
            var fontDescriptor = label.Font.FontDescriptor;

            // adjusting font size
            var newDescriptor = fontDescriptor.CreateWithAttributes(new UIFontAttributes()
            {
                Size = textSize
            });
            UIFont font = UIFont.FromDescriptor(newDescriptor, 0);

            // set attributes
            var placeholderAttributes = new NSAttributedString(customPicker.Title, new UIStringAttributes()
            { ForegroundColor = placeholderColor, Font = font });

            Control.AttributedPlaceholder = placeholderAttributes;

            var textAttributes = new NSAttributedString(customPicker.Title, new UIStringAttributes()
            { ForegroundColor = placeholderColor, Font = font });

            Control.AttributedText = textAttributes;<span id="mce_SELREST_start" style="overflow:hidden;line-height:0;"></span>
        }
    }

    private UIColor GetUIColor(string color)
    {
        return UIColor.FromRGB(GetRed(color), GetGreen(color), GetBlue(color));
    }

    private float GetRed(string color)
    {
        Color c = Color.FromHex(color);
        return (float)c.R;
    }

    private float GetGreen(string color)
    {
        Color c = Color.FromHex(color);
        return (float)c.G;
    }

    private float GetBlue(string color)
    {
        Color c = Color.FromHex(color);
        return (float)c.B;
    }
}

 

Sample Code is available in my Github repo