More Related Content Similar to (31 July 2013) iOS Basic Development Day 2 Human interface design Similar to (31 July 2013) iOS Basic Development Day 2 Human interface design (20) More from Eakapong Kattiya More from Eakapong Kattiya (9) (31 July 2013) iOS Basic Development Day 2 Human interface design 1. 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
3. 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
4. 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
6. Developing iOS Apps :App Design
• ]
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
12. Thai M Service
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
18. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
CreateTabbed Application
Wednesday, July 31, 13
19. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
CreateTabbed Application : ShowCase
Wednesday, July 31, 13
20. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Choose Project Folder
Wednesday, July 31, 13
21. Storyboard : Select MainStoryboard_iPhone.storyboard
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
22. Storyboard : Embed in Navigation Controller (FirstView)
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
23. Storyboard : FirstTab Bar with Navigation Controller
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
24. Storyboard : Embed In Navigation Controller (SecondView)
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
25. Storyboard : SecondTab Bar with Navigation Controller
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
26. 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
27. 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
28. 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
29. 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
30. 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
31. 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
32. 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
35. 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
36. การเรียกใช้งาน 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
37. การเรียกใช้งาน 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
38. การเรียกใช้งาน 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
41. เป็นวิธีที่ช่วยให้เก็บข้อมูล ขนาดเล็ก อย่างง่าย
ในโครงสร้างแบบ 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
42. ■ ขนาดข้อมูลใหญ่กว่า 300 KB
■ ต้องการเก็บข้อมูลแบบ CustomType
■ ข้อมูลที่ซับซ้อน หลายชั้น
Property List
เมื่อไรที่ไม่ควรใช้ plist
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
43. 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
44. 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
46. การเรียกใช้งาน
1. Init UIScrollView
2. bind Delegate
3. กําหนด contentSize:(CGSize)size
4. กําหนด minimumZoomScale / maximumZoomScale
5. กําหนด pagingEnabled
6. ใช้ Delegate Zoom
viewForZoomingInScrollView
UIScrollView
Wednesday, July 31, 13
48. -(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
50. -(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
51. iOS Basic Development
User Selection Design
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13
54. - (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
56. - (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
58. - (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
60. - (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
61. - (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
63. - (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
64. Q & A
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Wednesday, July 31, 13