Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building out-of-the-ordinary UI's with Xamarin....

Building out-of-the-ordinary UI's with Xamarin.Forms

Xamarin.Forms is a UI framework which helps you raise the bar even further when it comes to sharing code across multiple mobile platforms. It does so by providing abstractions over common UI elements that can be found in the underlying OS-es.

But what if you need to build a UI that is a little less ordinary, and does not consist of regular buttons and flat lists?

In this session I'll show a UI that is highly customized using custom renderers, and tell you about the options you have as a developer to expand on the out-of-the-box Xamarin.Forms experience. Using an app that is actually in the AppStores as an example, I'll run through code samples and tips & tricks on how to solve platform specific issues when working with Xamarin.Forms.

Roy Cornelissen

March 20, 2015
Tweet

More Decks by Roy Cornelissen

Other Decks in Programming

Transcript

  1. Xamarin.Forms Goal Raise the level of code reuse even further

    by abstracting common UI paradigms into a library Shared app logic Shared UI
  2. UILabel Xamarin.Forms architecture Xamarin.Forms is a thin layer that translates

    XAML controls to native equivalents on each platform Label TextView TextBlock LabelRenderer LabelRenderer LabelRenderer
  3. Xamarin.Forms architecture Xamarin.Forms is a thin layer that translates XAML

    controls to native equivalents on each platform ListView LongListSelector ListViewRenderer UITableView ListView ListViewRenderer ListViewRenderer http://tinyurl.com/xamarin-forms
  4. Bridging platforms with Forms MyEntry Entry MyEntryRenderer_Windows MyEntryRenderer_Android MyEntryRenderer_iOS Xamarin.Platform

    Windows.EntryRenderer Xamarin.Platform Android.EntryRenderer Xamarin.Platform iOS.EntryRenderer Platform specific Shared code
  5. Device services with IoC MyViewModel IMediaPicker WindowsMediaPicker: IMediaPicker AndroidMediaPicker: IMediaPicker

    iOSMediaPicker: IMediaPicker DependencyService.Get<IMediaPicker>(); [assembly: Dependency (typeof (WindowsMediaPicker))]
  6. Platform tweaks Use Device class in shared code • Device.Styles

    Styles for controls, e.g. labels & lists • Device.GetNamedSize Font sizes • Device.Idiom Tablet or phone specific code / behavior • Device.OS Target platform specific code • Device.OnPlatform() Target platform specific values • Device.OpenUri() • Device.StartTimer() • Device.BeginInvokeOnMainThread() Xamarin.Forms.Device
  7. Party time! We want an app for ~300 people They

    must be able to sign up for the party And post pictures to a gallery
  8. Yes… well actually, we want it to look a little

    bit more festive. Something like…
  9. • Sharing code is still possible • Using the Parse

    API • Dealing with data and pictures • We can still use Xamarin.Forms • App has pretty basic navigation flow • Although round and fancy, all in all they’re just buttons (abstraction) • We learned about bridging platform differences • Taking pictures • Using custom renderers to deal with the round buttons
  10. When to use Forms? • When you want to target

    multiple platforms • Data driven apps • UI requirements within feature set offered by Forms • Not much platform specific functionality • Code share is more important than custom UI • When you want to target only one platform • When you want to leverage unique capabilities of the platforms • Highly specialized/polished native UI’s • When you want to keep up with all new features per platform