Xamarin Evolve - Creating Fast UIs with MonoTouch.Dialog

Slide 1

Slide 1 text

Nic Wise Fastchicken [email protected] @fastchicken Fast UI Creation with MonoTouch Dialog Wednesday, 17 April 13

Slide 2

Slide 2 text

Nic Wise e. [email protected] t/a. @fastchicken b. http://www.fastchicken.co.nz Full source and slides will be on GitHub. Wednesday, 17 April 13

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Lists Wednesday, 17 April 13

Slide 5

Slide 5 text

Wednesday, 17 April 13

Slide 6

Slide 6 text

Wednesday, 17 April 13

Slide 7

Slide 7 text

Lists are the core mobile interaction Wednesday, 17 April 13

Slide 8

Slide 8 text

UITableView(Controller) Section Section header Section footer Cell Navigation Bar Wednesday, 17 April 13

Slide 9

Slide 9 text

Wednesday, 17 April 13

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Seriously powerful. A little tedious to work with. Wednesday, 17 April 13

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Concepts • DialogViewController • Element • RootElement • Section Wednesday, 17 April 13

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

MonoTouch.Dialog Section Element RootElement Element Section Element Section Element Element Wednesday, 17 April 13

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Manually building a form Wednesday, 17 April 13

Slide 19

Slide 19 text

Reflection API Wednesday, 17 April 13

Slide 20

Slide 20 text

Lists Wednesday, 17 April 13

Slide 21

Slide 21 text

LINQ API Wednesday, 17 April 13

Slide 22

Slide 22 text

Mix and Match This is an && decision, not an || Wednesday, 17 April 13

Slide 23

Slide 23 text

The RootElement tree is Mutable Wednesday, 17 April 13

Slide 24

Slide 24 text

Elements Wednesday, 17 April 13

Slide 25

Slide 25 text

Building custom elements is easy Wednesday, 17 April 13

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Custom Elements Wednesday, 17 April 13

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Inspiration pttrns.com; behance.com; dribbble.com; pinterest.com Wednesday, 17 April 13

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

UICollectionView Wednesday, 17 April 13

Slide 33

Slide 33 text

Wednesday, 17 April 13

Slide 34

Slide 34 text

Q&A Wednesday, 17 April 13

Slide 35

Slide 35 text

THANK YOU Wednesday, 17 April 13

Slide 36

Slide 36 text

Resources • Code and sides: • https://github.com/nicwise/EvolveMonoTouchDialog • MonoTouch.Dialog: • https://github.com/migueldeicaza/MonoTouch.Dialog Wednesday, 17 April 13

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Design Inspiration • http://www.mobiledesignpatterngallery.com • http://pttrns.com • http://dribbble.com • http://behance.com Wednesday, 17 April 13

Slide 39

Slide 39 text

Wednesday, 17 April 13