在Swift中使用IBInspectables

具有可自定义细分的简单进度栏

我已经看到了很多进度条小部件，所以我决定尝试通过Interface Builder进行自定义的“ SegmentedProgressBar”。 要继续或快速将此视图添加到您自己的项目中，请在GitHub上获取它。

在深入研究代码之前，我先介绍了两个主要功能：

1）自定义细分

段应该是完全可自定义的，包括宽度，高度，背景颜色，borderWidth，borderRadius，borderColor。 同样，分隔线段的线也应可自定义：线高，线宽（线段之间的距离），线色。

2）IBDesignables

IBDesignables允许Interface Builder实时呈现自定义视图的UI更改。 与IBInspectables结合使用，用户可以编辑特定的运行时变量并立即查看结果，从而节省了大量的开发时间。

入门

首先，我们需要建立一个支持IBDesignables的自定义类。 @IBDesignable标记使Interface Builder知道该类应自动呈现。

如您所见，所有定义为IBInspectable变量的属性在属性检查器中都是可见的。 现在建立我们的第一部分！ 我将重写视图的onDraw()函数，以实时呈现对该类所做的所有UI更改。 每个段和线的所有自定义绘制逻辑都将在此函数内发生。

在这里，我创建了一个名为’segment1’的新UIView，该视图以父级居中居中，其宽度，高度和颜色取自可检查变量。 编辑这些变量中的任何一个都应实时更改“ segment1”的形状和颜色。 注意：如果Interface Builder似乎没有呈现任何更改，则可能必须在编辑器菜单中启用“自动刷新视图”。

建立进度条

现在我们有了第一段，但是还需要两个元素：第二段以及它们之间的连接线。

此时， draw()函数变得越来越庞大。 让我们draw()重构为drawLine()和drawSegments() ，然后制作一些实例变量来跟踪我们的视图。 我们将创建两个UIView列表，一个用于段，一个用于线，以便以后可以与每个元素进行交互。

现在添加buildOddSegments()函数。 大多数逻辑已在drawLine()和drawSegment() ，因此此实现应与buildEvenSegments()相当相似。

太好了，现在我们可以为任意数量的细分提供工作进度条！ 一切看起来都不错，只是许多部分都被绘制在了线后。 让我们添加一个快速功能，在构建完所有线之后更新线段的z轴。

现在我们可以从界面构建器手动更新selectedIndex ，让我们创建一些函数以使开发人员能够以编程方式执行此操作。

最终波兰语

进度栏确实开始融合在一起，但是我们需要在其完全完成之前添加一些自定义选项。 开发人员应该能够编辑线段的cornerRadius ， borderWidth和borderColor 。 此外，如果开发人员希望使所有线段都为圆形而无需计算特定的拐角半径，则应添加一个circularSegment选项。

首先让我们为cornerRadius ， borderWidth ， borderColor和cornerRadius添加一些新的可检查变量。

为了使线段完美地呈圆形，其宽度和高度必须相等。 在这里，我使用didSet{}来确保segmentWidth == segmentHeight然后再启用segmentWidth == segmentHeight 。

接下来，创建一个函数以自定义每个绘制的线段。

非常简单的功能。 如果circularSegments为true，则将角半径设置为线段高度的一半，否则将使用cornerRadius值。