SwiftlyUI 🚀 - 为 UIKit 注入 SwiftUI 的开发效率 通过链式语法和现代化 API 设计,让 UIKit 开发更简洁高效,同时保持完整控制权,实现「零转换成本」的 Swi...

githubSwiftlyUI

为 UIKit 注入 SwiftUI 的开发效率
通过链式语法和现代化 API 设计,让 UIKit 开发更简洁高效,同时保持完整控制权,实现「零转换成本」的 SwiftUI 式开发体验。

为什么选择 SwiftlyUI?

渐进式迁移 无需重写现有代码,可逐步改造 UIKit 项目

Swift 原生支持 专为 Swift 设计的链式语法,类型安全且 IDE 友好

完整 UIKit 能力 保留底层控件操作能力,不引入额外抽象层

企业级兼容 支持 iOS 11+,完美适配存量项目

功能特性

// 多容器嵌套完美复刻SwiftUI
ZStackView == UIView
HStackView == UIStackView
VStackView == UIStackView

let zView = ZStackView {// == UIView
    UIView()
        .frame(width: 300, height: 200)
        .backgroundColor(.red.opacity(0.5))
        .fillSuperMargins()
    
    VStackView(spacing: 10) {
        HStackView(spacing: 10) {
            Label("ACC:")
                .font(.medium(14))
                .width(50)
            
            UITextField("input ACC")
                .height(35)
                .width(180)
            
        }
            .border(.orange)
            .cornerRadius(5)
        
        HStackView(spacing: 10) {
            Label("PWD:")
                .font(.medium(14))
                .width(50)
            
            UITextField("input PWD")
                .height(35)
                .width(180)
        }
            .border(.orange)
            .cornerRadius(5)
    }
    .distribution(.fillEqually)
    .centerToSuper()
}
    .backgroundColor(.blue.opacity(0.5))
    .padding(10)
    .center(to: view)

view.addSubview(zView)

链式语法:属性设置增强

  • 极简代码:比原生代码减少 60% 的冗余字符
  • 内边距精准设置,支持单边/全局/横向/纵向
  • 内置分割线系统,一行代码设置分割线,子视图增删/隐藏/显示时自动更新分隔线
let stackView = UIStackView()
    .axis(.vertical)
    .spacing(10)
    .alignment(.center)
    .distribution(.fillEqually)
    .padding(.top, 20)
    .padding(.left, 20)
    .padding(.horizontal, 16)
    .padding(16)
    .separator(color: .red, size: CGSize(width: 20, height: 2))
  • 链式基础样式配置,告别碎片化的属性设置
  • 扩展SwiftUI语法配置:(.border);(.radius);(.background)
let view = UIView()
    .backgroundColor(.clear)
    .border(.orange)
    .border(.black, 2)
    .cornerRadius(8)
    .alpha(0.5)
    .opacity(0.5)
    .hidden(false)
    .hidden()
    .tag(100)
    .userInteractionEnabled(false)
    .userInteractionEnabled()
    .shadow(color: .black, radius: 3, opacity: 0.3, offset: .zero)
    .background {
        UIImageView()// 嵌入式背景视图
            .imageName("icon")
            .contentMode(.scaleAspectFill)
    }

现代化交互封装:手势识别事件简化

支持UIKit所有手势类型:(.tap);(.doubleTap);(.longPress);(.pan);(.swipe);(.pinch);(.rotation)

//SwiftlyUI
let view = UIView()
  .onGesture(.tap) { _ in print("tapAction") }
  .onGesture(.tap, action: tapAction)

//UIKit
let view = UIView()
view.isUserInteractionEnabled = true
let tap = UITapGestureRecognizer(target: self, action: #selector(tapAction))
view.addGestureRecognizer(tap)

@objc func tapAction() {
    print("tapAction")
}

声明式动画引擎:像 SwiftUI 一样驱动 UIKit

// SwiftlyUI
withAnimation(.easeInOut) {
    self.view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
} completion: { _ in print("animation completed") }

// UIKit
UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
    self.view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
} completion: { _ in
    print("animation completed")
}

智能布局系统 Auto Layout :前置约束 + 自适应布局

  • 添加父控件前约束,打破相对布局限制
let view = UIView()
    .frame(width: 20)//the same as .width()
    .frame(height: 100)//the same as .height()
    .frame(minWidth: 50)
    .frame(maxWidth: 200)
    .left(to: superView.leftAnchor, offset: 30)//添加父控件前
    .top(to: superView, offset: 30)//Before adding superView
    .fill(to: superView)
    .fill(to: brother, UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
    .leading(to: superView)//Before adding superView
    .bottom(to: superView)//添加父控件前
    .width(20)//the same as .frame(width: 20)
    .width(to: view, multiplier: 1.2)

UIControl & UIButton 多状态增强

  • 高质量 Action 封装,告别 告别 Target-Action 的原始时代
let contorl = UIControl()
    .onAction { print("click") }
    .onAction(for: .touchUpInside, action: { print("click") })
let button = UIButton()
    .font(.bold(16))
    .title("title", state: .normal)
    .titleColor(.black, state: .normal)
    .foregroundColor(.black, state: .normal)
    .image(UIImage(named: "image"), state: .normal)
    .imageName("local_imageName", state: .selected)
    .backgroundColor(.red, state: .normal)
    .backgroundImage(UIImage.gradient(colors: [.red, .green], direction: .leftToRight, size: CGSize(width: 100, height: 100)))
    .backgroundImageName("local_imageName", state: .normal)
    .cornerRadius(20)
    .onAction{ print("action") }

UITextView & UITextField:输入控件增强,比原生更易用的文本处理

  • 一行代码实现 Placeholder
  • Padding 精准设置内边距
  • 控件事件简化监听文本变化
let textView = UITextView()//or
let textField = UITextField()
    .font(.regular(16))
    .textColor(.black)
    .foregroundColor(.black)
    .alignment(.left)
    .keyboardType(.numberPad)
    .text("input text")
    .placeholder("placeholder", color: .placeholderText)
    .editable(true)
    .maxLength(50)
    .padding()
    .padding(.horizontal, 10)
    .padding(.vertical, 10)
    .onTextChange{ print("onTextChange: \($0)") }
    .onTextChange{ print("onTextChange: \($0.text)") }
    .onBeginEditing(onBeginEditingAction)
    .onEndEditing(onEndEditingAction)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容