Giao diện Master – Detail
Tab Bar
trong iOS
cuong@techmaster.vn

http://techmaster.vn
Master – Detail và các biến thể
http://techmaster.vn
Giao diện master - detail
•  Đi	
  từ	
  tổng	
  quan	
  đến	
  chi	
  tiết	
  
•  Màn	
  hình	
  tổng	
  quan	
  có	
  th...
Giao	
  diện	
  Master	
  –	
  Detail	
  	
  
sử	
  dụng	
  Naviga9onBar	
  chuẩn	
  
của	
  iOS	
  UIKit	
  

Chạm	
  vào...
Master – Detail (500px)
Nút	
  back	
  bu*on	
  và	
  
naviga1on	
  bar	
  điển	
  hình	
  

Tổng	
  quan	
  

Chi	
  9ết	...
Master – Detail (Apple Weather)

Chạm	
  vào	
  thành	
  phố	
  
để	
  xem	
  chi	
  9ết	
  

http://techmaster.vn
Nút	
  back	
  thay	
  
bằng	
  nút	
  close	
  

Ứng	
  dụng	
  Feedly,	
  master	
  –	
  detail	
  nhưng	
  không	
  dùn...
Đừng máy móc !

Master:	
  danh	
  sách	
  các	
  mã	
  cổ	
  phiếu	
  

Master	
  –	
  Detail	
  trong	
  còn	
  một	
  m...
Detail:	
  bản	
  đồ	
  vị	
  trí	
  thiết	
  bị	
  lại	
  ở	
  trên	
  

Master:	
  danh	
  sách	
  thiết	
  bị	
  ở	
  d...
Master-­‐Detail	
  4	
  cấp	
  di	
  chuyển	
  nhưng	
  người	
  dùng	
  vẫn	
  dễ	
  dùng.	
  Vì	
  sao?	
  
http://techm...
Tin	
  quan	
  trọng	
  (featured	
  news)	
  	
  

Quảng	
  cáo	
  ké	
  vào	
  	
  

Các	
  mục	
  trong	
  master	
  kh...
Không	
  phải	
  lúc	
  nào	
  cũng	
  dùng	
  TableView	
  hoặc	
  Collec9onView	
  
Ứng	
  dụng	
  Paper	
  FaceBook,	
 ...
Tab Bar và các biến thể
http://techmaster.vn
Chức	
  năng	
  các	
  tab	
  tương	
  đương	
  

Tab	
  giữa	
  quan	
  trọng	
  hơn,	
  nên	
  to	
  dễ	
  bấm	
  hơn	
 ...
Tab	
  Bar	
  dùng	
  để	
  chia	
  vùng,	
  phân	
  tách	
  các	
  chức	
  năng	
  không	
  liên	
  hệ	
  với	
  nhau	
  ...
Facebook	
  no9fica9on	
  

No9fica9on	
  	
  (Badget	
  trong	
  tab	
  bar	
  item)	
  gây	
  sự	
  
chú	
  ý	
  của	
  ng...
Chức	
  năng	
  chính	
  to	
  dễ	
  bấm	
  

Ấn	
  vào	
  Rotate	
  hiện	
  thêm	
  sub	
  
menu	
  

Sub	
  menu	
  có	
...
Ứng	
  dụng	
  Documents	
  

Customized	
  Tab	
  Bar	
  kết	
  
hợp	
  cả	
  sliding	
  menu	
  

http://techmaster.vn
Khi	
  ứng	
  dụng	
  có	
  quá	
  nhiều	
  
chức	
  năng,	
  không	
  thể	
  nhét	
  
vừa	
  vào	
  Tab	
  bar	
  hãy	
  ...
Trulia	
  

Pinterest	
  

Nếu	
  cần	
  thêm	
  lựa	
  chọn	
  Sub	
  Tab	
  
Không	
  nhất	
  thiết	
  dùng	
  TableView...
Thích chưa? Giờ code nhé !
http://techmaster.vn
Sử	
  dụng	
  StoryBoard	
  thường	
  để	
  tạo	
  prototype	
  ứng	
  dụng	
  
cho	
  khách	
  hàng	
  xem	
  nhanh,	
  c...
Để	
  nhồi	
  một	
  ViewController	
  vào	
  trong	
  
Naviga9on	
  Controller	
  hoặc	
  Tab	
  Bar	
  
Controller	
  
H...
Các quan hệ segue
•  Push:	
  master	
  -­‐>	
  detail	
  
•  Modal:	
  A	
  presents	
  B	
  modally	
  
•  Custom:	
  tự...
Cách mà Techmaster hay làm
•  Tạo	
  giao	
  diện	
  bằng	
  code	
  
•  Khi	
  nào	
  thực	
  sự	
  cần	
  mới	
  dùng	
 ...
Tạo giao diện
Một	
  TabBarController	
  chứa	
  3	
  
screen:	
  	
  
•  Coffee	
  menu:	
  Nav	
  chứa	
  Single	
  VC	
 ...
- (BOOL)application:(UIApplication *)application !
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions!
{!
self.wi...
UITabBarItem

coffeeNav.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Coffee" !
image:[UIImage imageNamed:@"coffee"] ...
Các kỹ thuật quan trọng
•  Thay	
  đổi	
  giao	
  diện	
  Navigation	
  Bar	
  và	
  Tab	
  Bar	
  
•  Truyền	
  dữ	
  liệ...
http://techmaster.vn
Thay đổi background của TabBar
- (void)customizeInterface!
{!
UIImage *tabBarBackground = [UIImage imageNamed:@"tabbar.png...
Thực hành tại lớp – 12 h hôm sau nộp bài

•  Phần	
  truyền	
  dữ	
  liệu	
  giữa	
  các	
  ViewController	
  sẽ	
  để	
  ...
Code	
  thôi	
  các	
  men	
  !	
  
http://techmaster.vn
Upcoming SlideShare
Loading in...5
×

iOS Master - Detail & TabBar

1,321

Published on

Bài giảng lập trình giao diện Master-Detail và TabBar trong Apple iOS

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,321
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "iOS Master - Detail & TabBar"

  1. 1. Giao diện Master – Detail Tab Bar trong iOS cuong@techmaster.vn http://techmaster.vn
  2. 2. Master – Detail và các biến thể http://techmaster.vn
  3. 3. Giao diện master - detail •  Đi  từ  tổng  quan  đến  chi  tiết   •  Màn  hình  tổng  quan  có  thể  là  table  view,  collection   view,  có  chức  năng  tìm  kiếm  hoặc  dạng  phi  chuẩn   •  Màn  hình  chi  tiết  có  nút  Back  hoặc  Close  để  trở  về   màn  hình  chi  tiết   •  Master  -­‐>  Detail  -­‐>  More  Detail  …  nhưng  đừng  quá  sâu   http://techmaster.vn
  4. 4. Giao  diện  Master  –  Detail     sử  dụng  Naviga9onBar  chuẩn   của  iOS  UIKit   Chạm  vào  từng  dòng   table  view  để  xem  chi   9ết     http://techmaster.vn
  5. 5. Master – Detail (500px) Nút  back  bu*on  và   naviga1on  bar  điển  hình   Tổng  quan   Chi  9ết   http://techmaster.vn
  6. 6. Master – Detail (Apple Weather) Chạm  vào  thành  phố   để  xem  chi  9ết   http://techmaster.vn
  7. 7. Nút  back  thay   bằng  nút  close   Ứng  dụng  Feedly,  master  –  detail  nhưng  không  dùng  Naviga9on  Bar  chuẩn,  màn  hình  detail   Được  present  modally   http://techmaster.vn
  8. 8. Đừng máy móc ! Master:  danh  sách  các  mã  cổ  phiếu   Master  –  Detail  trong  còn  một  màn  hình     Detail:  biểu  đồ  của  mã  cổ  phiếu  được  chọn   http://techmaster.vn
  9. 9. Detail:  bản  đồ  vị  trí  thiết  bị  lại  ở  trên   Master:  danh  sách  thiết  bị  ở  dưới   http://techmaster.vn
  10. 10. Master-­‐Detail  4  cấp  di  chuyển  nhưng  người  dùng  vẫn  dễ  dùng.  Vì  sao?   http://techmaster.vn
  11. 11. Tin  quan  trọng  (featured  news)     Quảng  cáo  ké  vào     Các  mục  trong  master  không  nhất   thiết  lúc  nào  cũng  phải  đều  nhau     Tin  bình  thường   http://techmaster.vn
  12. 12. Không  phải  lúc  nào  cũng  dùng  TableView  hoặc  Collec9onView   Ứng  dụng  Paper  FaceBook,  các  chuyên  mục  9n  di  chuyển  bằng   UIScrollView  cùng  Pager  Control  (dãy  các  chấm)   Paper   Facebook   Headline   Tech   Fashion   News  1   News  1   News  1   News  2   News  2   News  2   News  3   News  3   News  3   http://techmaster.vn
  13. 13. Tab Bar và các biến thể http://techmaster.vn
  14. 14. Chức  năng  các  tab  tương  đương   Tab  giữa  quan  trọng  hơn,  nên  to  dễ  bấm  hơn   http://techmaster.vn
  15. 15. Tab  Bar  dùng  để  chia  vùng,  phân  tách  các  chức  năng  không  liên  hệ  với  nhau   Tab  Bar  chứa  Naviga9on  Bar  mà  không  ngược  lại     http://techmaster.vn
  16. 16. Facebook  no9fica9on   No9fica9on    (Badget  trong  tab  bar  item)  gây  sự   chú  ý  của  người  dùng  rất  mạnh   http://techmaster.vn
  17. 17. Chức  năng  chính  to  dễ  bấm   Ấn  vào  Rotate  hiện  thêm  sub   menu   Sub  menu  có  thể  trượt  ngang     http://techmaster.vn
  18. 18. Ứng  dụng  Documents   Customized  Tab  Bar  kết   hợp  cả  sliding  menu   http://techmaster.vn
  19. 19. Khi  ứng  dụng  có  quá  nhiều   chức  năng,  không  thể  nhét   vừa  vào  Tab  bar  hãy  sử  dụng   Sliding  Menu  ở  bên  trái.  Ứng   dụng  Trulia     Sliding  Menu  bên  phải  là   thông  9n  bổ  trợ  ít  quan   trọng  hơn  so  với  bên  trái.   Ứng  dụng  Facebook,  danh   sách  Friend   http://techmaster.vn
  20. 20. Trulia   Pinterest   Nếu  cần  thêm  lựa  chọn  Sub  Tab   Không  nhất  thiết  dùng  TableView   http://techmaster.vn
  21. 21. Thích chưa? Giờ code nhé ! http://techmaster.vn
  22. 22. Sử  dụng  StoryBoard  thường  để  tạo  prototype  ứng  dụng   cho  khách  hàng  xem  nhanh,  code  camp…   Không  nên  dùng  cho  ứng  dụng  phức  tạp   http://techmaster.vn
  23. 23. Để  nhồi  một  ViewController  vào  trong   Naviga9on  Controller  hoặc  Tab  Bar   Controller   Hãy  dùng  Editor  >  Embed  In  >  …     http://techmaster.vn
  24. 24. Các quan hệ segue •  Push:  master  -­‐>  detail   •  Modal:  A  presents  B  modally   •  Custom:  tự  viết  custom  segue   •  Root  View:  Một  Navigation  Controller  luôn   phải  chưa  bên  trong  1  Root  View  Controller   http://techmaster.vn
  25. 25. Cách mà Techmaster hay làm •  Tạo  giao  diện  bằng  code   •  Khi  nào  thực  sự  cần  mới  dùng  XIB  hoặc   StoryBoard   Code  để  load   ViewController   từ  StoryBoard   UIStoryboard *storyBoard = [UIStoryboard storyboardWithName:@"Hack" bundle:nil]; ! ! DrinkVC *drinkVC = [storyBoard instantiateViewControllerWithIdentifier:@"DrinkVC"];   http://techmaster.vn
  26. 26. Tạo giao diện Một  TabBarController  chứa  3   screen:     •  Coffee  menu:  Nav  chứa  Single  VC   •  Drink  Menu:  Nav  chứa  TableView   •  Map:  Single  VC  chứa  MapKit   http://techmaster.vn
  27. 27. - (BOOL)application:(UIApplication *)application ! didFinishLaunchingWithOptions:(NSDictionary *)launchOptions! {! self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];! ! MainVC *mainVC = [[MainVC alloc] initWithNibName:@"MainVC" bundle:nil];! UINavigationController *coffeeNav = [[UINavigationController alloc] ! initWithRootViewController:mainVC];! ! UIStoryboard *storyBoard = [UIStoryboard storyboardWithName:@"Hack" bundle:nil];! DrinkVC *drinkVC = [storyBoard instantiateViewControllerWithIdentifier:@"DrinkVC" ! UINavigationController *drinkNav = [[UINavigationController alloc] ! initWithRootViewController:drinkVC];! ! MapVC *mapVC = [[MapVC alloc] initWithNibName:@"MapVC" bundle:nil];! ! UITabBarController *tabBarController = [UITabBarController new];! tabBarController.viewControllers = @[coffeeNav, drinkNav, mapVC];! self.window.rootViewController = tabBarController;! ! [self.window makeKeyAndVisible];! return YES;! http://techmaster.vn }  
  28. 28. UITabBarItem coffeeNav.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Coffee" ! image:[UIImage imageNamed:@"coffee"] ! selectedImage:[UIImage imageNamed:@"coffeeSelected"]];! ! coffeeNav.tabBarItem.badgeValue = @"3";   http://techmaster.vn
  29. 29. Các kỹ thuật quan trọng •  Thay  đổi  giao  diện  Navigation  Bar  và  Tab  Bar   •  Truyền  dữ  liệu  qua  lại  các  ViewControllers   –  Singleton:  dữ  liệu  dùng  chung  và  duy  nhất,  vd:  Setting   –  Delegate:  ViewController  cần  adopt  Protocol   –  Block:  cách  này  hay  hơn  Delegate   –  Local  Notification  –  Observer:  dùng  để  bắt  sự  kiện  khi  dữ   liệu  thay  đổi   http://techmaster.vn
  30. 30. http://techmaster.vn
  31. 31. Thay đổi background của TabBar - (void)customizeInterface! {! UIImage *tabBarBackground = [UIImage imageNamed:@"tabbar.png"];! [[UITabBar appearance] setBackgroundImage:tabBarBackground];! [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"selection-tab.png"]];! UIImage *background = [UIImage imageNamed:@"background.jpg"];! [self.window setBackgroundColor:[UIColor colorWithPatternImage:background]];! }   Tương  tự  hãy  dùng    [UINaviga9onBar  appearance]  để  thay  đổi  background  của  Nav  Bar   http://techmaster.vn
  32. 32. Thực hành tại lớp – 12 h hôm sau nộp bài •  Phần  truyền  dữ  liệu  giữa  các  ViewController  sẽ  để   một  buổi  chuyên  biệt   •  Bây  giờ  hãy  tạo  một  ứng  dụng  :   –  Bán  xe  đạp  và  phụ  kiện,  cửa  hàng  +  bản  đồ   –  Tủ  sách  và  xem  truyện  trực  tuyến   –  Cửa  hàng  café  tích  điểm  cho  khách  hàng  dùng  di  động   –  Giới  thiệu  sản  phẩm  xe  máy  hãng  Honda,  Yamaha   http://techmaster.vn
  33. 33. Code  thôi  các  men  !   http://techmaster.vn

×