分割视图控制器

17 Mar 2025 | 6 分钟阅读

在iOS应用程序中，有时需要将屏幕分成两个部分，并在每一侧显示一个视图控制器，以显示应用程序内容。在本教程的这一部分中，我们将讨论分割视图控制器，它是iOS应用程序的重要组成部分。

分割视图控制器是一个容器视图控制器，通过将屏幕分成两个部分来管理主-从界面，以便用户可以与主界面交互以在详细视图控制器中获取详细信息。例如，IPad中的设置应用程序显示在主-从界面中，如下图所示。

分割视图控制器是UISplitViewController的一个实例，它继承自UIViewController。

分割视图控制器在主-从界面中管理两个子视图控制器。主视图控制器的更改会驱动详细视图控制器的更改。自iOS 8起，此类适用于所有iOS设备。在以前的版本中，它仅适用于iPad。

将分割视图控制器添加到界面

要将分割视图控制器添加到界面，我们需要在对象库中搜索它，并将结果拖到故事板。

我们需要将分割视图控制器设置为我们正在构建的iOS应用程序中的根视图控制器。它在应用程序中没有明显的视觉外观，因为它只管理子视图控制器，而这些子视图控制器会显示给用户。

配置分割视图控制器的外观

我们可以设置分割视图控制器的显示模式来配置其视觉外观。可以设置UISplitViewController的preferredDisplayMode属性来配置显示模式。下表给出了显示模式的可能值。

众数	描述
并排显示	在此模式下，两个子视图控制器同时显示在屏幕上，其中主视图控制器显示在屏幕的左侧窗格上，详细视图控制器显示在右侧窗格上。主视图控制器通常比详细视图控制器窄。我们可以使用preferredPrimaryColumnWidthFraction属性调整主视图控制器的宽度。此模式由UISplitViewController.DisplayMode.allVisible常量表示。
隐藏	在此模式下，主（主要）视图控制器被隐藏并变为屏幕外，而详细视图控制器变为屏幕上。要显示主视图控制器，我们必须以模态方式显示它或更改显示模式。此模式由UISplitViewController.DisplayMode.primarryHidden常量表示。
覆盖	在此模式下，主视图控制器分层在详细视图控制器的顶部。在此模式下，主视图控制器会遮盖辅助视图控制器。此模式由UISplitViewController.DisplayMode.primaryOverlay常量表示。

由于空间限制，分割视图控制器可能不遵循显示模式。在紧凑的水平环境中，分割视图控制器无法并排显示子视图控制器。

UISplitViewController属性

UISplitViewController类包含以下属性，用于自定义分割视图行为并管理子视图控制器。

序号	属性	描述
1	var delegate: UISplitViewControllerDelegate?	它表示用于接收分割视图控制器消息的委托。
2	protocol UISplitViewControllerDelegate	协议UISplitViewControllerDelegate包含在对分割视图界面进行更改时通知的方法。
3	var viewControllers: [UIViewController]	它是接收器管理的视图控制器的数组。
4	var presentsWithGesture: Bool	它是一个布尔类型的值，用于确定是否可以使用滑动姿势显示隐藏的视图控制器。
5	var preferredDisplayMode: UISplitViewController.DisplayMode	它是界面的首选显示模式。
6	var displayMode: UISplitViewController.DisplayMode	它表示分割视图控制器内容的当前排列方式。
7	var displayModeButtonItem: UIBarButtonItem	它表示更改界面显示模式的按钮。
8	var primaryEdge: UISplitViewController.PrimaryEdge	它表示主视图控制器保留在哪一侧。
9	var isCollapsed: Bool	它是一个布尔值，指示是否显示其中一个子视图控制器。
10	var preferredPrimaryColumnWidthFraction: CGFloat	它表示主视图控制器的相对宽度。
11	var primaryColumnWidth: CGFloat	它表示主视图控制器的宽度（以磅为单位）。
12	var minimumPrimaryColumnWidth: CGFloat	它表示主视图控制器所需的最小宽度（以磅为单位）。
13	var maximumPrimaryColumnWidth: CGFloat	它表示主视图控制器所需的最大宽度。

UISplitViewController方法

UISplitViewController类包含以下操作方法来显示子视图控制器。

序号	方法	描述
1	func showDetailViewController(UIViewController, sender: Any?)	它显示分割视图界面的详细视图控制器。
2	func show(UIViewController, sender: Any?)	它显示分割视图界面的主视图控制器。

示例

在本示例中，我们将创建一个实现主-从界面的iOS应用程序。

界面生成器

要为项目创建界面生成器，首先，我们需要将分割视图控制器添加到故事板。为此，请搜索分割视图控制器并将结果拖到故事板。这会将分割视图控制器添加到界面生成器，如下图所示。

上图包含一个主视图控制器（即表视图控制器）和一个用于实现详细视图控制器的UIViewController。表视图控制器将显示记录列表，其中每条记录的详细信息显示在详细视图控制器上。

首先，将分割视图控制器作为初始视图控制器。让我们开始设计故事板。首先，我们将通过添加标签来设计原型表视图单元格。我们还将为单元格内容视图中的标签定义自动布局规则，如下图所示。

现在，我们将设计详细视图控制器。我们将标签添加到详细视图控制器以显示内容。我们还将为详细视图控制器中的标签定义自动布局规则，如下图所示。

现在，我们将创建UITableViewController的子类并将其分配给主视图控制器。我们还将创建UITableViewCell的子类并将其分配给表视图单元格。在TableViewCell中为单元格内容标签创建连接出口。此外，创建UIViewController的子类以表示详细视图控制器并连接此标签中的出口。

TableViewCell.swift

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var cellTitleLbl: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var titleLbl: UILabel!
    var text = ""
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        titleLbl.text = text
        
    }

}

TableViewController.swift

import UIKit


class TableViewController: UITableViewController {


    var dataArr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        for i in 1..<11{
            dataArr.append("Row "+i.description)
        }
    }


    // MARK: - Table view data source


    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }


    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArr.count
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
        cell.cellTitleLbl.text = dataArr[indexPath.row]
        return cell
    }
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let vc = storyboard.instantiateViewController(identifier: "ViewController") as! ViewController
        vc.text = dataArr[indexPath.row] + " Data"
        splitViewController?.showDetailViewController(vc, sender: nil)
    }
}

输出