//分栏视图

分栏视图( Split View)是一种用户可拖动改变大小的区域分隔视图控件,有左右和上下两种风格,其对应的类是NSSplit View。中间可拖动的分隔线有3种不同宽度的样式可以选择。每个独立的区域还可以继续分隔,实现嵌套组合的复杂视图。

SplitView类的重要属性和方法说明如下。

1>vertical I属性:控制NSSplit View的中间分隔区的方向,水平或垂直。

2>setPostion方法:控制分隔区在NSSplitView中的位置, position.为x方向或y方向的左

边偏移。

3>dividerIndex:表示第几个分格区,如果只有两个分隔区域的话,此参数为0

4>dividerThickness方法:分隔区的大小、宽度或高度(根据vertical类型)。

sItion

方法用来设置分隔区位置

func setPosition( position: CGFloat, ofDividerAt dividerIndex: Int)

用代码创建分栏视图

用代码创建分栏视图的基本步骤如下。

(1)设置中间分隔线的方向和样式。

(2)创建左右两个空视图,添加到分栏视图。

(3)将分栏视图添加到主视图区。

具体代码如下:

funccreateSplistView() {

        letframeSplitView = CGRect(x: 200, y: 20, width: 200, height: 200)

        letsplitView = NSSplitView(frame: frameSplitView)

        //垂直方向

        splitView.isVertical = true

        //中间分割线的样式

        splitView.dividerStyle = .thin  //NSSplitView.DividerStyle.thin

        //左边视图

        letviewLeft = NSView()

        viewLeft.wantsLayer = true

        viewLeft.layer?.backgroundColor = NSColor.green.cgColor

        //右边视图

        letviewRight = NSView()

        viewRight.wantsLayer = true

        viewRight.layer?.backgroundColor = NSColor.magenta.cgColor

        //增加左右两个视图

        splitView.addSubview(viewLeft)

        splitView.addSubview(viewRight)

    }

自定义分栏视图样式风格

除了使用分栏视图的dividerStyle来设置不同显示外观以外,还可以使用自定义的子类来控

制分隔区divider视图的颜色,甚至直接绘制divider的样式外观。

(1)只修改divider的颜色。dividerColor是只读属性,通过NSSplit View子类重置divider Color

的颜色即可。

(2)重绘外观。通过分栏视图子类实现draw Divider方法即可。下面的代码重绘了divider,,

做了一个圆角矩形的图形,使用黄色填充,蓝色作为边框的颜色,效果如图432右边所示。

classSplistView: NSSplitView {

    /****

     只修改 divider的颜色。 dividerColor是只读属性,通过 NSSplit View子类重置 divider Color

     的颜色即可

     **/

    overridevardividerColor: NSColor{

        returnNSColor.red

    }

    /****

     重绘外观。通过分栏视图子类实现 drawDivider方法即可

     下面的代码重绘了 divider,做了一个圆角矩形的图形,使用黄色填充,蓝色作为边框的颜色

     **/

    overridefuncdrawDivider(in rect: NSRect) {

        letrectDivider = rect.insetBy(dx: 1, dy: 1)

        letpath = NSBezierPath(roundedRect: rectDivider, xRadius: 3, yRadius: 3)

        NSColor.blue.setStroke()

        path.stroke()

        NSColor.yellow.setFill()

        path.fill()

    }

}

分栏视图中的子视图控制

分栏视图的子视图行为通过 NSSplit View Delegate协议接口来实现控制。

(1)视图Size变化通知如下。

func splitviewwillResizeSubviews( notification: Notification

func splitviewDidResizeSubviews( notification: Notification)

(2)是否允许拉伸子视图。子视图默认是允许拉伸的,如果需要禁止某个子视图拉伸,则通过下面接口对相关的 subview返回 false禁止。

func splitview( splitview: NSSplitview, canCollapseSubview subview: NSView)->Bool

(3)调整各个子视图。当分栏视图大小发生变化时调用下面协议接口。可以在这个接口中调整各个子视图的大小,调整的原则是要满足子视图fame之和再加上分隔线 divider的fram等于分栏视图的 frame。

funcsplitView(_splitView: NSSplitView, resizeSubviewsWithOldSize oldSize: NSSize)

默认情况下调用分栏视图的 adjustSubviews来调整各个子视图的大小

(4)关闭子视图时是否允许隐藏分隔线divider，当通过拉伸某个子视图将其隐藏时,是否同时隐藏分隔线 divider

funcsplitView(_splitView: NSSplitView, shouldHideDividerAt dividerIndex: Int) -> Bool

(5)可拉伸的视图区间范围规定了通过分隔线 divider可以拉伸的视图区域范围。对于左边的垂直方向的分栏视图来说,分别可以通过下面两个协议方法约定向左边和向右边拉伸的范围,如Max和Min代表的距离。默认的Min为0，Max为分栏视图的宽度

当向左拖动分隔线时, divider与分栏视图左边距离小于Min时,左边子视图隐藏关闭,即divider自动移动到最左边;当向右拖动分隔线时, divider与分栏视图右边距离大于Max时,右边子视图隐藏关闭,即 divider自动移动到最右边。

下面为实现NSSplitViewDelegate的方法

//实现NSSplitViewDelegate协议方法实现分栏视图控制的例子

extensionViewController: NSSplitViewDelegate {

    //只允许左边视图拉伸移动

    funcsplitView(_splitView: NSSplitView, canCollapseSubview subview: NSView) -> Bool {

        ifsubview == splitView.subviews[0] {

            returntrue

        }

        returnfalse

    }

    //向左移动拉伸距离最小为30

    funcsplitView(_splitView: NSSplitView, constrainMinCoordinate proposedMinimumPosition: CGFloat, ofSubviewAt dividerIndex: Int) -> CGFloat {

        return30

    }

    //向右移动拉伸最大值为100

    funcsplitView(_splitView: NSSplitView, constrainMaxCoordinate proposedMaximumPosition: CGFloat, ofSubviewAt dividerIndex: Int) -> CGFloat {

        return100

    }

    //允许调整子视图

    funcsplitView(_splitView: NSSplitView, shouldAdjustSizeOfSubview view: NSView) -> Bool {

        returntrue

    }

    //调整子视图大小

    funcsplitView(_splitView: NSSplitView, resizeSubviewsWithOldSize oldSize: NSSize) {

    }

    //允许拉伸移动子视图最小化后隐藏分割线

    funcsplitView(_splitView: NSSplitView, shouldHideDividerAt dividerIndex: Int) -> Bool {

        returntrue

    }

    //视图Size变化的通知

    funcsplitViewDidResizeSubviews(_notification: Notification) {

    }

    funcsplitViewWillResizeSubviews(_notification: Notification) {

    }

}

分栏子视图的隐藏和显示

//leftViewWidth变量用来记忆关闭前分割线divider的位置

    varleftViewWidth: CGFloat = 0

    letsplitView: NSSplitView = {

        letframeSplitView = CGRect(x: 200, y: 20, width: 200, height: 200)

        letsplitView = NSSplitView(frame: frameSplitView)

        //垂直方向

        splitView.isVertical = true

        //中间分割线的样式

        splitView.dividerStyle = .thin  //NSSplitView.DividerStyle.thin

        //左边视图

        letviewLeft = NSView()

        viewLeft.wantsLayer = true

        viewLeft.layer?.backgroundColor = NSColor.green.cgColor

        //右边视图

        letviewRight = NSView()

        viewRight.wantsLayer = true

        viewRight.layer?.backgroundColor = NSColor.magenta.cgColor

        //增加左右两个视图

        splitView.addSubview(viewLeft)

        splitView.addSubview(viewRight)

        returnsplitView

    }()

    //添加一个按钮，此方法作为按钮的点击事件

    @objcfunctogglepanel(_sender: NSButton) {

        letsplitViewItem = splitView.arrangedSubviews

        //获取左边自视图

        letleftView = splitViewItem[0]

        //判断左边子视图是否已经隐藏

        ifsplitView.isSubviewCollapsed(leftView) {

            splitView.setPosition(leftViewWidth, ofDividerAt: 0)

            leftView.isHidden = false

        } else{

            leftViewWidth = leftView.frame.size.width

            splitView.setPosition(0, ofDividerAt: 0)

            leftView.isHidden = true

        }

        splitView.adjustSubviews()

    }