mobile ui design patterns
DESCRIPTION
Mobile UI Design Patterns and a bit about Xamarin UI and Xamarin.FormsTRANSCRIPT
Design PatternsDesign PatternsGang Of FourMVCMVVM
Adaptable, reusable code structures
Mobile Concepts and Mobile Concepts and PatternsPatternsUI
◦Visual Design PatternsData Access
◦ Local◦ Web Services◦ Data Binding◦ Data Synchronization
State ManagementThreadingMVC vs. MVVM
Visual Design PatternsVisual Design PatternsData PresentationNavigationSearch/SortDialogData Editing
Data Presentation Patterns
ListLayoutGridSubviewMaster/DetailGallery
Android List DemoAndroid List DemoArray AdapterBind to a Model
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);
}
iOS List Example – iOS List Example – Subclass Subclass UITableViewSourceUITableViewSourcepublic 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;
}
}
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);
}
Navigation
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
More Navigation
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
Forms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
Style and DesignStyle and DesignWhy Does It Matter?
Style and DesignStyle and DesignForm follows function
◦What is your apps message?To the PointConsistency
" If it looks the same, it should act the same." - Android Style Guide
Style and DesignStyle and DesignDirect ManipulationFeedback Personal ServiceEncouragement
MobilismsMobilismsStandard icons Standard screen layoutsStandard multi-screen flowsUse labels sparinglyStandard multi-screen
approaches
Avoid PCisms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
Idiot Box
Oceans of Buttons
Anti-Pattern Advice:
AVOID CREATIVITY
until you know mobile UI standards
Mobile Interaction ChartMobile Interaction ChartMobile 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/
ViewsViewsXamarin.FormsAndroid ViewsiOS UIKit
Xamarin.Forms List DemoXamarin.Forms List Demo
Android: ActivitiesAndroid: Activities
An Activity is like a…
Code-Behind
iOS: ViewControllersiOS: ViewControllers
A ViewController is like a…
Code-Behind
UI - iOSUI - iOSViewControllerXcode or Xamarin iOS DesignerYou need a Mac
◦Mac Mini◦macincloud.com
Xamarin iOS DesignerXamarin iOS Designer
MVCMVCiOS ViewControllers Android ActivitiesAre they MVC?
Some CodeSome Code
MVCMVCModel
◦Can use themViews
◦Must use themControllers
◦Android Activities◦iOS ViewControllers
I WANT MY MVC!!!I WANT MY MVC!!!
The OptionsThe OptionsMVVM
◦MVVMcross◦MVVM Lite◦ReactiveUI
Roll Your Own MVC◦ Separate out your controller logic from
your Activities, ViewControllers, and Pages
Mobile Design Mobile Design PatternsPatternsDan HermesMobile Consultant
Lexicon Systems
Website: www.lexiconsystemsinc.comEmail: [email protected]: 781-526-0738Twitter: @lexiconsystemsBlog: www.itshopkeeping.com