Xamarin Evolve - Creating Fast UIs with MonoTouch.Dialog

08ff8b09ff4b88caafd4435ba297ebb1?s=47 Nic Wise
April 17, 2013

Xamarin Evolve - Creating Fast UIs with MonoTouch.Dialog

My talk from Xamarin Evolve 2013 on MonoTouch.Dialog. Code is here:

https://github.com/nicwise/EvolveMonoTouchDialog

08ff8b09ff4b88caafd4435ba297ebb1?s=128

Nic Wise

April 17, 2013
Tweet

Transcript

  1. Nic Wise Fastchicken nicw@fastchicken.co.nz @fastchicken Fast UI Creation with MonoTouch

    Dialog Wednesday, 17 April 13
  2. Nic Wise e. nicw@fastchicken.co.nz t/a. @fastchicken b. http://www.fastchicken.co.nz Full source

    and slides will be on GitHub. Wednesday, 17 April 13
  3. Overview • Overview - what are we trying to solve

    here? • The iOS way - UITableView(Controller) • The easy way - MonoTouch.Dialog • Elements • Styling Wednesday, 17 April 13
  4. Lists Wednesday, 17 April 13

  5. Wednesday, 17 April 13

  6. Wednesday, 17 April 13

  7. Lists are the core mobile interaction Wednesday, 17 April 13

  8. UITableView(Controller) Section Section header Section footer Cell Navigation Bar Wednesday,

    17 April 13
  9. Wednesday, 17 April 13

  10. UITableView • Based around a callback / delegate model •

    “How many sections do you have” • “Give me cell 4 for section 2” • A cell is just a view container • Cells are recycled • You have to maintain your own model Wednesday, 17 April 13
  11. Seriously powerful. A little tedious to work with. Wednesday, 17

    April 13
  12. That’s all a bit repetitive... “Although the widget is pretty

    powerful, creating UIs with it is a chore and a pain to maintain. ... my fingers developed calluses, and at night I kept thinking that there should be a better way.” Miguel de Icaza http://tirania.org/blog/archive/2010/Feb-23.html Wednesday, 17 April 13
  13. MonoTouch.Dialog • Make it easy to create forms and list-based

    views • Make it flexible enough to do anything that UITableView can do • Flip the API model from callback to model-driven Wednesday, 17 April 13
  14. Concepts • DialogViewController • Element • RootElement • Section Wednesday,

    17 April 13
  15. Building with Elements • The RootElement is at the top

    of the tree, it contains... • ... Section(s), which contain ... • ... Elements (which wrap cells) Wednesday, 17 April 13
  16. MonoTouch.Dialog Section Element RootElement Element Section Element Section Element Element

    Wednesday, 17 April 13
  17. So, how do we put this all together? Wednesday, 17

    April 13
  18. Manually building a form Wednesday, 17 April 13

  19. Reflection API Wednesday, 17 April 13

  20. Lists Wednesday, 17 April 13

  21. LINQ API Wednesday, 17 April 13

  22. Mix and Match This is an && decision, not an

    || Wednesday, 17 April 13
  23. The RootElement tree is Mutable Wednesday, 17 April 13

  24. Elements Wednesday, 17 April 13

  25. Building custom elements is easy Wednesday, 17 April 13

  26. Building Custom Elements • Customize an existing Element • Use

    UIViewElement • Easy! Not as resource friendly • Use a UITableViewCell descendant • Slightly harder. Total control. Wednesday, 17 April 13
  27. Custom Elements Wednesday, 17 April 13

  28. Deep Customization • Changing the background image for all Grouped

    cells • May require a change to the base MonoTouch.Dialog source • How / where Wednesday, 17 April 13
  29. Inspiration pttrns.com; behance.com; dribbble.com; pinterest.com Wednesday, 17 April 13

  30. Maintaining your own version • Avoid it if you can

    (makes life a lot easier) • Try to pull + merge as frequently as possible • Absolutely get the code down and look at it - understand how the framework works Wednesday, 17 April 13
  31. MonoTouch.Dialog • You can build anything with it you can

    do with a UITableView • Very quick to understand and use • Very mature, still maintained, ships with Xamarin.iOS • Full customization of any part of the table if you are prepared to mess with the source a little Wednesday, 17 April 13
  32. UICollectionView Wednesday, 17 April 13

  33. Wednesday, 17 April 13

  34. Q&A Wednesday, 17 April 13

  35. THANK YOU Wednesday, 17 April 13

  36. Resources • Code and sides: • https://github.com/nicwise/EvolveMonoTouchDialog • MonoTouch.Dialog: •

    https://github.com/migueldeicaza/MonoTouch.Dialog Wednesday, 17 April 13
  37. UICollectionView Resources • http://docs.xamarin.com/guides/ios/user_interface/ introduction_to_collection_views • https://github.com/mpospese/CircleLayout • https://github.com/slodge/RotatingCollectionView •

    https://github.com/chiahsien/UICollectionViewWaterfallLayout • https://github.com/schwa/Coverflow Wednesday, 17 April 13
  38. Design Inspiration • http://www.mobiledesignpatterngallery.com • http://pttrns.com • http://dribbble.com • http://behance.com

    Wednesday, 17 April 13
  39. Wednesday, 17 April 13