UIDesignManager
示例
要运行示例项目,请克隆仓库,然后先从Example目录运行pod install
。
要求
将UIDesignManager集成到任何使用UIKit或SwiftUI的Swift iOS应用程序中。您的应用运行首次后,您的初始配置将被保存并链接到我们的服务器。要管理和控制个别配置的UI组件属性,您需要从应用商店下载UIDesigner应用程序。
使用方法
为您的UI组件设置完整的参数。注意:不建议将此完整参数方法与颜色参数方法结合使用。
约束:在配置方法中程序化地设置约束。所有参数都可以通过UIDesigner iOS应用程序稍后进行更改。
注意:所有更新的UI参数都保存在设备上,这确保了平滑快速的渲染。
初始设置要求
# // AppDelegate.swift
UIDesignManager.set(passKey: "CHOOSE_YOUR_OWN_PASSKEY")
# You will need this to login into the UIDesigner app
SwiftUI
按钮初始化参数
import SwiftUI
import UIDesignManager
struct ContentView: View {
var body: some View {
HStack {
ZButton(name: "like_button", text: "Like", defaultBackgroundHex: "#FF0000", defaultForegroundHex: "#FFFFFF", cornerRadius: 25.0, SFIcon: "heart.fill", font: "Avenir-Black", fontSize: 15.0, width: 100.0, height: 50.0, action: self.like)
}
}
func like() {
print("liked")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
图片表示上述代码
视图初始化参数
import SwiftUI
import UIDesignManager
struct ContentView: View {
var body: some View {
HStack {
ZView(name: "red_circle", defaultBackgroundHex: "#FF0000", cornerRadius: 65, width: 130, height: 130)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
文本初始化参数
import SwiftUI
import UIDesignManager
struct ContentView: View {
var body: some View {
HStack {
ZText(name: "sample_text", text: "Hello World!", defaultBackgroundHex: "clear", defaultForegroundHex: "#FFFFFF", cornerRadius: 0, SFIcon: "", font: "Avenir-Light", fontSize: 25.0, width: 300.0, height: 50.0)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
UIKit
UIView 完全参数初始化设置
let customView = ZUIView()
self.view.addSubview(customView)
customView.configure(name: "home_background", source: self, sourceParent: self.view, left: 0.0, right: 0.0, top: 0.0, bottom: 0.0, fixedWidth: nil, fixedHeight: nil, centerX: false, centerY: false)
# This will act as a fallback configuration if switched to inactive in the UIDesigner app
UIImageView 完全参数初始化设置
let customImage = ZUIImageView()
self.view.addSubview(customImage)
customImage.configure(name: "home_image", source: self, sourceParent: self.view, left: 60.0, right: 60.0, top: nil, bottom: 110.0, fixedWidth: nil, fixedHeight: 150, centerX: false, centerY: false, fallbackImage: "YOUR_IMAGE")
# This will act as a fallback configuration if switched to inactive in the UIDesigner app
UITextView 完全参数初始化设置
let customTextView = ZUITextView()
customTextView.text = "This is a passage of text"
customTextView.isEditable = false
self.view.addSubview(customTextView)
customTextView.configure(name: "home_textview", source: self, sourceParent: self.view, left: 40, right: 40, top: 180, bottom: 40, fixedWidth: nil, fixedHeight: nil, centerX: false, centerY: false)
# This will act as a fallback configuration if switched to inactive in the UIDesigner app
UILabel 完全参数初始化设置
let customLabel = ZUILabel()
customLabel.text = "HEADER"
self.view.addSubview(customLabel)
customLabel.configure(name: "home_header", source: self, sourceParent: self.view, left: 40, right: 40, top: 40, bottom: nil, fixedWidth: nil, fixedHeight: 100.0, centerX: false, centerY: false)
# This will act as a fallback configuration if switched to inactive in the UIDesigner app
UIButton 完全参数初始化设置
let customButton = ZUIButton()
customButton.setTitle("HELLO", for: .normal)
self.view.addSubview(customButton)
customButton.configure(name: "home_button", source: self, sourceParent: self.view, left: 40, right: 40, top: nil, bottom: 40, fixedWidth: nil, fixedHeight: 50.0, centerX: false, centerY: false)
# This will act as a fallback configuration if switched to inactive in the UIDesigner app
色彩
仅设置 UI 组件的颜色参数。注意:不建议将此颜色方法与完全参数方法结合使用。
设置视图:使用您要配置的视图设置该属性
设置名称:使用键名设置该属性。注意:您可以在应用程序的多个部分中重复使用相同的名称。这将使客户端更改颜色变得更加容易。例如:“primary_color”可以用于控制所有 UIButton 和 UILabel 的颜色。
UIView设置颜色
let colorView = UIView(frame: view.bounds)
self.view.addSubview(colorView)
# UIView background color
setUIViewColor(name: "primary_color", source: self, initialColor: UIColor.red, view: colorView)
UILabel设置颜色
let lbl = UILabel(frame: view.bounds)
self.view.addSubview(lbl)
# UILabel background color
setUILabelBgColor(name: "std_label_bg_color", source: self, initialColor: UIColor.lightGray, view: lbl)
# UILabel text color
setUILabelTextColor(name: "std_label_text_color", source: self, initialColor: UIColor.white, view: lbl)
UIImageView设置颜色
let img = UIImageView(frame: view.bounds)
self.view.addSubview(img)
# UIImageView background color
setUIImageViewColor(name: "secondary_color", source: self, initialColor: UIColor.yellow, view: img)
UIButton设置颜色
let btn = UIButton(frame: view.bounds)
btn.setTitle("HELLO", for: .normal)
self.view.addSubview(btn)
# UIButton background color
setUIButtonBgColor(name: "secondary_color", source: self, initialColor: UIColor.lightGray, view: btn)
# UIButton title color
setUIButtonTitleColor(name: "std_btn_text_color", source: self, initialColor: UIColor.white, view: btn)
UITextView设置颜色
let textView = UITextView(frame: view.bounds)
self.view.addSubview(textView)
# UITextView background color
setUITextViewBgColor(name: "std_textview_bg_color", source: self, initialColor: UIColor.lightGray, view: textView)
# UITextView text color
setUITextViewTextColor(name: "std_textview_text_color", source: self, initialColor: UIColor.white, view: textView)
安装
UIDesignManager 可通过 CocoaPods 获取。要安装,只需将以下行添加到您的 Podfile 中
pod 'UIDesignManager'
作者
[email protected], = [email protected]
许可证
UIDesignManager 在 MIT 许可证下可用。查看 LICENSE 文件获取更多信息。