iOS - UISplitViewController

前言

	NS_CLASS_AVAILABLE_IOS(3_2) @interface UISplitViewController : UIViewController
	@available(iOS 3.2, *)		 public class UISplitViewController : UIViewController

• 大多數時候，iPhone、iPod 應用與 iPad 應用開發沒有太大的區別，但是 iPad 的屏幕比 iPhone 大，設計程序時可以充分利用 iPad 的大屏幕特點，例如 TabBar 和 Navigation 的使用會減少，相應的會采用新的一種 ViewController 來代替，那就是 UISplitViewController，這個控件是 iPad 專用的視圖控制器。使用 SplitViewController 導航時，橫屏情況下，左邊顯示一個導航表，點擊導航項時右邊顯示對應的詳情。橫屏情況下顯示方式會有所不同，默認只顯示詳情面板，原來左側的導航列表會通過浮動窗口隱藏，需要從邊緣向內側拖動來顯示。

• 在 iPhone 應用中，使用導航控制器由上一層界面進入下一層界面，在下一層界面處理完成后，用戶可以非常方便的返回上一層界面。這種方式在 iPhone 應用里非常方便，因為小屏幕通常只能顯示一個界面，但對於 iPad 來說，那么大的屏幕只顯示一個列表會顯得不太好看，同時用戶操作也不方便，所以在 iPad 中，通常使用 SplitViewController 來實現導航。iPhone 和 iPad 的系統設置就是典型的按設備區別界面的應用。

  • self.splitViewController.viewControllers[0] // 表示 Master 頁
  • self.splitViewController.viewControllers[1] // 表示 Detail 頁

1、splitViewController 的創建

• Objective-C

  	// 初始化分割視圖控制器
  	UISplitViewController *splitViewController = [[UISplitViewController alloc] init];
  
  	// 設置分割面板的 2 個視圖控制器            
  	splitViewController.viewControllers = @[navigationController, detailViewController];
  
    	// 添加到窗口  
  	[self addChildViewController:splitViewController];
  	[self.view addSubview:splitViewController.view];
  
  	// 做為 window 的根視圖控制器
  	self.window.rootViewController = splitViewController;
  

• Swift

  	// 初始化分割視圖控制器
  	let splitViewController = UISplitViewController()
  
  	// 設置分割面板的 2 個視圖控制器
  	splitViewController.viewControllers = [navigationController, detailViewController]
  
  	// 添加到窗口
  	self.addChildViewController(splitViewController)
  	self.view.addSubview(splitViewController.view)
  
  	// 做為 window 的根視圖控制器
  	self.window.rootViewController = splitViewController
  

2、判斷設備類型

• Objective-C

  	// 初始化列表和詳情面板
  
  		// 初始化列表面板，可以為表格視圖控制器
      	MasterViewController *masterViewController = [[MasterViewController alloc] init];
      	
      	// 初始化詳情面板
      	DetailViewController *detailViewController = [[DetailViewController alloc] init];
  
  		// 用導航包裝列表面板，顯示導航條，如果是分割面板也不影響功能
      	UINavigationController *navigationController = [[UINavigationController alloc] 
      	                                              initWithRootViewController:masterViewController];
  
  	// 根據設備類型創建分割視圖控制器
  	/*
  		UIUserInterfaceIdiomUnspecified = -1,
  		UIUserInterfaceIdiomPhone     NS_ENUM_AVAILABLE_IOS(3_2),   // iPhone and iPod touch style UI
  		UIUserInterfaceIdiomPad       NS_ENUM_AVAILABLE_IOS(3_2),   // iPad style UI
  		UIUserInterfaceIdiomTV        NS_ENUM_AVAILABLE_IOS(9_0),   // Apple TV style UI
  		UIUserInterfaceIdiomCarPlay   NS_ENUM_AVAILABLE_IOS(9_0),   // CarPlay style UI
  	*/
  		
  		// 如果是 iPhone 或 iPod 則只顯示列表頁，如果是 iPad 則顯示分割面板
      	if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone) {
  
          	// 添加到窗口
          	[self addChildViewController:navigationController];
          	[self.view addSubview:navigationController.view];
      	}
      	else {
          
          	// 初始化分割視圖控制器
          	UISplitViewController *splitViewController = [[UISplitViewController alloc] init];
          
          	// 設置分割面板的 2 個視圖控制器
          	splitViewController.viewControllers = @[navigationController, detailViewController];
          
          	// 添加到窗口
          	[self addChildViewController:splitViewController];
          	[self.view addSubview:splitViewController.view];
  
  			// 做為 window 的根視圖控制器
  			self.window.rootViewController = splitViewController;
      	}
  	
  	// 表格點擊
  
      	- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
          
          	// 調用 DetailViewController 的方法更新詳細頁
          	[self.splitViewController.viewControllers[1] loadDetailViewController:[dataArray 
          	                                                            objectAtIndex:indexPath.row]];
          
          	// 如果是 iPhone、iPod 則導航到詳情，跳轉到 detailViewController，取消選中狀態
          	if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone) {
              
              	[tableView deselectRowAtIndexPath:indexPath animated:YES];
              
              	[self.navigationController pushViewController:self.splitViewController.viewControllers[1] 
              	                                     animated:YES];
          	}
      	}
  

• Swift

  	// 初始化列表和詳情面板
  	
  		// 初始化列表面板，可以為表格視圖控制器
      	let masterViewController = MasterViewController()
      	
      	// 初始化詳情面板
      	let detailViewController = DetailViewController()
  
  		// 用導航包裝列表面板，顯示導航條，如果是分割面板也不影響功能
      	let navigationController = UINavigationController(rootViewController: masterViewController)
  
  	// 根據設備類型創建分割視圖控制器
  	/*
  		case Unspecified
  		case Phone    @available(iOS 3.2, *)  // iPhone and iPod touch style UI
  		case Pad      @available(iOS 3.2, *)  // iPad style UI
  		case TV       @available(iOS 9.0, *)  // Apple TV style UI
  		case CarPlay  @available(iOS 9.0, *)  // CarPlay style UI
  	*/
  	
  		// 如果是 iPhone 或 iPod 則只顯示列表頁，如果是 iPad 則顯示分割面板
  		if UIDevice.currentDevice().userInterfaceIdiom == .Phone {
  
          	// 添加到窗口
          	self.addChildViewController(navigationController)
          	self.view.addSubview(navigationController.view)
      	}
      	else {
          
          	// 初始化分割視圖控制器
          	let splitViewController = UISplitViewController()
          
          	// 設置分割面板的 2 個視圖控制器
          	splitViewController.viewControllers = [navigationController, detailViewController]
          
          	// 添加到窗口
          	self.addChildViewController(splitViewController)
          	self.view.addSubview(splitViewController.view)
  
  			// 做為 window 的根視圖控制器
  			self.window.rootViewController = splitViewController
      	}
  
  	// 表格點擊
  
      	func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
          
          	// 調用 DetailViewController 的方法更新詳細頁
          	(self.splitViewController?.viewControllers[1] as! DetailViewController)
          	                          .loadDetailViewController(dataArray[indexPath.row])
          
          	// 如果是 iPhone、iPod 則導航到詳情頁，跳轉到 detailViewController，取消選中狀態
          	if UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiom.Phone {
              
              	tableView.deselectRowAtIndexPath(indexPath, animated: true)
              
  				self.navigationController?
  				    .pushViewController((self.splitViewController?
  				    				            .viewControllers[1] as! DetailViewController), 
  				    			  animated: true)
          	}
      	}
  

3、Storyboard 中設置

• 在 Storyboard 場景中設置

  • 在 Storyboard 場景綁定的 Controller 中設置

    	// 獲取 Master 頁
    	self.splitViewController.viewControllers[0]
    
    	// 獲取 Detail 頁
    	self.splitViewController.viewControllers[1]