![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](https://image.slidesharecdn.com/navigationtabcontroller-140228044317-phpapp01/75/iOS-Master-Detail-TabBar-25-2048.jpg)
![- (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
}](https://image.slidesharecdn.com/navigationtabcontroller-140228044317-phpapp01/75/iOS-Master-Detail-TabBar-27-2048.jpg)
![UITabBarItem
coffeeNav.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Coffee" !
image:[UIImage imageNamed:@"coffee"] !
selectedImage:[UIImage imageNamed:@"coffeeSelected"]];!
!
coffeeNav.tabBarItem.badgeValue = @"3";
http://techmaster.vn](https://image.slidesharecdn.com/navigationtabcontroller-140228044317-phpapp01/75/iOS-Master-Detail-TabBar-28-2048.jpg)
![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](https://image.slidesharecdn.com/navigationtabcontroller-140228044317-phpapp01/75/iOS-Master-Detail-TabBar-31-2048.jpg)
Uploaded byTechMaster Vietnam
iOS Master - Detail & TabBar
Tài liệu cung cấp hướng dẫn chi tiết về giao diện master-detail và tab bar trong iOS, bao gồm cách bố trí các màn hình, cách sử dụng navigation bar và các phương pháp truyền dữ liệu giữa các view controllers. Nó nhấn mạnh việc sử dụng storyboard để tạo prototype ứng dụng và các kỹ thuật tùy chỉnh giao diện cho tab bar và navigation bar. Ngoài ra, tài liệu còn đề xuất các ứng dụng thực hành liên quan đến bán hàng và dịch vụ trực tuyến.
iOS Master - Detail & TabBar
- 1. Giao diện Master– Detail Tab Bar trong iOS cuong@techmaster.vn http://techmaster.vn
- 2. Master – Detailvà các biến thể http://techmaster.vn
- 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. 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. 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. Master – Detail(Apple Weather) Chạm vào thành phố để xem chi 9ết http://techmaster.vn
- 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. Đừ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. 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. 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. 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. 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. Tab Bar vàcác biến thể http://techmaster.vn
- 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. 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. 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. 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. Ứng dụng Documents Customized Tab Bar kết hợp cả sliding menu http://techmaster.vn
- 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. 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. Thích chưa? Giờcode nhé ! http://techmaster.vn
- 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. Để 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. 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. Cách mà Techmasterhay 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. 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. - (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. UITabBarItem coffeeNav.tabBarItem = [[UITabBarItemalloc] initWithTitle:@"Coffee" ! image:[UIImage imageNamed:@"coffee"] ! selectedImage:[UIImage imageNamed:@"coffeeSelected"]];! ! coffeeNav.tabBarItem.badgeValue = @"3"; http://techmaster.vn
- 29. Các kỹ thuậtquan 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.
- 31. Thay đổi backgroundcủ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. Thực hành tạilớ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. Code thôi các men ! http://techmaster.vn