• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
(31 July 2013) iOS Basic Development Day 2 Human interface design
 

(31 July 2013) iOS Basic Development Day 2 Human interface design

on

  • 1,620 views

 

Statistics

Views

Total Views
1,620
Views on SlideShare
1,620
Embed Views
0

Actions

Likes
1
Downloads
45
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    (31 July 2013) iOS Basic Development Day 2 Human interface design (31 July 2013) iOS Basic Development Day 2 Human interface design Presentation Transcript

    • iOS Basic Development Day 2 Human Interface Design by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Slide www.slideshare.net/eakkattiya Source Code www.ibluecode.com/training.html Fan Page www.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 / Trainer iOS & Android Platform About 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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • 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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Organizing Content - ผู้ใช้ส่วนใหญ่จะเข้าโปรแกรมเพื่อเรียก ข้อมูลหรือทํางานสั้น ๆ แล้วก็จะออกจาก โปรแกรม แต่จะมีการเข้าใช้งานบ่อย - ไม่ทํางานหลายอย่างพร้อมกันต่อ การกดปุ่มของผู้ใช้ 1 ครั้ง - เน้นการแสดงข้อมูลของผู้ใช้เป็นหลัก - ไม่ใช่การนําเอา Desktop มาย่อขนาด หน้าจอ Wednesday, July 31, 13
    • Developing iOS Apps :App Design • ] by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UITabBarController & UINavigationBarController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UITabBarController ทําหน้าที่สลับViewController หลาย ๆ ตัวไปมา UITabBarItem ปุ่มของ UITabBar สามารถแก้ไขได้ by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • ใช้สําหรับแสดงViewController เป็นลําดับชั้นไปเรื่อย ๆ โดยสามารถ ย้อนกลับดูViewController ก่อนหน้าได้ UINavigationController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • BECTeroradio by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • ThailandYellowPages by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Thai M Service by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Assumption University by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • HIPKINGDOM by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • http://www.apple.com/ios/videos/#developers http://pitchenvy.com http://thumbsup.in.th Idea for new app ? by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UINavigationController - pushViewController ใช้สําหรับเพิ่มViewController เข้าไปใน UINavigationController - popViewController ใช้สําหรับลบViewController ออกจาก UINavigationController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UINavigationItem .rightBarButtonItem.leftBarButtonItem .title Wednesday, July 31, 13
    • by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 CreateTabbed Application Wednesday, July 31, 13
    • by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 CreateTabbed Application : ShowCase Wednesday, July 31, 13
    • by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Choose Project Folder Wednesday, July 31, 13
    • Storyboard : Select MainStoryboard_iPhone.storyboard by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Storyboard : Embed in Navigation Controller (FirstView) by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Storyboard : FirstTab Bar with Navigation Controller by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Storyboard : Embed In Navigation Controller (SecondView) by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Storyboard : SecondTab Bar with Navigation Controller by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • 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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • NSURL *url = [NSURL URLWithString:@"tel:0866732111"]; TEL NSURL *url = [NSURL URLWithString:@"sms:0866732111"]; SMS NSURL *url = [NSURL URLWithString:@"mailto:eakkattiya@gmail.com"]; MAILTO [[UIApplication sharedApplication] openURL:url]; by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • 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.012 4,100.2234"]; GOOGLE MAP [[UIApplication sharedApplication] openURL:url]; by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • NSURL *url = [NSURL URLWithString:@"http://www.youtube.com/ watch?v=OGZe27ZBajE" ; [[UIApplication sharedApplication] openURL:url]; YouTube by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • 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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Remote File NSString *remoteFile = @"http://exclusivesiam.comeze.com/ exclusive_siam/imagesForIphone/Pororo%20opening-1.mp3" NSURL *myURL = [NSURL URLWithString:remoteFile]; NSURL by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Http Live Streaming NSString *liveStreaming = @"http://devimages.apple.com/iphone/ samples/bipbop/gear1/prog_index.m3u8" NSURL *myURL = [NSURL URLWithString:liveStreaming]; NSURL by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UIWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • •HTTP http://www.netdesign.ac.th •PDF Online - Offline pdf file • Custom HTML Content <html><body>Hello World</body> </html> UIWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Class : UIWebView Framework : UIKit Sample Code : TransWeb Init : Interface Builder Property : scalesPageToFit Method : loadRequest: loadHTMLString:baseURL: UIWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • การเรียกใช้งาน HTTP 1. create UIWebView Outlet(Interface Builder) 2. set Delegate 3. create NSURL 4. create NSURLRequest 5. 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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • การเรียกใช้งาน PDF 1. create UIWebView Outlet(Interface Builder) 2. set Delegate 3. create NSURL 4. create NSURLRequest 5. call loadRequest @implementation WebViewController - (void)viewDidLoad { [super viewDidLoad]; NSURL *pdfURL = [[NSBundle mainBundle] URLForResource:@"info" withExtension:@"pdf"]; NSURLRequest *request = [[NSURLRequest alloc]initWithURL:pdfURL]; [myWebView loadRequest:request]; } UIWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • การเรียกใช้งาน HTML 1. create UIWebView Outlet(Interface Builder) 2. set Delegate 3. create HTML String 4. call loadHTMLString: baseURL: @implementation WebViewController - (void)viewDidLoad { [super viewDidLoad]; NSString *myHTML = @"<html><body><h1>Hello, world!</h1></body></html>"; [myWebView loadHTMLString:myHTML baseURL:nil]; } UIWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Workshop MyWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Property List by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • เป็นวิธีที่ช่วยให้เก็บข้อมูล ขนาดเล็ก อย่างง่าย ในโครงสร้างแบบ XML โดยรองรับชนิดข้อมูล ■ Arrays ■ Dictionaries ■ Strings ■ numbers ■ dates ■ raw data • NSUserDefaults class ใช้โครงสร้างของ plist ในการเก็บข้อมูลเช่นกัน Property List by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • ■ ขนาดข้อมูลใหญ่กว่า 300 KB ■ ต้องการเก็บข้อมูลแบบ CustomType ■ ข้อมูลที่ซับซ้อน หลายชั้น Property List เมื่อไรที่ไม่ควรใช้ plist by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • 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> by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • 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 Wednesday, July 31, 13
    • UIScrollView Gallery by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • การเรียกใช้งาน 1. Init UIScrollView 2. bind Delegate 3. กําหนด contentSize:(CGSize)size 4. กําหนด minimumZoomScale / maximumZoomScale 5. กําหนด pagingEnabled 6. ใช้ Delegate Zoom viewForZoomingInScrollView UIScrollView Wednesday, July 31, 13
    • UIScrollView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • -(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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UIAlertView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • -(void)showAlertView:(NSString*)title { UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:@"" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil]; [alert show]; } UIAlertView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • iOS Basic Development User Selection Design by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Social Share by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UIActionSheet by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • - (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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Social Framework Facebook by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • - (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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Social Framework Twitter by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • - (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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • UIDocumentInteractionController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • - (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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • - (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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • MFMailComposeViewController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • - (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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13
    • Q & A by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Wednesday, July 31, 13