Fast UI creation with MonoTouch.Dialog, Nic Wise

3,486 views

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,486
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
59
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Fast UI creation with MonoTouch.Dialog, Nic Wise

  1. 1. Nic WiseFastchickennicw@fastchicken.co.nz@fastchickenFast UI Creation withMonoTouch DialogWednesday, 17 April 13
  2. 2. Nic Wisee. nicw@fastchicken.co.nzt/a. @fastchickenb. http://www.fastchicken.co.nzFull source and slides will be onGitHub.Wednesday, 17 April 13
  3. 3. Overview• Overview - what are we trying to solve here?• The iOS way - UITableView(Controller)• The easy way - MonoTouch.Dialog• Elements• StylingWednesday, 17 April 13
  4. 4. ListsWednesday, 17 April 13
  5. 5. Wednesday, 17 April 13
  6. 6. Wednesday, 17 April 13
  7. 7. Lists are the core mobileinteractionWednesday, 17 April 13
  8. 8. UITableView(Controller)SectionSection headerSection footerCellNavigation BarWednesday, 17 April 13
  9. 9. Wednesday, 17 April 13
  10. 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 modelWednesday, 17 April 13
  11. 11. Seriously powerful.A little tedious to work with.Wednesday, 17 April 13
  12. 12. That’s all a bit repetitive...“Although the widget is pretty powerful, creating UIs with itis a chore and a pain to maintain.... my fingers developed calluses, and at night I kept thinkingthat there should be a better way.”Miguel de Icazahttp://tirania.org/blog/archive/2010/Feb-23.htmlWednesday, 17 April 13
  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-drivenWednesday, 17 April 13
  14. 14. Concepts• DialogViewController• Element• RootElement• SectionWednesday, 17 April 13
  15. 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. 16. MonoTouch.DialogSection ElementRootElementElementSection ElementSection ElementElementWednesday, 17 April 13
  17. 17. So, how do we put this alltogether?Wednesday, 17 April 13
  18. 18. Manually building a formWednesday, 17 April 13
  19. 19. Reflection APIWednesday, 17 April 13
  20. 20. ListsWednesday, 17 April 13
  21. 21. LINQ APIWednesday, 17 April 13
  22. 22. Mix and MatchThis is an && decision, not an ||Wednesday, 17 April 13
  23. 23. The RootElement tree isMutableWednesday, 17 April 13
  24. 24. ElementsWednesday, 17 April 13
  25. 25. Building custom elements iseasyWednesday, 17 April 13
  26. 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. 27. Custom ElementsWednesday, 17 April 13
  28. 28. Deep Customization• Changing the background image for all Grouped cells• May require a change to the base MonoTouch.Dialog source• How / whereWednesday, 17 April 13
  29. 29. Inspirationpttrns.com; behance.com; dribbble.com; pinterest.comWednesday, 17 April 13
  30. 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 theframework worksWednesday, 17 April 13
  31. 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 messwith the source a littleWednesday, 17 April 13
  32. 32. UICollectionViewWednesday, 17 April 13
  33. 33. Wednesday, 17 April 13
  34. 34. Q&AWednesday, 17 April 13
  35. 35. THANK YOUWednesday, 17 April 13
  36. 36. Resources• Code and sides:• https://github.com/nicwise/EvolveMonoTouchDialog• MonoTouch.Dialog:• https://github.com/migueldeicaza/MonoTouch.DialogWednesday, 17 April 13
  37. 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/CoverflowWednesday, 17 April 13
  38. 38. Design Inspiration• http://www.mobiledesignpatterngallery.com• http://pttrns.com• http://dribbble.com• http://behance.comWednesday, 17 April 13
  39. 39. Wednesday, 17 April 13

×