UIDesignManager 0.3.0

UIDesignManager 0.3.0

Ben Swift维护。



alt text

UIDesignManager

CI Status Version License Platform

示例

要运行示例项目,请克隆仓库,然后先从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()
    }
}

图片表示上述代码

alt text

视图初始化参数

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 文件获取更多信息。