synth-ios 1.0.0

synth-ios 1.0.0

CRED 维护。



synth-ios 1.0.0

  • 作者
  • Prashant

Synth

Synth 是 CRED 为在应用中使用神经形态组件而内置的库。

神经形态到底是什么?它是一种意象风格,通过操纵光、影和深度来创造一种受物理世界启发的数字体验。这就是它的定义。我们的建议是您亲自尝试一下,看看您对它的看法。如果您用 Synth 创建了什么,告诉我们。我们很期待看到您如何使用它。

给好奇心旺盛的人的一个注释:如果您想了解更多关于 Synth 的信息,我们有一篇文章详细介绍了这个概念以及 CRED 背后的理念 这里

Banner

安装

它可以轻松地与 Cocoapods 集成。将以下行添加到您的 podfile

pod 'synth-ios'

需求

  • iOS 11.0+
  • Swift 5.1+

使用

浮雕和凹雕视图

Embossed and Debossed Views

作为对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

凸软按钮

Elevated Soft Button

let softButton = UIButton()
softButton.applyNeuBtnStyle(type: .elevatedSoft, title: "Idle")

凸软圆形按钮

Elevated soft round Button

let roundButton = UIButton()
roundButton.applyNeuBtnStyle(type: .elevatedSoftRound, image: UIImage(named: "plus"))

凸平面按钮

Elevated Flat Button

凸平面按钮在凸起的拟态平台上渲染出平面表面。这个平面表面可以以两种方式进行自定义

let flatButton = UIButton()
flatButton.applyNeuBtnStyle(type: .elevatedFlat, title: "Idle")

Drawable Button

你也可以在这张图片左侧添加一个图像。合成本地将渲染一个拟态坑,图像将在这个坑中渲染。

softButton.applyNeuBtnStyle(type: .elevatedSoft, title: "Idle", image: UIImage(named: "plus"), imageDimension: 12)
softButton.applyNeuBtnStyle(type: .elevatedFlat, title: "Idle", image: UIImage(named: "plus"), imageDimension: 12)

这个按钮由三层组成:从下到上分别命名为 baseModelinnerModelbuttonContentModelNeuButtonCustomModel 允许你配置这些层并设计按钮。

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.