![iOS List Example –iOS List Example –
SubclassSubclass UITableViewSourceUITableViewSource
public class ListSource : UITableViewSource
{
protected string[] listItems;
protected string CellId= "TableCell";
public ListSource (string[] items)
{ listItems = items; }
public override int RowsInSection (UITableView tableview, int section)
{ return listItems.Length; }
public override UITableViewCell GetCell (UITableView tableView,
MonoTouch.Foundation.NSIndexPath indexPath)
{ UITableViewCell cell = tableView.DequeueReusableCell (CellId);
if (cell == null) cell = new UITableViewCell (UITableViewCellStyle.Default, CellId);
cell.TextLabel.Text = listItems[indexPath.Row];
return cell;
}
}](https://image.slidesharecdn.com/mobiledesignpatterns6-140623123010-phpapp01/85/Mobile-UI-Design-Patterns-8-320.jpg)
![iOS List ExampleiOS List Example
public override void ViewDidLoad()
{
base.ViewDidLoad();
UITableView table = new UITableView(View.Bounds);
var tableItems = new string[]
{"First","Second","Third","Fourth","Fifth"};
table.Source = new ListSource(tableItems);
Add (table);
}](https://image.slidesharecdn.com/mobiledesignpatterns6-140623123010-phpapp01/85/Mobile-UI-Design-Patterns-9-320.jpg)
Mobile UI Design Patterns
- 1. Mobile Design PatternsMobile Design Patterns By Dan Hermes dan@lexiconsystemsinc.com www.lexiconsystemsinc.com Boston Code Camp 21
- 2. Design PatternsDesign Patterns Gang Of Four MVC MVVM Adaptable, reusable code structures
- 3. Mobile Concepts and PatternsMobile Concepts and Patterns UI ◦ Visual Design Patterns Data Access ◦ Local ◦ Web Services ◦ Data Binding ◦ Data Synchronization State Management Threading MVC vs. MVVM
- 4. Visual Design PatternsVisual Design Patterns Data Presentation Navigation Search/Sort Dialog Data Editing
- 6. Android List DemoAndroid List Demo Array Adapter Bind to a Model
- 7. iOS List ExampleiOS List Example Instantiate UITableView and add it to a view in the ViewDidLoad() method of the ViewController. public override void ViewDidLoad() { base.ViewDidLoad(); UITableView table = new UITableView(View.Bounds); Add (table); }
- 8. iOS List Example –iOS List Example – SubclassSubclass UITableViewSourceUITableViewSource public class ListSource : UITableViewSource { protected string[] listItems; protected string CellId= "TableCell"; public ListSource (string[] items) { listItems = items; } public override int RowsInSection (UITableView tableview, int section) { return listItems.Length; } public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath) { UITableViewCell cell = tableView.DequeueReusableCell (CellId); if (cell == null) cell = new UITableViewCell (UITableViewCellStyle.Default, CellId); cell.TextLabel.Text = listItems[indexPath.Row]; return cell; } }
- 9. iOS List ExampleiOS List Example public override void ViewDidLoad() { base.ViewDidLoad(); UITableView table = new UITableView(View.Bounds); var tableItems = new string[] {"First","Second","Third","Fourth","Fifth"}; table.Source = new ListSource(tableItems); Add (table); }
- 10. Navigation Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
- 11. More Navigation Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
- 12. Forms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
- 13. Style and DesignStyle and Design Why Does It Matter?
- 14. Style and DesignStyle and Design Form follows function ◦ What is your apps message? To the Point Consistency " If it looks the same, it should act the same." - Android Style Guide
- 15. Style and DesignStyle and Design Direct Manipulation Feedback Personal Service Encouragement
- 16. MobilismsMobilisms Standard icons Standard screen layouts Standard multi-screen flows Use labels sparingly Standard multi-screen approaches
- 17. Avoid PCisms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
- 18. Idiot Box
- 20. Anti-Pattern Advice: AVOID CREATIVITY until you know mobile UI standards
- 21. Mobile Interaction ChartMobile Interaction Chart Mobile Action PC Tap I want this click Submit Do it submit Swipe Next! Move, or Delete next Press Do Something Double-click Pinch Zoom out Roller/slider Spread Zoom in Roller/slider Rotate um, Rotate. Roller/slider http://www.lexiconsystemsinc.com/
- 23. Xamarin.Forms List DemoXamarin.Forms List Demo
- 24. Android: ActivitiesAndroid: Activities An Activity is like a… Code-Behind
- 25. iOS: ViewControllersiOS: ViewControllers A ViewController is like a… Code-Behind
- 26. UI - iOSUI - iOS ViewController Xcode or Xamarin iOS Designer You need a Mac ◦ Mac Mini ◦ macincloud.com
- 27. Xamarin iOS DesignerXamarin iOS Designer
- 28. MVCMVC iOS ViewControllers Android Activities Are they MVC?
- 30. MVCMVC Model ◦ Can use them Views ◦ Must use them Controllers ◦ Android Activities ◦ iOS ViewControllers
- 31. I WANT MY MVC!!!I WANT MY MVC!!!
- 32. The OptionsThe Options MVVM ◦ MVVMcross ◦ MVVM Lite ◦ ReactiveUI Roll Your Own MVC ◦ Separate out your controller logic from your Activities, ViewControllers, and Pages
- 33. Mobile Design PatternsMobile Design Patterns Dan Hermes Mobile Consultant Lexicon Systems Website: www.lexiconsystemsinc.com Email: dan@lexiconsystemsinc.com Phone: 781-526-0738 Twitter: @lexiconsystems Blog: www.itshopkeeping.com