iOS上的渐变边框标签视图

大家好，在这篇文章中，我将讨论我们在Dolap中使用的自定义组件。

用Swift编写的IBDesignable可自定义的渐变边框标签视图。

在多拉普（Dolap），我们为商人提供不同的类型。它们可以是设计师，二手店，精品店等。我们在商家徽标下方的产品详细信息中显示这些商家类型。

我们的设计师想要以凉爽的渐变边框标签显示它。您可以在我们的iOS应用的屏幕截图中看到它们。

这些商户类型将来会增加并有所变化。如果新的商人类型来自后端并且假设我们选择使用图像来表示这些类型怎么办？

然后，我们将需要针对每种新商家类型更新我们的应用。

为了防止更新，我们选择与自定义视图一起从后端获取其文本。

因此，我们需要创建我们的自定义标签YAY！

我喜欢在界面生成器中看到即时更新。我们的应用程序开发人员并非总是有机会创建自定义组件，因此此自定义标签是将IBInspectable属性与IBDesignable类一起使用并消除我们的编码技能的理想场所。

对于此组件，我们有一个swift文件，其中包含两个类和一个扩展名。一切都在大约完成。 200线。我将详细解释每种方法。但是首先您可以在下面看到我们文件的结构。

现在，让我们看一下列表中的最后4个项目并进行一些解释。

我们为String添加了两种方法来获取准确的高度和宽度值。根据给定的高度或宽度，我们可以计算高度和宽度。该方法将在CenteredTextLayer和configure()方法中使用。

CATextLayer简单子类，可帮助我们在水平和垂直方向上居中放置文本。对齐方式仅注意水平对齐。通过重写draw()方法，我们可以计算给定字符串的高度，并根据计算出的y轴差来定位标签。

实际上，初始化方法非常简单。我们只是调用configure()方法来准备视图。

这里要考虑的一个技巧是：覆盖prepareForInterfaceBuilder()以立即查看情节prepareForInterfaceBuilder()上的更改。

现在，我们正在发生真正的事情。您可以从下图看到我们正在尝试做的事情。

结果，我们有了一个标签；

最后，我们将此蒙版渐变图层添加到以所需颜色作为子图层创建的背景视图中。最后，我们得到标签。

您可以在下面看到完整的configure()方法。这里要考虑的一个技巧是将文本放置在中心并遵循自动布局更改，我们必须计算字体大小。如果文本的高度超过视图框架，我们将迭代递减它，直到它适合框架。

您可以从我的GitHub页面上查看完整的源代码。

mkeremkeskin / GradientBorderedLabelView

GradientBorderedLabelView也可以通过CocoaPods获得。

感谢您阅读本文。
如果愿意，请随时发表评论并分享。
再见！ 👋🏻