关注我们

Swift - Split View Controller

在iOS应用程序中，要求将屏幕分为两部分，并在每侧显示一个视图控制器以显示应用程序内容。在本教程的这一部分中，无涯教程将讨论Split View Controller，它是iOS应用程序的重要组成部分。

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

拆分视图控制器是UISplitViewController的实例，该实例继承了UIViewController。

class UISplitViewController : UIViewController

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

添加SplitViewController

要将Split View Controller添加到界面，无涯教程需要在对象库中搜索它，并将结果拖到Storyboard。

无涯教程需要将拆分视图控制器作为无涯教程正在构建的iOS应用程序中的根视图控制器。它在应用程序中没有明显的视觉样式，因为它仅管理显示给用户的子视图控制器。

配置SplitViewController

无涯教程可以设置拆分视图控制器的显示模式以配置其视觉样式。可以设置UISplitViewController的preferredDisplayMode属性来配置显示模式。下表给出了显示模式的可能值。

模式	描述
Side-by-Side	在此模式下，两个子视图控制器同时显示在屏幕上，而主视图控制器显示在屏幕的左窗格中，而详细视图控制器显示在右窗格中。无涯教程可以通过使用preferredPrimaryColumnWidthFraction属性来调整主视图控制器的宽度。此模式由UISplitViewController.DisplayMode.allVisible常量表示。
Hidden	在这种模式下，主视图控制器被隐藏并变为屏幕外，而详细视图控制器变为在屏幕上。要显示主视图控制器，无涯教程必须以模态显示它或更改显示模式。此模式由UISplitViewController.DisplayMode.primarryHidden常数表示。
Overlay	在这种模式下，主视图控制器位于细节视图控制器的顶部。在这种模式下，主视图控制器会模糊辅助视图控制器。此模式由UISplitViewController.DisplayMode.primaryOverlay常量表示。

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

SplitViewController属性

UISPLITVIEWController类包含以下属性以自定义拆分视图行为并管理子视图控制器。

SN	Property	Description
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	表示主视图控制器所需的最大宽度。

SplitViewController方法

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

SN	Method	Description
1	func showDetailViewController(UIViewController, sender: Any?)	显示视图详情。
2	func show(UIViewController, sender: Any?)	显示主视图控制器。

例子

在此示例中，无涯教程将创建一个实现主详细信息界面的IOS应用程序。

要为项目创建接口构建器，请先，无涯教程需要将拆分视图控制器添加到Storyboard。为此目的，搜索拆分视图控制器并将结果拖动到Storyboard。这将使拆分视图控制器添加到接口构建器，如下图所示。

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

链接：https://www.learnfk.comhttps://www.learnfk.com/ios/ios-split-view-controller.html

来源：LearnFk无涯教程网

首先，将拆分视图控制器设置为初始视图控制器。让无涯教程开始设计storyboard。首先，无涯教程将通过添加标签来设计原型表视图单元。无涯教程还将在单元的内容视图内为标签定义自动布局规则，如下图所示。

现在，无涯教程将设计详细视图控制器。无涯教程将标签添加到详细视图控制器以显示内容。无涯教程还将在详细信息视图控制器中定义标签的自动布局规则。

无涯教程网

现在，无涯教程将创建UITableViewController的子类并将其分配给主视图控制器。无涯教程还将创建UITableViewCell的子类，并将其分配给表视图单元格。在TableViewCell中为单元格内容标签创建连接出口。另外，创建UIViewController的子类以表示Detail View Controller，并在其中连接标签的出口。

TableViewCell.swift

复制代码

import UIKit


class TableViewCell: UITableViewCell {


    @IBOutlet weak var cellTitleLbl: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
       //初始化代码
    }


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


       //为选定状态配置视图
    }


}

ViewController.swift

复制代码

import UIKit


class ViewController: UIViewController {


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


       //加载视图后进行任何其他设置。
        titleLbl.text = text
        
    }


}

TableViewController.swift

复制代码

import UIKit


class TableViewController: UITableViewController {


    var dataArr = Array()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        for i in 1.. 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)
    }
}