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

iOS Basic Development

Day 2

Human Interface Design

by Eakapong Kattiya www.ibluecode.com [email protected] +66 086-673-2111Wednesday, July 31, 13

http://www.ibluecode.com


mailto:[email protected]


Slidewww.slideshare.net/eakkattiya

Source Codewww.ibluecode.com/training.html

Fan Pagewww.ios-talk.com

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

email : [email protected]

by Eakapong Kattiya www.ibluecode.com [email protected] +66 086-673-2111

Eakapong Kattiya

Professional Mobile Application Developer / TraineriOS & Android Platform

About

Wednesday, July 31, 13

http://www.ibluecode.com/course/




http://www.ios-talk.com

http://www.ios-talk.com

http://www.facebook.com/eakapong.kattiya

http://www.facebook.com/eakapong.kattiya







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






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

TEL

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

SMS

NSURL *url = [NSURL URLWithString:@"mailto:[email protected]"];

MAILTO

[[UIApplication sharedApplication] openURL:url];








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

SAFARI

NSURL *url = [NSURL URLWithString:@"http://maps.google.com/[email protected],100.1234&[email protected],100.2234"];

GOOGLE MAP



http://www.sanook.com

http://www.sanook.com

http://maps.google.com/[email protected],100.1234&[email protected],100.2234










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


YouTube


http://www.youtube.com/watch?v=OGZe27ZBajE








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"];

NSURL






Remote File

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

NSURL *myURL = [NSURL URLWithString:remoteFile];

NSURL


http://exclusivesiam.comeze.com/exclusive_siam/imagesForIphone/Pororo%20opening-1.mp3








Http Live Streaming

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

NSURL *myURL = [NSURL URLWithString:liveStreaming];

NSURL


http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8








UIWebView






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

• PDFOnline - Offline pdf file

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

UIWebView


http://developer.apple.com/library/ios/documentation/networkinginternet/conceptual/streamingmediaguide/Introduction/Introduction.html

http://developer.apple.com/library/ios/documentation/networkinginternet/conceptual/streamingmediaguide/Introduction/Introduction.html





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


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: @"[email protected]", @"[email protected]", 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










Q & A






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

Technology