(31 july 2013) ios basic development day 2 human interface design

iOS Basic Development

Human Interface Design

by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111Wednesday, July 31, 13

Slidewww.slideshare.net/eakkattiya

Source Codewww.ibluecode.com/training.html

Fan Pagewww.ios-talk.com

twitter.com/eakkattiya facebook.com/eakapong.kattiya

email : eak.k@ibluecode.com

by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111

Eakapong Kattiya

Professional Mobile Application Developer / TraineriOS & Android Platform

Wednesday, July 31, 13

Course Outline

1. Introduction Xcode & Language

2. Human Interface Design

3. UITableViewController & Datasource

4. Multimedia

5. Submit App Store

Course Outline

Developing iOS Apps : Human Interface Design

• Focus on the primary task.• Make usage easy and obvious.• Use user-centric terminology.• Make targets fingertip-size.• De-emphasize settings.• Use user interface (UI) elements consistently.• Use subtle animation to communicate.• Ask people to save only when necessary.

http://tinyurl.com/3de5ow8

Organizing Content

- ผใชสวนใหญจะเขาโปรแกรมเพอเรยกขอมลหรอทางานสน ๆ แลวกจะออกจากโปรแกรม แตจะมการเขาใชงานบอย

- ไมทางานหลายอยางพรอมกนตอการกดปมของผใช 1 ครง

- เนนการแสดงขอมลของผใชเปนหลก

- ไมใชการนาเอา Desktop มายอขนาดหนาจอ

Developing iOS Apps : App Design

UITabBarController & UINavigationBarController

UITabBarController

ทาหนาทสลบ ViewController หลาย ๆ ตวไปมาUITabBarItem ปมของ UITabBar สามารถแกไขได

ใชสาหรบแสดง ViewController เปนลาดบชนไปเรอย ๆ โดยสามารถยอนกลบด ViewController กอนหนาได

UINavigationController

BECTeroradio

Thailand YellowPages

Thai M Service

Assumption University

HIPKINGDOM

http://www.apple.com/ios/videos/#developers

http://pitchenvy.com

http://thumbsup.in.th

Idea for new app ?

UINavigationController

- pushViewController ใชสาหรบเพม ViewController เขาไปใน UINavigationController

- popViewController ใชสาหรบลบ ViewController ออกจาก UINavigationController

UINavigationItem

.rightBarButtonItem.leftBarButtonItem

.title

Create Tabbed Application

Create Tabbed Application : ShowCase

Choose Project Folder

Storyboard : Select MainStoryboard_iPhone.storyboard

Storyboard : Embed in Navigation Controller (First View)

Storyboard : First Tab Bar with Navigation Controller

Storyboard : Embed In Navigation Controller (Second View)

Storyboard : Second Tab Bar with Navigation Controller

Shared Application

เปด Application ใน iPhone เชน โทรศพท สงขอความ สงอเมล safari google map youTube

Local File

เลนไฟลจากใน Bundle ของ Application เอง

Remote File

เลนไฟลจากบน Server

Http Live Streaming

เลนไฟลจากบน Server แบบ Streaming

* ตองเปนแบบ Http Live Streaming เทานน ไมสามารถใช RSTP หรอ Flash Streaming ได

NSURL *url = [NSURL URLWithString:@"tel:0866732111"];

NSURL *url = [NSURL URLWithString:@"sms:0866732111"];

NSURL *url = [NSURL URLWithString:@"mailto:eakkattiya@gmail.com"];

MAILTO

[[UIApplication sharedApplication] openURL:url];

NSURL *url = [NSURL URLWithString:@"http://www.sanook.com"];

SAFARI

NSURL *url = [NSURL URLWithString:@"http://maps.google.com/maps?saddr=Current_Location@13.1234,100.1234&daddr=Destination@13.0124,100.2234"];

GOOGLE MAP

NSURL *url = [NSURL URLWithString:@"http://www.youtube.com/watch?v=OGZe27ZBajE" ;

YouTube

Local File

NSURL *plistURL = [[NSBundle mainBundle] URLForResource:@"table" withExtension:@"plist"];

NSURL *pdfURL = [[NSBundle mainBundle] URLForResource:@"info" withExtension:@"pdf"];

NSURL *movieURL = [[NSBundle mainBundle] URLForResource:@"movie" withExtension:@"mp4"];

NSURL *musicURL = [[NSBundle mainBundle] URLForResource:@"music" withExtension:@"mp3"];

Remote File

NSString *remoteFile = @"http://exclusivesiam.comeze.com/ exclusive_siam/imagesForIphone/Pororo%20opening-1.mp3"

NSURL *myURL = [NSURL URLWithString:remoteFile];

Http Live Streaming

NSString *liveStreaming = @"http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8"

NSURL *myURL = [NSURL URLWithString:liveStreaming];

UIWebView

• HTTP http://www.netdesign.ac.th

• PDFOnline - Offline pdf file

• Custom HTML Content<html><body>Hello World</body></html>

UIWebView

Class : UIWebView

Framework : UIKit

Sample Code : TransWeb

Init : Interface Builder

Property : scalesPageToFit

Method : loadRequest: loadHTMLString:baseURL:

UIWebView

การเรยกใชงาน HTTP1. create UIWebView Outlet(Interface Builder)2. set Delegate3. create NSURL4. create NSURLRequest5. call loadRequest@implementation WebViewController

- (void)viewDidLoad{ [super viewDidLoad];

NSURL *wwwURL = [NSURL URLWithString:@"http://www.sanook.com"];

NSURLRequest *request = [[NSURLRequest alloc]initWithURL:wwwURL];

[myWebView loadRequest:request];}

UIWebView

การเรยกใชงาน PDF1. create UIWebView Outlet(Interface Builder)2. set Delegate3. create NSURL4. create NSURLRequest5. call loadRequest

@implementation WebViewController

NSURL *pdfURL = [[NSBundle mainBundle] URLForResource:@"info" withExtension:@"pdf"];

NSURLRequest *request = [[NSURLRequest alloc]initWithURL:pdfURL];

[myWebView loadRequest:request];}

UIWebView

การเรยกใชงาน HTML1. create UIWebView Outlet(Interface Builder)2. set Delegate3. create HTML String4. call loadHTMLString: baseURL:

@implementation WebViewController

NSString *myHTML = @"<html><body><h1>Hello, world!</h1></body></html>";

[myWebView loadHTMLString:myHTML baseURL:nil];}

UIWebView

WorkshopMyWebView

Property List

เปนวธทชวยใหเกบขอมล ขนาดเลก อยางงาย ในโครงสรางแบบ XML โดยรองรบชนดขอมล

■ Arrays■ Dictionaries■ Strings■ numbers■ dates■ raw data

• NSUserDefaults class ใชโครงสรางของ plist ในการเกบขอมลเชนกน

Property List

■ ขนาดขอมลใหญกวา 300 KB

■ ตองการเกบขอมลแบบ Custom Type

■ ขอมลทซบซอน หลายชน

Property List

เมอไรทไมควรใช plist

Property List : Root type NSArray , NSDictionary

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict> <key>Name</key> <string>John Doe</string> <key>Phones</key> <array> <string>408-974-0000</string> <string>503-333-5555</string> </array></dict></plist>

Class : UIScrollView

Framework : UIKit

Sample Code : UICatalog

Init : initWithFrame : (CGRect) or Interface Builder

Property : CGSize contentSize float minimumZoomScale float maximumZoomScale BOOL pagingEnabled

Delegate : viewForZoomingInScrollView

UIScrollView

UIScrollView Gallery

การเรยกใชงาน

1. Init UIScrollView2. bind Delegate3. กาหนด contentSize:(CGSize)size 4. กาหนด minimumZoomScale / maximumZoomScale5. กาหนด pagingEnabled6. ใช Delegate Zoom viewForZoomingInScrollView

UIScrollView

-(void)initScrollView{ NSURL *url = [[NSBundle mainBundle] URLForResource:@"gallery" withExtension:@"plist"]; NSArray *items = [NSArray arrayWithContentsOfURL:url]; UIScrollView *scv = [[UIScrollView alloc]initWithFrame:self.view.frame]; [scv setContentSize:CGSizeMake(320*items.count, 320)]; [scv setPagingEnabled:YES]; [self.view addSubview:scv]; NSInteger i = 0; for(NSString *imageName in items){ UIImageView *imageView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:imageName]];

[imageView setFrame:CGRectMake(320*i, 0, 320, 320)]; [imageView setContentMode:UIViewContentModeScaleAspectFit]; [scv addSubview:imageView]; i++ ; }}

UIScrollView

UIAlertView

-(void)showAlertView:(NSString*)title{ UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:@"" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil]; [alert show];}

UIAlertView

iOS Basic Development

User Selection Design

Social Share

UIActionSheet

- (IBAction)shareSocial:(id)sender { UIActionSheet *action = [[UIActionSheet alloc]initWithTitle:@"Social Network" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Facebook",@"Twitter", @"Instagram",@"Email", nil]; [action showInView:self.view];

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{ if(buttonIndex == 0){ [self directShareFacebook:nil]; } if(buttonIndex == 1){ [self directShareTwitter:nil]; } if(buttonIndex == 2){ [self directShareInstagram:nil]; } if(buttonIndex == 3){ [self directSendMail:nil]; }}

UIActionSheet

Social Framework

Facebook

- (IBAction)directShareFacebook:(id)sender {

if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeFacebook]) { SLComposeViewController *composeVC = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeFacebook]; [composeVC setInitialText:self.myTextView.text]; UIImage *image = self.myImageView.image; [composeVC addImage:image]; NSURL *url = [NSURL URLWithString:@"http://www.ibluecode.com"]; [composeVC addURL:url]; [self presentViewController:composeVC animated:YES completion:nil]; }}

SLComposeViewController : Facebook

Social Framework

Twitter

- (IBAction)directShareTwitter:(id)sender {

if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter]) { SLComposeViewController *composeVC = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter]; [composeVC setInitialText:self.myTextView.text]; UIImage *image = self.myImageView.image; [composeVC addImage:image]; NSURL *url = [NSURL URLWithString:@"http://www.ibluecode.com"]; [composeVC addURL:url]; [self presentViewController:composeVC animated:YES completion:nil]; }}

SLComposeViewController : Twitter

UIDocumentInteractionController

- (IBAction)openDocumentAction:(id)sender {

NSURL *url = [[NSBundle mainBundle] URLForResource:@"mac_pro" withExtension:@"jpeg"];

self.docController = [UIDocumentInteractionController interactionControllerWithURL:url]; self.docController.delegate = self ; NSLog(@"uti: %@", [self.docController UTI]); [self.docController presentOptionsMenuFromRect:self.view.frame inView:self.view animated:YES]; }

UIDocumentInteractionController : All

- (IBAction)directShareInstagram:(id)sender { NSURL *instagramURL = [NSURL URLWithString:@"instagram://location?id=1"]; if ([[UIApplication sharedApplication] canOpenURL:instagramURL]) { NSString *documentsDirectory = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents"]; NSString *savedImagePath = [documentsDirectory stringByAppendingPathComponent:@"Image.igo"]; NSData *imageData = UIImagePNGRepresentation(self.myImageView.image); [imageData writeToFile:savedImagePath atomically:YES]; NSURL *imageUrl = [NSURL fileURLWithPath:savedImagePath]; NSLog(@"%@",imageUrl); UIDocumentInteractionController *docController = [UIDocumentInteractionController new]; docController.delegate = self; docController.UTI = @"com.instagram.exclusivegram"; docController.URL = imageUrl; [docController presentOpenInMenuFromRect:CGRectZero inView:self.view animated:YES];

}else{

[self showAlertView:@"Please install Instagram before share."]; }

UIDocumentInteractionController : Instagram

MFMailComposeViewController

- (IBAction)directSendMail:(id)sender {

if ([MFMailComposeViewController canSendMail]) { MFMailComposeViewController *mailVC = [[MFMailComposeViewController alloc] init]; mailVC.mailComposeDelegate = self; [mailVC setSubject:@"Subject"]; NSArray *toRecipients = [NSArray arrayWithObjects: @"eak.k@ibluecode.com", @"eakkattiya@gmail.com", nil];

[mailVC setToRecipients:toRecipients]; UIImage *myImage = self.myImageView.image ; NSData *imageData = UIImagePNGRepresentation(myImage); [mailVC addAttachmentData:imageData mimeType:@"image/png" fileName:@"attachment"]; NSString *emailBody = self.myTextView.text; [mailVC setMessageBody:emailBody isHTML:NO]; //iOS 5 //[self presentModalViewController:mailer animated:YES]; //iOS 6 [self presentViewController:mailVC animated:YES completion:nil]; }}

MFMailComposeViewController

(31 july 2013) ios basic development day 2 human interface design

Technology

perspective by ppm - resolver support€¦ · getting...

ios 7 human interface guidelines

basic machine interface options

porting the user interface from an ios* basic app to …...4...

ios basic development day 2 - objective-c 2.0 & ios...

using the command-line interface - tu berlin · using the...

cisco ios basic commands

(1 july 2013) ios basic development 4 - multimedia

ios human interface guidlines for ios-platforms

24860986 cisco ios basic commands

cisco ios shellcisco ios shell...

using the cisco ios command-line interface · the cisco ios...

user interface test automation tools for ios applications

ios chapter 1 basic

global interface commandsonthe cisco ios xr … · global...

ios human interface guidelines

cisco ios xr interface and hardware component command

cisco ios cli (command-line interface)

using the cisco ios xe command-line interface the cisco ios...

configuration: basic software configuration using the …...