Class 10iOS 應⽤用軟體設計
內容⼤大綱•   ViewController•   UIApplication, Window,Views,ViewControllers•   UINavigationController    •   QV031:逐步完成導覽列控制器  ...
View Controller
View Controllers
Window,Views,ViewControllers•   Window    •   Every application has at least one window    •   Blank canvas to host views•...
UIApplication• Set up main run loop• Manages event queue• Custom behavior through delegation • UIApplicationDelegation
View Controllers•   Every screen should have its own controller•   UIViewController implements much of the iOS    standard...
A window with its targetscreen and content views
A view controller attached to awindow automatically adds its view         of the window
View Management Cycle
View Management Cycle
View Controller Cycle
Interface Orientation
Type of View Controllers•   Custom view controller    •   Directly express content on the screen•   Container view control...
View controllerclasses in UIkit
UINavigationController
Navigation controller
Objects managed bynavigation controller
Navigation stack
範例: 逐步完成導覽列程式
Project QV031 Navigation Controller 導覽列控制器 由⼀一個主畫⾯面,按鈕進⼊入 各個⼦子畫⾯面
UINavigationController 有多個畫⾯面時(很少只有⼀一個畫⾯面吧!) 負責切換畫⾯面的程式 切換畫⾯面時可以設定...有無動畫效果 (⼦子畫⾯面會從螢幕右邊進⼊入) 位於螢幕上⽅方,當切換到下個畫⾯面時, 導覽列左上⾓角會出...
重要methodpushViewController: animated:使⽤用此⽅方法加⼊入⼦子畫⾯面(亦即切換到⼦子畫⾯面)............(回上⼀一⾴頁的 method 呢?)
範例根畫⾯面內含兩個按鈕按下後會顯⽰示各⾃自的畫⾯面導覽列上有『回上⾴頁』,按下回到根畫⾯面                 iPhone               (Page1View)  Apple產品  (RootView)      ...
練習步驟步驟⼀一:設定導覽列控制器步驟⼆二:新增畫⾯面,並置⼊入根畫⾯面步驟三:增加⼦子畫⾯面步驟四:顯⽰示細節修改 (編輯導覽列)
步驟 (⼀一):設定導覽列新增專案選擇 ...加⼊入 UINavigationController於程式初始時 (AppDelegate),啟動導覽列控制項
AppDelegate.h                                        (1) 注意是寫在AppDelegate.h 及                                             ...
執⾏行......應該會看到上⽅方的導覽列(Navigation)接下來......
步驟 (⼆二):置⼊入根畫⾯面新增畫⾯面 (view controller)加⼊入根畫⾯面的物件及程式把根畫⾯面置⼊入導覽列控制器
如有圖檔,記得將準備好 的圖檔加⼊入到專案裡
增加檔案,選擇UIViewController
(1) ⾃自訂類別名稱    (2) 確認UIViewController    (3) 勾選以產⽣生 .xib 檔案 會產⽣生三個檔案畫⾯面內容可⾃自⾏行設計
新增的 RootView 仍是在AppDelegate.h                                                  AppDelegate 內引⽤用  #import <UIKit/UIKit.h>  ...
執⾏行......會直接看到根畫⾯面接下來......
步驟 (三):增加⼦子畫⾯面新增兩個⼦子畫⾯面物件(Page1View 及 Page2View)在根畫⾯面加⼊入兩個按鈕,並設定好事件在按鈕事件中,將⼦子畫⾯面物件加⼊入到導覽列控制器內。並顯⽰示⼦子畫⾯面
(1) 新增兩個⼦子畫⾯面類別(2) 只需要在  .xib 內放置 ImageView及圖⽚片即可
RootView.xib               設置按鈕並連接到按下               事件時要執⾏行的⽅方法
#import <UIKit/UIKit.h>RootView.h              #import "Page1View.h"              #import "Page2View.h"                   ...
執⾏行......導覽列之功能完成                    動畫移動
步驟 (四):顯⽰示細節修改加⼊入每個畫⾯面中導覽列的標題更改所有的倒退按鈕⽂文字(注意:不是改⽂文字屬性就可以的...)各畫⾯面有各⾃自的倒退按鈕⽂文字其他導覽列的屬性
AppDelegate.m- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ ...
RootView.m-(IBAction)goPage1:(id)sender{    Page1View *page1 = [[Page1View alloc] init];    [self.navigationController pus...
預設是⽤用前⾴頁之標題為倒退按鈕的⽂文字
AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions...
重新設定各畫⾯面倒退按鈕的⽂文字
導覽列的顯⽰示將導覽列隱藏起來setNavigationBarHidden (YES/NO)若設為隱藏,則必須⾃自⾏行增加回前畫⾯面的按鈕及程式   popViewControllerAnimated:   popToRootViewContr...
問題練習若要在各個畫⾯面的倒退按鈕⽂文字都不同,該如何處理?           各畫⾯面可以各別           設定倒退按鈕⽂文字
參考解答                                                RootView.m-(IBAction)goPage1:(id)sender{    Page1View *page1 = [[Page1...
範例觀摩:NavBar
Tab Bar Controller
Tab Bar Controller
範例練習:     開啟新專案 『Tabbed Application』
範例: Tab Bar 標籤列
Project QV033TabBar Controller 標籤列控制器更多個標籤的View將UITabBarController寫在某個ViewController之後TabBar各個項⺫⽬目的圖⽂文
說明T Bar 控制器簡介 ab在某畫⾯面之後新增 T Bar Controller           ab增加 T Bar 切換畫⾯面    ab⾃自訂 T Bar 按鈕外觀     ab
UITabBarController位於螢幕下⽅方,通常有4~5個按鈕,按下不同的按鈕,即切換到不同的畫⾯面(ViewController)將各個ViewController物件,以陣列(NSArray) 形式做為參數,指定給UITabBarC...
預先準備好各畫⾯面            注意此範例將UITabBarController 置於            ViewController畫⾯面 (如要⼀一開始就出現,            則可置於 AppDelegate 類別內
ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController{    UITabBarController *tabBarControll...
ViewController.xib
#import   "ViewController.h"#import   "Page1View.h"                            ViewController.m#import   "Page2View.h"#imp...
加⼊入TabBarItem的圖⽂文必須先新增 UITabBarItem 物件指定⽂文字及圖⽚片,亦可使⽤用系統內建的型式將此 UITabBarItem 物件指定在各個ViewController(注意:不是在 UITabbarControlle...
- (void)viewDidLoad{    [super viewDidLoad];                               ViewController.h    Page1View *page1 = [[Page1V...
系統內建的標籤項⺫⽬目typedef enum {    UITabBarSystemItemMore,    UITabBarSystemItemFavorites,    UITabBarSystemItemFeatured,    UIT...
⾃自訂標籤項⺫⽬目⽂文字// ⾃自⾏行設定⽂文字 (無圖⽚片)UITabBarItem *item1 =   [[UITabBarItem   alloc]   initWithTitle:@"藍⾊色"    image:nil   tag:0...
 ⾃自訂UITabBarItem的圖形 灰階圖⽚片 30x30 像素 背景為透明 存檔為『xxx.png』 如需⽤用到 iPhone4 的⾼高解析度螢幕中   60x60 像素   存檔為『xxx@2x.png』
另⼀一種寫法:⾃自訂標籤項⺫⽬目⽂文字及圖⽚片  // 指定到各個ViewController物件 (注意:不是指定在UITabBarController)  /*  page1.tabBarItem = item1;  page2.tabBa...
問題:標籤列位置不對                    理想結果上⽅方會多出⼀一列,下⽅方會被截去
有建議將ViewController的狀態列                                  設為無,但似乎無效!!!                                                    必須...
問題:畫⾯面內容尺⼨寸不對
作業練習如何解決之前畫⾯面尺⼨寸不對的問題?超過五個以上的畫⾯面會如何?做出兩組的 TabBar (似乎沒有意義)
奇怪的功能
UIToolbar 使⽤用及轉場動畫
Project QV039透過根控制器,進⾏行畫⾯面間的切換UIToolbar的使⽤用
AppDelegate.h   AppDelegate.m                           BlueViewController.h                           BlueViewController....
AppDelegate.h#import <UIKit/UIKit.h>@class SwitchViewController;@interface AppDelegate : UIResponder <UIApplicationDelegat...
AppDelegate.m#import "AppDelegate.h"#import "SwitchViewController.h"@implementation AppDelegate@synthesize window = _windo...
ViewController.h#import <UIKit/UIKit.h>@class BlueViewController;@class YellowViewController;@interface SwitchViewControll...
ViewController.xib
#import "SwitchViewController.h"#import "BlueViewController.h"                ViewController.m (1/3)#import "YellowViewCon...
ViewController.m (2/3)- (IBAction)switchViews:(id)sender{    if(self.yellowViewController.view.superview==nil)    {       ...
ViewController.m (3/3)- (void)didReceiveMemoryWarning{    // Releases the view if it doesnt have a superview.    [super di...
BlueViewController.xib
問題ViewController.m 裡的問題......   這裡不能⽤用addSubView,為什麼?   (會把ViewController的 toolbar 蓋住)   為何要這麼⿇麻煩!為何不⼀一開始就將藍⿈黃兩個   ViewCon...
Project QV040延續 QV039加⼊入轉換 UIView 的動畫
注意:⼀一般 Button 和 Bar Button Item 不同
- (IBAction)switchViews:(id)sender                       ViewController.m{    [UIView beginAnimations:@"View Flip" context...
轉場時速度的變化// 控制速度變化[UIView setAnimationCurve:UIViewAnimationCurveLinear];// 從頭到尾都是等速[UIView setAnimationCurve:UIViewAnimatio...
作業練習⽐比較 InsertSubview 和 AddSubview
多⾴頁⾯面處理之技巧
多⾴頁⾯面處理的演進•   各⾃自為政     •   ⼀一個 ViewController 控制全部的項⺫⽬目     •   各個 ViewController 控制各⾃自的 View•   建置更上層的控制器,管理各個 ViewContr...
Navigation Controller
Tab Bar + Navigation
presentatoin ViewController
Storyboard建⽴立多⾴頁⾯面關連的好⼯工具
不⼀一定要弄成許多個     ViewController• UITableView Controller• UIPageView Controll• UIScrollView Controller• ......
......
I os 10
I os 10
I os 10
I os 10
I os 10
Upcoming SlideShare
Loading in...5
×

I os 10

429

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Transcript of "I os 10"

  1. 1. Class 10iOS 應⽤用軟體設計
  2. 2. 內容⼤大綱• ViewController• UIApplication, Window,Views,ViewControllers• UINavigationController • QV031:逐步完成導覽列控制器 • Samples:NavBar• TabbarController • QV033:Tabbar Controller 標籤列• UIToolbar 使⽤用及轉場動畫 • QV039:使⽤用根控制器,切換畫⾯面 • QV040:畫⾯面切換的動畫• 多⾴頁⾯面處理
  3. 3. View Controller
  4. 4. View Controllers
  5. 5. Window,Views,ViewControllers• Window • Every application has at least one window • Blank canvas to host views• View • Draw and animate content • Layout subviews • Receive and forward events• View Controller • Manages a self-contained view hierarchy
  6. 6. UIApplication• Set up main run loop• Manages event queue• Custom behavior through delegation • UIApplicationDelegation
  7. 7. View Controllers• Every screen should have its own controller• UIViewController implements much of the iOS standard interface behavior • Loading nib file • Working with navigation, tab, and tool bars • Composing multiple view controllers • Handling events and memory warnings • Managing interface orientation change
  8. 8. A window with its targetscreen and content views
  9. 9. A view controller attached to awindow automatically adds its view of the window
  10. 10. View Management Cycle
  11. 11. View Management Cycle
  12. 12. View Controller Cycle
  13. 13. Interface Orientation
  14. 14. Type of View Controllers• Custom view controller • Directly express content on the screen• Container view controller • Manage other view controllers • Usually does not express content directly• Modal view controller • Any view controller can be presented modally
  15. 15. View controllerclasses in UIkit
  16. 16. UINavigationController
  17. 17. Navigation controller
  18. 18. Objects managed bynavigation controller
  19. 19. Navigation stack
  20. 20. 範例: 逐步完成導覽列程式
  21. 21. Project QV031 Navigation Controller 導覽列控制器 由⼀一個主畫⾯面,按鈕進⼊入 各個⼦子畫⾯面
  22. 22. UINavigationController 有多個畫⾯面時(很少只有⼀一個畫⾯面吧!) 負責切換畫⾯面的程式 切換畫⾯面時可以設定...有無動畫效果 (⼦子畫⾯面會從螢幕右邊進⼊入) 位於螢幕上⽅方,當切換到下個畫⾯面時, 導覽列左上⾓角會出現『Back』
  23. 23. 重要methodpushViewController: animated:使⽤用此⽅方法加⼊入⼦子畫⾯面(亦即切換到⼦子畫⾯面)............(回上⼀一⾴頁的 method 呢?)
  24. 24. 範例根畫⾯面內含兩個按鈕按下後會顯⽰示各⾃自的畫⾯面導覽列上有『回上⾴頁』,按下回到根畫⾯面 iPhone (Page1View) Apple產品 (RootView) iPad (Page2View)
  25. 25. 練習步驟步驟⼀一:設定導覽列控制器步驟⼆二:新增畫⾯面,並置⼊入根畫⾯面步驟三:增加⼦子畫⾯面步驟四:顯⽰示細節修改 (編輯導覽列)
  26. 26. 步驟 (⼀一):設定導覽列新增專案選擇 ...加⼊入 UINavigationController於程式初始時 (AppDelegate),啟動導覽列控制項
  27. 27. AppDelegate.h (1) 注意是寫在AppDelegate.h 及 AppDelegate.m上 @interface ViewController : UIViewController { UINavigationController *navController; (2) 先加⼊入導覽列物件 } @end (3) 在App初始化時就加⼊入導覽列AppDelegate.m- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // Override point for customization after application launch. self.viewController = [[ViewController alloc] initWithNibName:@"ViewController"bundle:nil]; self.window.rootViewController = self.viewController; [self.window makeKeyAndVisible]; // 加⼊入導覽列物件 navController = [[UINavigationController alloc] init]; [self.window addSubview:navController.view]; return YES;}
  28. 28. 執⾏行......應該會看到上⽅方的導覽列(Navigation)接下來......
  29. 29. 步驟 (⼆二):置⼊入根畫⾯面新增畫⾯面 (view controller)加⼊入根畫⾯面的物件及程式把根畫⾯面置⼊入導覽列控制器
  30. 30. 如有圖檔,記得將準備好 的圖檔加⼊入到專案裡
  31. 31. 增加檔案,選擇UIViewController
  32. 32. (1) ⾃自訂類別名稱 (2) 確認UIViewController (3) 勾選以產⽣生 .xib 檔案 會產⽣生三個檔案畫⾯面內容可⾃自⾏行設計
  33. 33. 新增的 RootView 仍是在AppDelegate.h AppDelegate 內引⽤用 #import <UIKit/UIKit.h> #import "RootView.h" (1) 宣告 RootView @class ViewController; @interface AppDelegate : UIResponder <UIApplicationDelegate> { UINavigationController *navController; }AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions { // 部分程式省略 (2) 加⼊入 RootView // 加⼊入導覽列物件 navController = [[UINavigationController alloc] init]; 並推⼊入導覽列 [self.window addSubview:navController.view]; // 宣告根畫⾯面物件,並將它加⼊入導覽列 (同時會顯⽰示出來) RootView *rootView = [[RootView alloc] init]; [navController pushViewController:rootView animated:NO]; return YES; }
  34. 34. 執⾏行......會直接看到根畫⾯面接下來......
  35. 35. 步驟 (三):增加⼦子畫⾯面新增兩個⼦子畫⾯面物件(Page1View 及 Page2View)在根畫⾯面加⼊入兩個按鈕,並設定好事件在按鈕事件中,將⼦子畫⾯面物件加⼊入到導覽列控制器內。並顯⽰示⼦子畫⾯面
  36. 36. (1) 新增兩個⼦子畫⾯面類別(2) 只需要在  .xib 內放置 ImageView及圖⽚片即可
  37. 37. RootView.xib 設置按鈕並連接到按下 事件時要執⾏行的⽅方法
  38. 38. #import <UIKit/UIKit.h>RootView.h #import "Page1View.h" #import "Page2View.h" 加⼊入兩個⼦子類別 @interface RootView : UIViewController { } - (IBAction)goPage1:(id)sender; - (IBAction)goPage2:(id)sender; @end 將⼀一個⼦子畫⾯面類別RootView.m #import "RootView.h" 推⼊入導覽列中 @implementation RootView 有換場動畫 -(IBAction)goPage1:(id)sender { Page1View *page1 = [[Page1View alloc] init]; [self.navigationController pushViewController:page1 animated:YES]; } -(IBAction)goPage2:(id)sender { Page2View *page2 = [[Page2View alloc] init]; [self.navigationController pushViewController:page2 animated:YES]; }
  39. 39. 執⾏行......導覽列之功能完成 動畫移動
  40. 40. 步驟 (四):顯⽰示細節修改加⼊入每個畫⾯面中導覽列的標題更改所有的倒退按鈕⽂文字(注意:不是改⽂文字屬性就可以的...)各畫⾯面有各⾃自的倒退按鈕⽂文字其他導覽列的屬性
  41. 41. AppDelegate.m- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ // 部分程式省略 // 加⼊入導覽列物件 navController = [[UINavigationController alloc] init]; [navController.navigationBar setTintColor:[UIColor redColor]]; [self.window addSubview:navController.view]; // 宣告根畫⾯面物件,並將它加⼊入導覽列 (同時會顯⽰示出來) RootView *rootView = [[RootView alloc] init]; [navController pushViewController:rootView animated:NO]; rootView.navigationItem.title = @"蘋果產品"; return YES;}
  42. 42. RootView.m-(IBAction)goPage1:(id)sender{ Page1View *page1 = [[Page1View alloc] init]; [self.navigationController pushViewController:page1 animated:YES]; page1.navigationItem.title = @"iPhone";}-(IBAction)goPage2:(id)sender{ Page2View *page2 = [[Page2View alloc] init]; [self.navigationController pushViewController:page2 animated:YES]; page2.navigationItem.title = @"iPad";}
  43. 43. 預設是⽤用前⾴頁之標題為倒退按鈕的⽂文字
  44. 44. AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 部分程式省略 // 加⼊入導覽列物件 navController = [[UINavigationController alloc] init]; [navController.navigationBar setTintColor:[UIColor redColor]]; [self.window addSubview:navController.view]; // 設定back的按鈕 UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"回前⾴頁" style:UIBarButtonItemStyleBordered target:nil action:nil]; // 宣告根畫⾯面物件,並將它加⼊入導覽列 (同時會顯⽰示出來) RootView *rootView = [[RootView alloc] init]; [navController pushViewController:rootView animated:NO]; rootView.navigationItem.title = @"蘋果產品"; rootView.navigationItem.backBarButtonItem = backButton; return YES; }
  45. 45. 重新設定各畫⾯面倒退按鈕的⽂文字
  46. 46. 導覽列的顯⽰示將導覽列隱藏起來setNavigationBarHidden (YES/NO)若設為隱藏,則必須⾃自⾏行增加回前畫⾯面的按鈕及程式 popViewControllerAnimated: popToRootViewControllerAnimated: popToViewController: animated:可以設定有無(導覽列出現)動畫效果可以客製化導覽列內容
  47. 47. 問題練習若要在各個畫⾯面的倒退按鈕⽂文字都不同,該如何處理? 各畫⾯面可以各別 設定倒退按鈕⽂文字
  48. 48. 參考解答 RootView.m-(IBAction)goPage1:(id)sender{ Page1View *page1 = [[Page1View alloc] init]; page1.navigationItem.title = @"iPhone"; [self.navigationController pushViewController:page1 animated:YES]; // 設定back的按鈕 UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Go Back" style:UIBarButtonItemStyleBordered target:nil action:nil]; self.navigationItem.backBarButtonItem = backButton;}
  49. 49. 範例觀摩:NavBar
  50. 50. Tab Bar Controller
  51. 51. Tab Bar Controller
  52. 52. 範例練習: 開啟新專案 『Tabbed Application』
  53. 53. 範例: Tab Bar 標籤列
  54. 54. Project QV033TabBar Controller 標籤列控制器更多個標籤的View將UITabBarController寫在某個ViewController之後TabBar各個項⺫⽬目的圖⽂文
  55. 55. 說明T Bar 控制器簡介 ab在某畫⾯面之後新增 T Bar Controller ab增加 T Bar 切換畫⾯面 ab⾃自訂 T Bar 按鈕外觀 ab
  56. 56. UITabBarController位於螢幕下⽅方,通常有4~5個按鈕,按下不同的按鈕,即切換到不同的畫⾯面(ViewController)將各個ViewController物件,以陣列(NSArray) 形式做為參數,指定給UITabBarController
  57. 57. 預先準備好各畫⾯面 注意此範例將UITabBarController 置於 ViewController畫⾯面 (如要⼀一開始就出現, 則可置於 AppDelegate 類別內
  58. 58. ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController{ UITabBarController *tabBarController;}- (IBAction)showTabBar:(id)sender;@end
  59. 59. ViewController.xib
  60. 60. #import "ViewController.h"#import "Page1View.h" ViewController.m#import "Page2View.h"#import "Page3View.h"#import "Page4View.h"@implementation ViewController (2)按鈕按下時 才顯⽰示出來- (IBAction)showTabBar:(id)sender{ [self.view addSubview:tabBarController.view];}- (void)viewDidLoad{ [super viewDidLoad]; Page1View *page1 = [[Page1View alloc] init]; (1)置⼊入標籤列 Page2View *page2 = [[Page2View alloc] init]; Page3View *page3 = [[Page3View alloc] init]; Page4View *page4 = [[Page4View alloc] init]; tabBarController = [[UITabBarController alloc] init]; tabBarController.viewControllers = [NSArray arrayWithObjects: page1, page2, page3, page4, nil];}
  61. 61. 加⼊入TabBarItem的圖⽂文必須先新增 UITabBarItem 物件指定⽂文字及圖⽚片,亦可使⽤用系統內建的型式將此 UITabBarItem 物件指定在各個ViewController(注意:不是在 UITabbarController 裡設定)
  62. 62. - (void)viewDidLoad{ [super viewDidLoad]; ViewController.h Page1View *page1 = [[Page1View alloc] init]; Page2View *page2 = [[Page2View alloc] init]; Page3View *page3 = [[Page3View alloc] init]; Page4View *page4 = [[Page4View alloc] init]; tabBarController = [[UITabBarController alloc] init]; tabBarController.viewControllers = [NSArray arrayWithObjects: page1, page2, page3, page4, nil]; // 加⼊入TabBar項⺫⽬目的圖⽂文 (系統內建的) UITabBarItem *item1 = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemBookmarks tag:0]; UITabBarItem *item2 = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemContacts tag:0]; UITabBarItem *item3 = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFeatured tag:0]; UITabBarItem *item4 = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:0]; // 指定到各個ViewController物件 (注意:不是指定在UITabBarController) page1.tabBarItem = item1; page2.tabBarItem = item2; page3.tabBarItem = item3; page4.tabBarItem = item4;}
  63. 63. 系統內建的標籤項⺫⽬目typedef enum { UITabBarSystemItemMore, UITabBarSystemItemFavorites, UITabBarSystemItemFeatured, UITabBarSystemItemTopRated, UITabBarSystemItemRecents, UITabBarSystemItemContacts, UITabBarSystemItemHistory, UITabBarSystemItemBookmarks, UITabBarSystemItemSearch, UITabBarSystemItemDownloads, UITabBarSystemItemMostRecent, UITabBarSystemItemMostViewed,} UITabBarSystemItem;
  64. 64. ⾃自訂標籤項⺫⽬目⽂文字// ⾃自⾏行設定⽂文字 (無圖⽚片)UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:@"藍⾊色" image:nil tag:0];UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:@"綠⾊色" image:nil tag:0];UITabBarItem *item3 = [[UITabBarItem alloc] initWithTitle:@"紅⾊色" image:nil tag:0];UITabBarItem *item4 = [[UITabBarItem alloc] initWithTitle:@"⿈黃⾊色" image:nil tag:0]; ⾃自訂標籤項⺫⽬目⽂文字及圖⽚片 // ⾃自⾏行設定⽂文字及圖⽚片 UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:@"藍⾊色" image:[UIImage imageNamed:@"Tab_B.png"] tag:0]; UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:@"綠⾊色" image:[UIImage imageNamed:@"Tab_G.png"] tag:0]; UITabBarItem *item3 = [[UITabBarItem alloc] initWithTitle:@"紅⾊色" image:[UIImage imageNamed:@"Tab_R.png"] tag:0]; UITabBarItem *item4 = [[UITabBarItem alloc] initWithTitle:@"⿈黃⾊色" image:[UIImage imageNamed:@"Tab_Y.png"] tag:0];
  65. 65.  ⾃自訂UITabBarItem的圖形 灰階圖⽚片 30x30 像素 背景為透明 存檔為『xxx.png』 如需⽤用到 iPhone4 的⾼高解析度螢幕中 60x60 像素 存檔為『xxx@2x.png』
  66. 66. 另⼀一種寫法:⾃自訂標籤項⺫⽬目⽂文字及圖⽚片 // 指定到各個ViewController物件 (注意:不是指定在UITabBarController) /* page1.tabBarItem = item1; page2.tabBarItem = item2; page3.tabBarItem = item3; 此⽅方法不需要指定建⽴立UIT abBarItem物件 page4.tabBarItem = item4; */ // 也可以⽤用另⼀一種⽅方式,直接指定各Viewcontroller的title屬性 page1.title = [[NSString alloc] initWithFormat:@"藍⾊色"]; page2.title = [[NSString alloc] initWithFormat:@"綠⾊色"]; page3.title = [[NSString alloc] initWithFormat:@"紅⾊色"]; page4.title = [[NSString alloc] initWithFormat:@"⿈黃⾊色"]; page1.tabBarItem.image = [UIImage imageNamed:@"Tab_B"]; page2.tabBarItem.image = [UIImage imageNamed:@"Tab_G"]; page3.tabBarItem.image = [UIImage imageNamed:@"Tab_R"]; page4.tabBarItem.image = [UIImage imageNamed:@"Tab_Y"];
  67. 67. 問題:標籤列位置不對 理想結果上⽅方會多出⼀一列,下⽅方會被截去
  68. 68. 有建議將ViewController的狀態列 設為無,但似乎無效!!! 必須增加這⼀一列程式{ [super viewDidLoad]; self.wantsFullScreenLayout = YES; // 避免TabBar往下偏移 Page1View *page1 = [[Page1View alloc] init]; Page2View *page2 = [[Page2View alloc] init]; Page3View *page3 = [[Page3View alloc] init]; Page4View *page4 = [[Page4View alloc] init]; tabBarController = [[UITabBarController alloc] init]; tabBarController.viewControllers = [NSArray arrayWithObjects: page1, page2, page3, page4, nil];
  69. 69. 問題:畫⾯面內容尺⼨寸不對
  70. 70. 作業練習如何解決之前畫⾯面尺⼨寸不對的問題?超過五個以上的畫⾯面會如何?做出兩組的 TabBar (似乎沒有意義)
  71. 71. 奇怪的功能
  72. 72. UIToolbar 使⽤用及轉場動畫
  73. 73. Project QV039透過根控制器,進⾏行畫⾯面間的切換UIToolbar的使⽤用
  74. 74. AppDelegate.h AppDelegate.m BlueViewController.h BlueViewController.mSwitchViewController.h BlueViewController.xibSwitchViewController.mSwitchViewController.xib YellowViewController.h YellowViewController.m YellowViewController.xib
  75. 75. AppDelegate.h#import <UIKit/UIKit.h>@class SwitchViewController;@interface AppDelegate : UIResponder <UIApplicationDelegate>{ SwitchViewController *switchViewController;}@property (strong, nonatomic) UIWindow *window;@property (nonatomic, retain) IBOutlet SwitchViewController*switchViewController;@end 此處之 SwitchViewController 與 專案樣版 SingleView 的功能相同
  76. 76. AppDelegate.m#import "AppDelegate.h"#import "SwitchViewController.h"@implementation AppDelegate@synthesize window = _window;@synthesize switchViewController;- (BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen]bounds]]; self.window.backgroundColor = [UIColor whiteColor]; //[self.window addSubview:switchViewController.view]; // 不能使⽤用 self.switchViewController = [[SwitchViewController alloc] initWithNibName:@"SwitchViewController" bundle:nil]; self.window.rootViewController = self.switchViewController; [self.window makeKeyAndVisible]; return YES;}
  77. 77. ViewController.h#import <UIKit/UIKit.h>@class BlueViewController;@class YellowViewController;@interface SwitchViewController : UIViewController{ BlueViewController *blueViewController; YellowViewController *yellowViewController;}@property (retain,nonatomic) BlueViewController *blueViewController;@property (retain,nonatomic) YellowViewController *yellowViewController;- (IBAction)switchViews:(id)sender;@end
  78. 78. ViewController.xib
  79. 79. #import "SwitchViewController.h"#import "BlueViewController.h" ViewController.m (1/3)#import "YellowViewController.h"@implementation SwitchViewController@synthesize blueViewController;@synthesize yellowViewController;- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil{ self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Custom initialization } return self;}#pragma mark - View lifecycle- (void)viewDidLoad{ [super viewDidLoad]; blueViewController = [[BlueViewController alloc] initWithNibName:@"BlueViewController" bundle:nil]; [self.view insertSubview:blueViewController.view atIndex:0]; // [super viewDidLoad];} 這裡不能⽤用addSubView,為什麼?
  80. 80. ViewController.m (2/3)- (IBAction)switchViews:(id)sender{ if(self.yellowViewController.view.superview==nil) { if(self.yellowViewController==nil) { yellowViewController = [[YellowViewController alloc] initWithNibName:@"YellowViewController" bundle:nil]; } [blueViewController.view removeFromSuperview]; [self.view insertSubview:yellowViewController.view atIndex:0]; } else { if(self.blueViewController==nil) { blueViewController = [[BlueViewController alloc] initWithNibName:@"BlueViewController" bundle:nil]; } [yellowViewController.view removeFromSuperview]; [self.view insertSubview:blueViewController.view atIndex:0]; }} 為何要這麼⿇麻煩!為何不⼀一開始就將藍⿈黃 兩個ViewController都叫出來再切換順序?
  81. 81. ViewController.m (3/3)- (void)didReceiveMemoryWarning{ // Releases the view if it doesnt have a superview. [super didReceiveMemoryWarning]; // Release any cached data, images, etc that arent in use. if(self.blueViewController.view.superview==nil) self.blueViewController = nil; else self.yellowViewController = nil;} 多個畫⾯面的程式中,記憶體管理變得更加重要
  82. 82. BlueViewController.xib
  83. 83. 問題ViewController.m 裡的問題...... 這裡不能⽤用addSubView,為什麼? (會把ViewController的 toolbar 蓋住) 為何要這麼⿇麻煩!為何不⼀一開始就將藍⿈黃兩個 ViewController都叫出來? (延遲載⼊入,記憶體節⽤用)
  84. 84. Project QV040延續 QV039加⼊入轉換 UIView 的動畫
  85. 85. 注意:⼀一般 Button 和 Bar Button Item 不同
  86. 86. - (IBAction)switchViews:(id)sender ViewController.m{ [UIView beginAnimations:@"View Flip" context:nil]; [UIView setAnimationDuration:1.25]; [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; if(self.yellowViewController.view.superview==nil) { if(self.yellowViewController==nil) { yellowViewController = [[YellowViewController alloc] initWithNibName:@"YellowViewController" bundle:nil]; } [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES]; [blueViewController viewWillAppear:YES]; [yellowViewController viewWillDisappear:YES]; [blueViewController.view removeFromSuperview]; [self.view insertSubview:yellowViewController.view atIndex:0]; [yellowViewController viewDidDisappear:YES]; [blueViewController viewDidAppear:YES]; } else { // 部分程式省略 } 僅在ViewController.m中增加程式 [UIView commitAnimations];}
  87. 87. 轉場時速度的變化// 控制速度變化[UIView setAnimationCurve:UIViewAnimationCurveLinear];// 從頭到尾都是等速[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];// 從開始時慢慢加速[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];// 到結束前慢慢減速[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];// 開始時慢慢加速,結束前慢慢減速
  88. 88. 作業練習⽐比較 InsertSubview 和 AddSubview
  89. 89. 多⾴頁⾯面處理之技巧
  90. 90. 多⾴頁⾯面處理的演進• 各⾃自為政 • ⼀一個 ViewController 控制全部的項⺫⽬目 • 各個 ViewController 控制各⾃自的 View• 建置更上層的控制器,管理各個 ViewController • UIToolbarController • UITabbarController • UINavigationController• 更複雜的 iPad • UISplitViewController • UIPopViewController
  91. 91. Navigation Controller
  92. 92. Tab Bar + Navigation
  93. 93. presentatoin ViewController
  94. 94. Storyboard建⽴立多⾴頁⾯面關連的好⼯工具
  95. 95. 不⼀一定要弄成許多個 ViewController• UITableView Controller• UIPageView Controll• UIScrollView Controller• ......
  96. 96. ......

×