Post on 15-May-2015
description
transcript
Multi Platform App Dev
David Douglas@deadlyfingers
3x IDEs• Xcode 5 • Android Studio • Visual Studio 2013
3x Languages• Objective C / Swift• Java• C#
3x UX Design Guidelines• iOS 7+ (Flat design)• Android L (Material Design)• Windows 8 (Flat design)
3x Platform Design Patterns• iOS• Android• Windows
iOS MVC Design Pattern• Model
– Model.h (+.m)• View
– ViewController.xib• Controller
– ViewController.h (+.m)
Android MV? Design Pattern• Model
– Model.java• View
– activity_my.xml• Controller / Adapter
– MyActivity.java – Adapter.java
Windows MVVM Design Pattern• Model
– Model.cs• View
– MainPage.xaml– MainPage.cs
• ViewModel– ViewModel.cs
3x “Awesome” Apps Demos• Reuse data source (local JSON)• Data modeling (Obj C, Java, C#)• UI components that play nice with orientation change & mobile/tablet/desktop.• Custom font
Data Source• Font Awesome Glyphs• JSON file generated with Ruby script
(watir)
iOS App (demo)• iPhone• iPad
iOS App• CocoaPods• JSONModel• Custom Font (Info.plist)• Collection View• Storyboard (shared)
Android App (demo)• Phone• Tablet
Android App• Android Studio and Gradle• GSON from JSON file in
‘src/main/assets’• Generate Getters & Setters [Cmd]+[N]• GridView• Custom ArrayAdapter
Windows App (demo)• Phone• Tablet / Surface• Desktop PC
Visual Studio 2013
Windows App• Universal Apps - Shared Assets
(W8+WP8)• NuGet Package Manager • Newtonsoft.JSON• GridView • {Binding}
Summary of similaritiesFeatures iOS Android WindowsLib Management
CocoaPods Gradle NuGet
JSON JSONModel GSON Newtonsoft.JSON
Grid Layout UICollectionView
GridView GridView
Grid Objects UICollectionViewDataSource
ArrayAdapter {Binding}
App start ViewController.m
MainActivity.java
MainPage.xaml∟
MainPage.xaml.cs
Taking it further…• Theming• Navigation to Detail View• Azure Mobile Services - Add user identity - eg. My favorites - Push future updates over Cloud!
Theming
iOS Status Bar appearance
Info.plist
App Delegate[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
View Controller- (UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent;}
View Controller[[self.navigationController navigationBar] setBarTintColor:[UIColor blackColor]];
[[self.navigationController navigationBar] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]}];
[self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];
iOS Navigtaion Bar appearance
res/values-v21/styles.xml<?xml version="1.0" encoding="utf-8"?><resources> <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimary">#B3C938</item> <item name="android:colorPrimaryDark">#000000</item> </style></resources>
Android L (API 21) Theme
res/drawable/actionbar_background.xml<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle”><solid android:color="#B3C938" /></shape>
res/values/styles.xml<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:actionBarStyle">@style/MyActionBar</item> <item name="android:actionMenuTextColor">#ffffff</item> <!-- Support library compatibility --> <item name="actionBarStyle">@style/MyActionBar</item> <item name="actionMenuTextColor">#ffffff</item> </style>
<!-- ActionBar styles --> <style name="MyActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse"> <item name="android:background">@drawable/actionbar_background</item> <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> <!-- Support library compatibility --> <item name="background">@drawable/actionbar_background</item> <item name="titleTextStyle">@style/MyActionBarTitleText</item> </style>
<!-- ActionBar title text --> <style name="MyActionBarTitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textColor">#ffffff</item> </style></resources>
Android AppCompat styles
Page.xaml<Page Background="Crimson" RequestedTheme="Light">
Page.xaml.csprivate async Task showStatusBar(){
StatusBar statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
// Change the status bar colorawait statusBar.ShowAsync(); // Shows the status bar if it is hiddenstatusBar.ForegroundColor = ColorHelper.FromArgb(0, 255, 0, 0);statusBar.BackgroundColor = ColorHelper.FromArgb(0, 128, 0, 0);statusBar.BackgroundOpacity = 1;
}
WindowsPhone Status Bar
Custom Fonts
Info.plist
View ControllerUIFont *customFont = [UIFont fontWithName:@"FontAwesome" size:64];
UILabel *labelGlyph = (UILabel *) [self.view viewWithTag:1];[labelGlyph setFont:customFont];[labelGlyph setTextColor:[UIColor grayColor]];[labelGlyph setText:@"\uf164"];
iOS UIFont
Activity.javafinal TextView textView = (TextView) findViewById(R.id.textView);
Typeface customFont = Typeface.createFromAsset(context.getAssets(), "FontAwesome.otf");
textView.setText( Html.fromHtml("") );
textGlyph.setTypeface(customFont);
Android Typeface
Page.xaml<TextBlock Name="textBlock" FontSize="64" Foreground="Gray" Text="" FontFamily="ms-appx:///Assets/FontAwesome.otf#FontAwesome" />
Page.xaml.csFontFamily customFont = new FontFamily( "ms-appx:///Assets/FontAwesome.otf#FontAwesome");
textBlock.FontFamily = customFont;
textBlock.Text = "\uf164";
Windows FontFamily
Native DesignAppledeveloper.apple.com/design
Androidwww.google.co.uk/design
Windowshttp://design.windows.com
Native DevelopmentApplehttp://tinyurl.com/iosdesignpattterns
Androidhttp://tinyurl.com/android-mvvm
Windows
http://tinyurl.com/windows-mvvm
Thank you
Questions? @deadlyfingers