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]