(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 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
Eakapong Kattiya
Professional Mobile Application
Developer / Trainer
iOS & Android Platform
About

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 ﬁngertip-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

ThailandYellowPages

Thai M Service

Assumption University

HIPKINGDOM

http://www.apple.com/ios/videos/#developers
http://pitchenvy.com
http://thumbsup.in.th
Idea for new app ?

- pushViewController
ใช้สําหรับเพิ่มViewController เข้าไปใน
- popViewController
ใช้สําหรับลบViewController ออกจาก

UINavigationItem
.rightBarButtonItem.leftBarButtonItem
.title

CreateTabbed Application

CreateTabbed Application : ShowCase

Choose Project Folder

Storyboard : Select MainStoryboard_iPhone.storyboard

Storyboard : Embed in Navigation Controller (FirstView)

Storyboard : FirstTab Bar with Navigation Controller

Storyboard : Embed In Navigation Controller (SecondView)

Storyboard : SecondTab 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: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.012
4,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"];
NSURL

Remote File
NSString *remoteFile = @"http://exclusivesiam.comeze.com/
exclusive_siam/imagesForIphone/Pororo%20opening-1.mp3"
NSURL *myURL = [NSURL URLWithString:remoteFile];
NSURL

Http Live Streaming
NSString *liveStreaming = @"http://devimages.apple.com/iphone/
samples/bipbop/gear1/prog_index.m3u8"
NSURL *myURL = [NSURL URLWithString:liveStreaming];
NSURL

UIWebView

•HTTP
http://www.netdesign.ac.th
•PDF
Online - Ofﬂine pdf ﬁle
• 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

การเรียกใช้งาน 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

การเรียกใช้งาน PDF
2. set Delegate
3. create NSURL
4. create NSURLRequest
5. call loadRequest
- (void)viewDidLoad
{
NSURL *pdfURL = [[NSBundle mainBundle] URLForResource:@"info"
withExtension:@"pdf"];
NSURLRequest *request = [[NSURLRequest alloc]initWithURL:pdfURL];
[myWebView loadRequest:request];
}
UIWebView

การเรียกใช้งาน HTML
2. set Delegate
3. create HTML String
4. call loadHTMLString: baseURL:
- (void)viewDidLoad
{
NSString *myHTML =
@"<html><body><h1>Hello, world!</h1></body></html>";
[myWebView loadHTMLString:myHTML baseURL:nil];
}
UIWebView

Workshop
MyWebView

Property List

เป็นวิธีที่ช่วยให้เก็บข้อมูล ขนาดเล็ก อย่างง่าย
ในโครงสร้างแบบ XML โดยรองรับชนิดข้อมูล
■ Arrays
■ Dictionaries
■ Strings
■ numbers
■ dates
■ raw data
• NSUserDefaults class
ใช้โครงสร้างของ plist ในการเก็บข้อมูลเช่นกัน
Property List

■ ขนาดข้อมูลใหญ่กว่า 300 KB
■ ต้องการเก็บข้อมูลแบบ CustomType
■ ข้อมูลที่ซับซ้อน หลายชั้น
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
ﬂoat minimumZoomScale
ﬂoat maximumZoomScale
BOOL pagingEnabled
Delegate : viewForZoomingInScrollView
UIScrollView

UIScrollView
Gallery

การเรียกใช้งาน
1. Init UIScrollView
2. bind Delegate
3. กําหนด contentSize:(CGSize)size
4. กําหนด minimumZoomScale / maximumZoomScale
5. กําหนด pagingEnabled
6. ใช้ 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];
}
[self directShareTwitter:nil];
}
[self directShareInstagram:nil];
}
[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

Q & A

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

More Related Content

More from Eakapong Kattiya

Recently uploaded

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