Synth
Synth 是 CRED 为在应用中使用神经形态组件而内置的库。
神经形态到底是什么?它是一种意象风格,通过操纵光、影和深度来创造一种受物理世界启发的数字体验。这就是它的定义。我们的建议是您亲自尝试一下,看看您对它的看法。如果您用 Synth 创建了什么,告诉我们。我们很期待看到您如何使用它。
给好奇心旺盛的人的一个注释:如果您想了解更多关于 Synth 的信息,我们有一篇文章详细介绍了这个概念以及 CRED 背后的理念 这里。
安装
它可以轻松地与 Cocoapods 集成。将以下行添加到您的 podfile
pod 'synth-ios'
需求
- iOS 11.0+
- Swift 5.1+
使用
浮雕和凹雕视图
作为对UIView
的扩展,你可以在任何UI元素上调用它。
let embossedView = UIView()
embossedView.applyNeuStyle()
在任意视图上调用applyNeuStyle
将赋予默认的浮雕效果。在NeuUIHelper
中也有一个辅助函数getDebossModel()
,它提供了凹雕效果。
let debossedView = UIView()
debossedView.applyNeuStyle(model: NeuUIHelper.getDebossModel())
applyNeuStyle
参数
属性 | 描述 | 值 |
---|---|---|
模型 |
一个结构体,允许配置基础颜色、阴影方向和阴影偏移 | NeuViewModel |
仅显示阴影 |
启用此选项将仅渲染外部或内部阴影,跳过实心背景部分 | 布尔值 |
NeuViewModel
属性
所有颜色默认都由基础颜色派生。当需要时,可以显式传递不同的值。
属性 | 描述 | 值 |
---|---|---|
baseColor |
基于此渲染背景和边框的基础颜色 | UIColor |
bgGradientColors |
一个渲染背景的颜色数组 | [UIColor] |
borderGradientColors |
一个渲染边框的颜色数组 | [UIColor] |
borderGradientWidth |
外部边框宽度 | CGFloat |
lightDirection |
一个枚举,用来定义光线方向 | NeuLightDirection |
shadowType |
一个枚举,用来定义阴影类型,外部或内部 | NeuShadowType |
lightShadowModel |
一个用于自定义顶部阴影偏移的模型 | NeuShadowModel |
darkShadowModel |
一个用于自定义底部阴影偏移的模型 | NeuShadowModel |
blurAmount |
要应用的高斯模糊量 | CGFloat |
hideLightShadow |
隐藏顶部阴影 | 布尔值 |
隐藏底部阴影 |
hideDarkShadow | 布尔值 |
hideBorder |
隐藏外部边框 | 布尔值 |
按钮
默认有四种样式可以应用于UIButton
。
elevatedSoft // an embossed button
elevatedSoftRound // a round embossed button
elevatedFlat // flat button
elevatedFlatRound // flat round button
凸软按钮
let softButton = UIButton()
softButton.applyNeuBtnStyle(type: .elevatedSoft, title: "Idle")
凸软圆形按钮
let roundButton = UIButton()
roundButton.applyNeuBtnStyle(type: .elevatedSoftRound, image: UIImage(named: "plus"))
凸平面按钮
凸平面按钮在凸起的拟态平台上渲染出平面表面。这个平面表面可以以两种方式进行自定义
let flatButton = UIButton()
flatButton.applyNeuBtnStyle(type: .elevatedFlat, title: "Idle")
你也可以在这张图片左侧添加一个图像。合成本地将渲染一个拟态坑,图像将在这个坑中渲染。
softButton.applyNeuBtnStyle(type: .elevatedSoft, title: "Idle", image: UIImage(named: "plus"), imageDimension: 12)
softButton.applyNeuBtnStyle(type: .elevatedFlat, title: "Idle", image: UIImage(named: "plus"), imageDimension: 12)
这个按钮由三层组成:从下到上分别命名为 baseModel
、innerModel
和 buttonContentModel
。NeuButtonCustomModel
允许你配置这些层并设计按钮。
let model = NeuConstants.NeuButtonCustomModel()
... some configuration
let customButton = UIButton()
customButton.applyNeuBtnStyle(customModel: model, title: "Custom Button")
这个库基于基础颜色概念,从基础颜色本身衍生出亮色和暗色。所有视图和按钮都将使用此颜色来设计拟态元素。基础颜色可以在应用程序启动时设置。同样,可以在应用程序级别应用文本属性,以给所有拟态按钮提供默认样式。
NeuUtils.baseColor = UIColor.red
let textAttributes: [NSAttributedString.Key:Any] = [:]
textAttributes[.foregroundColor] = .black
NeuUtils.textAttributes = textAttributes
贡献
拉取请求受到欢迎!我们很高兴帮助改进这个库。请随意浏览开放的问题,寻找需要工作的东西。如果你有一个特性请求或错误报告,请打开一个新的问题,这样我们可以追踪它。
贡献者
如果没有CRED的设计和前端团队的贡献,合成本将不会成为可能。
许可协议
Copyright 2020 Dreamplug Technologies Private Limited.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://apache.ac.cn/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.