(1 July 2013) iOS Basic Development 3 - UITableViewController & Data Source

1. iPhone Developer Basic Program Day 3 View &ViewController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

2. Course Outline 1. Introduction & Xcode 2. Objective-C & Frameworks 3. View &ViewController 4. View &ViewController (2) 5. Submit App Store Course Outline by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

3. www.ibluecode.com/training.html Day 1 - 5 Slide www.slideshare.net/eakkattiya Additional Course eakkattiya@gmail.com 086-6732111 twitter.com/eakkattiya facebook.com/eakapong.kattiya Resources by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

4. 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 by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

5. Developing iOS Apps :App Design • ] by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

6. BECTeroradio by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

7. ThailandYellowPages by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

8. Thai M Service by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

9. HIPKINGDOM by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

10. Assumption University by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

11. UIWindow - ทุก Application จะต้องมี window - บน iOS จะมีเพียง 1 window - ใช้สําหรับนําViewController(s) มาวางบน UIWindow - ขนาด 320 x 480 (iPhone) 640 x 960 (iPhone Retina) 640 x 1136 (iPhone 5 Retina) 768 x 1024 (iPad) 768 x 1024 (iPad Retina) window by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

12. UITabBarController & UINavigationBarController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

13. UITabBarController ทําหน้าที่สลับViewController หลาย ๆ ตัวไปมา UITabBarItem ปุ่มของ UITabBar สามารถแก้ไขได้ by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

14. ใช้สําหรับแสดงViewController เป็นลําดับชั้นไปเรื่อย ๆ โดยสามารถ ย้อนกลับดูViewController ก่อนหน้าได้ UINavigationController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

15. UINavigationController - pushViewController ใช้สําหรับเพิ่มViewController เข้าไปใน UINavigationController - popViewController ใช้สําหรับลบViewController ออกจาก UINavigationController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

16. UINavigationItem .rightBarButtonItem.leftBarButtonItem .title Sunday, June 2, 13

17. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 CreateTabbed Application Sunday, June 2, 13

18. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 CreateTabbed Application : MyNavTab Sunday, June 2, 13

19. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Storyboard Sunday, June 2, 13

20. Storyboard :Add Navigation Controller by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

21. Storyboard : Change Start Controller to Navigation Controller by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

22. Storyboard : Set RootView Controller of Navigation Controller by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

23. Storyboard : DeleteTab Bar Connection & RearrangeViewController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

24. Storyboard : Connect TableViewController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

25. Storyboard : Connect SecondViewController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

26. Storyboard :Tab Bar with Navigation Controller by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

27. UIViewController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

28. UIViewController เป็น Class ที่ใช้สําหรับการเขียนคําสั่ง (Logic) เพื่อ ควบคุมการแสดงViews เช่นการสลับViews แสดง ข้อมูลบนView และลบViews by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

29. UIView - CGRect พื้นที่สี่เหลี่ยมในการวาด (x ,y ,width ,height) - CGRectMake : (CGRect) คําสั่งในการสร้าง CGRect - setBackgroundColor: (UIColor*) กําหนดสีพื้นหลัง - addSubView : (UIView*) เอาView1 (subView) หนึ่งไปแปะกับView2 (ParentView) by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

30. UIView SubView (50,50,100,100) SuperView (10,10,300,200) self.view (0,0,320,480) - เป็นการวาดพื้นที่สี่เหลี่ยมเพื่อแสดงบนหน้าจอ - สามารถสร้างด้วย Interface Builder หรือ coding by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

31. UIView CGRect rect1 = CGRectMake(10, 10, 300, 200); UIView *myView1 = [[UIView alloc]initWithFrame:rect1]; [myView1 setBackgroundColor:[UIColor greenColor]]; [self.view addSubview:myView1]; CGRect rect2 = CGRectMake(50, 50, 100, 100); UIView *myView2 = [[UIView alloc]initWithFrame:rect2]; [myView2 setBackgroundColor:[UIColor blueColor]]; [myView1 addSubview:myView2]; by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

32. UIViewController & UIView -Control ที่ทําการแสดงผลที่เป็น Class UI (User Interfaces) นั้นสืบทอดมาจาก Class UIView เหมือนกันหมด เช่น UILabel , UITextField , UIButton ดังนั้น UIViewController จึงสามารถเขียนคําสั่งควบคุม Control ได้ทุกตัว by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

33. UIViewController - presentModalViewController แสดงViewController ขึ้นมาทับViewController อื่น ๆ - dismissModalViewControllerAnimated ยกเลิกการแสดงViewController (ใช้คู่กับ presentModalViewController) by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

34. UIViewController & UIView -Control ที่ทําการแสดงผลที่เป็น Class UI (User Interfaces) นั้นสืบทอดมาจาก Class UIView เหมือนกันหมด เช่น UILabel , UITextField , UIButton ดังนั้น UIViewController จึงสามารถเขียนคําสั่งควบคุม Control ได้ทุกตัว by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

35. 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 Sunday, June 2, 13

36. 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 Sunday, June 2, 13

37. 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 Sunday, June 2, 13

38. 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 Sunday, June 2, 13

39. 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 Sunday, June 2, 13

40. 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 Sunday, June 2, 13

41. 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 Sunday, June 2, 13

42. UIWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

43. •HTTP http://www.netdesign.ac.th •PDF Online - Ofﬂine pdf ﬁle • Custom HTML Content <html><body>Hello World</body> </html> UIWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

44. 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 Sunday, June 2, 13

45. การเรียกใช้งาน 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 Sunday, June 2, 13

46. การเรียกใช้งาน 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 Sunday, June 2, 13

47. การเรียกใช้งาน 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 Sunday, June 2, 13

48. Workshop myWebView by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

49. UITableViewController by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

50. UITableView Sunday, June 2, 13

51. Sunday, June 2, 13

61. Customize UITableView Style by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

62. Customize UITableViewCell Style by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

63. Property List by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

64. เป็นวิธีที่ช่วยให้เก็บข้อมูล ขนาดเล็ก อย่างง่าย ในโครงสร้างแบบ 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 Sunday, June 2, 13

65. ■ ขนาดข้อมูลใหญ่กว่า 300 KB ■ ต้องการเก็บข้อมูลแบบ CustomType ■ ข้อมูลที่ซับซ้อน หลายชั้น Property List เมื่อไรที่ไม่ควรใช้ plist by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 Sunday, June 2, 13

66. 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 Sunday, June 2, 13

67. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 UITableViewController : Create new table.plist (Root Array) Sunday, June 2, 13

68. by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 UITableViewController : Create new table.plist (Root Array) Sunday, June 2, 13

69. @interface MyTableViewController : UITableViewController { NSArray *datasource ; } by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 UITableViewController : Load Datasource from plist @implementation MyTableViewController - (void)viewDidLoad { [super viewDidLoad]; NSURL *url = [[NSBundle mainBundle] URLForResource:@"table" withExtension:@"plist"]; datasource = [NSArray arrayWithContentsOfURL:url]; } Sunday, June 2, 13

70. #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [datasource count]; } by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 UITableViewController : Set Section & Row Sunday, June 2, 13

71. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; // Configure the cell... NSInteger section = indexPath.section ; NSInteger row = indexPath.row ; NSDictionary *rowData = [datasource objectAtIndex:row]; cell.textLabel.text = [rowData valueForKey:@"title"]; cell.detailTextLabel.text = [rowData valueForKey:@"subTitle"]; NSString *imageName = [rowData valueForKey:@"image"]; NSData *data = [[NSData alloc]initWithContentsOfURL:[NSURL URLWithString:imageName]]; cell.imageView.image = [UIImage imageWithData:data]; //cell.imageView.image = [UIImage imageNamed:imageName]; return cell; } by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 UITableViewController : Set Cell Sunday, June 2, 13

72. #pragma mark - Table view delegate - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { WebViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:@"webview"]; [self.navigationController pushViewController:vc animated:YES]; NSDictionary *rowData = [datasource objectAtIndex:indexPath.row]; NSString *urlString = [rowData valueForKey:@"link"]; [vc setURL:urlString]; } by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111 UITableViewController : Set Action when select row Sunday, June 2, 13

(1 July 2013) iOS Basic Development 3 - UITableViewController & Data Source

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

(1 July 2013) iOS Basic Development 3 - UITableViewController & Data Source