iOS上的渐变边框标签视图

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

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

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

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

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

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

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

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

---

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

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

• IBDesignable变量使您有机会即时编辑视图。 这些将在情节提要板上可用，并且会立即看到更改值的效果。
• 私有变量是在配置视图时使用的属性。
• 字符串扩展
• CenteredTextLayer
• 初始化方法
• 配置 方法

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

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

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

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

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

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

• 我们将准备一个带有给定字体或默认字体的带有圆角，边框和透明背景的文本层。
• 将创建具有所需颜色集的渐变层。
• 此文本层将遮盖渐变层。

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

• 具有渐变颜色边框
• 有圆角
• 具有透明背景
• 文字带有渐变颜色

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

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

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

mkeremkeskin / GradientBorderedLabelView

具有可自定义渐变属性的IBDesignable标签– mkeremkeskin / GradientBorderedLabelView

github.com

GradientBorderedLabelView也可以通过CocoaPods获得。

GradientBorderedLabelView

具有可自定义渐变属性的IBDesignable标签

cocoapods.org

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