tf gradients_使用GRADIENTS为它着色— iOS

tf gradients

保持冷静并打造自己的颜色🍭

我很长时间以来一直在与iOS进行安静的合作，并相信我，必须建立一个美观的视觉界面才能使应用程序被更多的受众所接受。 良好的设计，颜色和概念，在构建出色的UI时至关重要。

渐变是为色彩增添活力的事物之一。 纯色还是渐变色？ 让我们看看哪个更引人注目。

当然是第二个。 是不是 混合两种颜色比单一颜色更具吸引力。

在本文中，我们将讨论如何在我们自己的应用程序中实现该功能。 相信我，这就像看起来一样容易。 “更多颜色而不是单一颜色”。 所以，让我们开始吧。

我们需要知道的事情

核心动画框架 -渲染，合成和动画化视觉元素。

iOS中的每个视图都有一个与之关联的图层，该图层可处理该视图的所有绘图和动画。 可以使用其layer属性（ CALayer的对象）访问视图的图层。

CALayer（CALayer） —管理基于图像的内容并允许您对该内容执行动画的对象。

图层的主要工作是管理您提供的视觉内容，但是图层本身具有可以设置的视觉属性，例如背景颜色，边框和阴影。

CAGradientLayer —一层在其背景颜色上绘制颜色渐变的图层，填充了图层的形状（包括圆角）。

您可以使用渐变层创建包含任意数量颜色的颜色渐变。 默认情况下，颜色均匀分布在整个图层上，但是您可以选择指定位置来控制渐变中的颜色位置。

让我们看看CAGradientLayer可以为我们提供什么。

1. colors -进行渐变所需的颜色。 它是CGColorRef对象的数组，即，您必须提供CGColor ，而不仅仅是UIColor的对象。 示例 ： [UIColor.red.cgColor, UIColor.blue.cgColor]
2. startPoint —渐变的起点。
3. endPoint —渐变的终点。
4. locations — NSNumber对象的可选数组，用于定义每个渐变色NSNumber位置。

您可以在此处参考完整的文档。

编码

好了，既然我们知道渐变所需的一切，那么现在开始工作只是时间问题。

首先，让我们看看如何获​​得可用于视图layer的渐变。

大..！！！ 我们现在有一个渐变。 可是等等..！！！ 为什么不起作用🤔？ 刷新刷新刷新！ noooo ..仍然无法正常工作🤯。

Aahhhh .. !!! 我们忘记了一件小事。 仅凭梯度还不够。 我们还必须将其应用于我们所需的视图。 对我们来说真是太傻了 好吧，这就是我们可以将渐变应用于视图的方法。

view.layer.addSublayer(gradientLayer)

在这里，视图可以是UIView ， UIButton ， UILabel等任何元素。您可以以相同的方式将渐变应用于每个视图。 将渐变应用于UICollectionViewCell就像将其应用于其他元素一样简单。 CAGradientLayer被添加为视图层的sub-layer层。 就是这么简单 是不是

而已。 这就是我们在屏幕上获得漂亮渐变的全部功能。

好的..！！！ 现在我们知道如何使它工作，我心中有一个疑问。 这纯粹是UI的事情，对吧？ 我们不能在Storyboard本身中获得它吗？ 尽管代码不是很多，但是为什么每次需要渐变时都编写它呢？ 为什么不更改情节提要的attribute inspector本身🤔中的某些属性？ 如果我们也能做到的话，将会很容易。

看起来我们要求越来越高？ 😉哈哈。 好吧，我知道痛苦。 与在代码中进行更改相比，在storyboard更改属性的满意度要高得多。 然后我们去..🙂

在情节提要本身中获取它.. !!!✌️

我们可以使用@IBDesignable和@IBInspectable来实现这一目标。

使用IBInspectable和IBDesignable ，可以构建用于配置自定义控件的自定义界面，并在设计项目时实时呈现它们。

您可以在此处了解更多信息。

在情节DesignableView的Class Inspector中将自定义视图类设置为DesignableView 。 这就是它出现在情节提要中的“ Attributes Inspector中的方式。

对于一个好的UI，必须了解它的外观。 一次又一次地编码相同的东西以获得完美的外观更加累赘。 这是情节提要的最大优点之一，实际上这就是情节提要的目的。 外观最终结果。

而已。 编写一次代码，即可在任何需要的地方使用。 没有多余的代码，什么都没有。 添加要在渐变中显示的尽可能多的颜色。 继续尝试一下。 🤠

样例项目

您可以从此处下载示例项目。

促销活动

不要忘记阅读我的其他文章：

1. Swift 4中有关Codable的一切
2. 您一直想了解的有关iOS中通知的所有信息
3. iOS 11编码：如何拖放到集合和表格中
4. 您需要了解有关iOS 10中的Today Extensions（Widget）的所有信息
5. UICollectionViewCell选择变得简单.. !!

如有任何疑问，请随时发表评论。

翻译自: https://hackernoon.com/color-it-with-gradients-ios-a4b374c3c79f

tf gradients