Tuesday, 29 March 2016

autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

How to stop an HTML input field thinking it knows best on mobile:
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

Monday, 28 March 2016

Capturing touch events in iOS/Android webviews

I have some HTML content that is shared between a Xamarin Android app and an ObjC/Swift native iOS app. In the HTML are a few buttons that need to trigger events in the native code of each app. The techniques for capturing these events are well documented, but one has to remember that a touch event might actually be a scroll or a swipe, and the use may not be trying to 'click' the element in question. I overcame this problem by using a boolean flag to see if we're moving:
var moved;
$('.myElement').on('touchend', function(e){
    if(moved != true){
        //do your thing
    }
}).on('touchmove', function(e){
    moved = true;
}).on('touchstart', function(){
    moved = false;
});

Thursday, 10 March 2016

Xamarin Android get image from Assets


            var ims = AppContext.Assets.Open("path/to/my/file/in/assets");
            var drawable = Drawable.CreateFromStream(ims, null);
            imageView.SetImageDrawable(drawable);


Monday, 7 March 2016

Showing layout using bootstrap

Here's a cheeky little bit of css that will make your layout clear when you're building UI with bootsrap. Really handy for building and debugging:

[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }

Wednesday, 2 March 2016

Xamarin Android get drawable by filename

I had to tap into a carousel event and change a background image when it was swiped. The contents of the carousel were populated by a list of objects, with the image file name as a string property. I had to get the drawable with its filename, and prevent the process (getting the file from disk) blocking the UI. Once obtained I had to update the image on the UI thread.

 ThreadPool.QueueUserWorkItem(o =>
            {
                var imgId = Resources.GetIdentifier(_tips[position].Image, "drawable", AppContext.PackageName);
                var drawable = Resources.GetDrawable(imgId);
                RunOnUiThread(() =>
                {
                    _bgImage.SetImageDrawable(drawable);
                });
            });