前言

NS_CLASS_AVAILABLE_IOS(3_2) @interface UISplitViewController : UIViewController
    @available(iOS 3.2, *)       public class UISplitViewController : UIViewController
    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;
    // 初始化分割视图控制器
    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
    // 初始化分割视图控制器
    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];
            }
        }
    // 初始化列表和详情面板

        // 初始化列表面板,可以为表格视图控制器
        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)
            }
        }
    // 初始化列表和详情面板

        // 初始化列表面板,可以为表格视图控制器
        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]
    // 获取 Master 页
    self.splitViewController.viewControllers[0]

    // 获取 Detail 页
    self.splitViewController.viewControllers[1]