mobile ui design patterns

Mobile Design Mobile Design PatternsPatternsBy Dan Hermes

dan@lexiconsystemsinc.comwww.lexiconsystemsinc.com

Boston Code Camp 21

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: dan@lexiconsystemsinc.comPhone: 781-526-0738Twitter: @lexiconsystemsBlog: www.itshopkeeping.com