介绍
Cupcake 是一个框架，允许您轻松为 iOS 8.0+ 创建和布局 UI 组件。它使用链式语法并提供了 UIKit 中缺少的一些常用功能。
简单创建 UIFont、UIImage 和 UIColor 对象的方法
您可以使用 Font() 函数创建 UIFont 对象。
Font(15) //UIFont.systemFontOfSize(15)
Font("15") //UIFont.boldSystemFontOfSize(15)
Font("body") //UIFontTextStyle.body
Font("Helvetica,15") //helvetica with size of 15
您可以使用 Img() 函数创建 UIImage 对象。
Img("imageName") //image with name
Img("#imageName") //prefixed with # will return a stretchable image
Img("$imageName") //prefixed with $ will return a template image
Img("red") //1x1 size image with red color
您可以使用 Color() 函数创建 UIColor 对象。
Color("red") //UIColor.red
Color("0,0,255") //RGB color
Color("#0000FF") //Hex color
Color("random") //random color
Color("red,0.5") //even with alpha
Color("0,0,255,0.8")
Color("#0000FF,0.5")
Color("random,0.2")
Color(Img("pattern")) //or image
简单创建 NSAttributedString 对象和字符串操作的方法
您可以使用 AttStr() 函数创建 NSAttributedString 对象。
AttStr("hello").color("red") //red color string
AttStr("hello, 101").select("[0-9]+").underline //101 with underline
AttStr("A smile ", Img("smile"), " !!") //insert image attachment
字符串操作
Str(1024) //convert anything to string
Str("1 + 1 = %d", 2) //formatted string
"hello world".subFrom(2).subTo("ld") //"llo wor"
"hello world".subAt(1..<4) //"ell"
"hello 12345".subMatch("\\d+") //"12345"
4 个基本 UI 组件
您只需使用 View、Label、ImageView 和 Button 变量，就可以简单地创建 UIView、UILabel、UIImageView 和 UIButton 对象。
View.bg("red").border(1).radius(4).shadow(0.7, 2)
Label.str("hello\ncupcake").font(30).color("#FB3A9F").lines(2).align(.center)
ImageView.img("cat").mode(.scaleAspectFit)
Button.str("kitty").font("20").color("#CFC8AC").highColor("darkGray").onClick({ _ in
print("click")
}).img("cat").padding(10).border(1, "#CFC8AC")
如您所见，.font()、.img() 和 .color() 可以接受与 Font()、Img() 和 Color() 相同的参数。此外，您还可以将 String、NSAttributedString 或其他任何值传递给 .str()。
增强功能
您可以为任何视图添加点击处理程序并调整点击区域。
要使视图的半高圆形无论大小如何，只需使用 .radius(-1)。
ImageView.img("mario").radius(-1).touchInsets(-40).onClick({ _ in
print("extending touch area")
})
您可以为 UILabel 添加行距和链接处理。
let str = "Lorem ipsum 20 dolor sit er elit lamet, consectetaur cillium #adipisicing pecu, sed do #eiusmod tempor incididunt ut labore et 3.14 dolore magna aliqua."
let attStr = AttStr(str).select("elit", .number, .hashTag, .range(-7, 6)).link()
Label.str(attStr).lineGap(10).lines().onLink({ text in
print(text)
})
.bg() 允许您为任何视图设置背景，可以是颜色或图像。
.highBg() 允许您为 UIButton 设置高亮背景（非常有用）。
您还可以在按钮内添加标题和图像之间的间距，甚至交换它们的位置。
Button.str("More").img("arrow").color("black").bg("lightGray,0.3").highBg("lightGray").gap(5).reversed()
您可以为 UITextField 和 UITextView 添加占位符并限制文本输入。
TextField.hint("placeholder").maxLength(10).padding(0, 10).keyboard(.numberPad)
TextView.hint("placeholder").maxLength(140).padding(10).onChange({ textView in
print(textView.text)
})
轻松设置约束
您可以使用 .pin() 设置相对于自身或父视图的简单约束。
.pin(200) //height constriant
.pin(100, 200) //width and height constraints
.pin(.xy(50, 50)) //left and top constraints relative to superview
.pin(.maxXY(50, 50)) //right and bottom constraints relative to superview
.pin(.center) //center equals to superview
...
.pin(.lowHugging) //low content hugging priority, useful when embed in StackView
.pin(.lowRegistance) //low content compression resistance priority, useful when embed in StackView
您可以使用 .makeCons() 和 .remakeCons() 来设置类似 SnapKit 的任何约束。
.makeCons({
$0.left.top.equal(50, 50)
$0.size.equal(view2).multiply(0.5, 0.7)
})
.remakeCons({ make in
make.origin.equal(view2).offset(10, 20)
make.width.equal(100)
make.height.equal(view2).multiply(2)
})
您可以使用 .embedIn() 通过边缘约束将视图嵌入到父视图中。
.embedIn(superview) //top: 0, left: 0, bottom: 0, right: 0
.embedIn(superview, 10) //top: 10, left: 10, bottom: 10, right: 10
.embedIn(superview, 10, 20) //top: 10, left: 20, bottom: 10, right: 20
.embedIn(superview, 10, 20, 30) //top: 10, left: 20, right: 30
.embedIn(superview, 10, 20, 30, 40) //top: 10, left: 20, bottom: 30, right: 40
.embedIn(superview, 10, 20, nil) //top: 10, left: 20
轻松布局
手动为每个视图设置约束可能会很繁琐。幸运的是，您可以通过简单地使用 HStack() 和 VStack()（与 UIStackView 相似）来构建大多数布局，而且希望不需要创建任何显式约束。
indexLabel = Label.font(17).color("darkGray").align(.center).pin(.w(44))
iconView = ImageView.pin(64, 64).radius(10).border(1.0 / UIScreen.main.scale, "#CCC")
titleLabel = Label.font(15).lines(2)
categoryLabel = Label.font(13).color("darkGray")
ratingLabel = Label.font(11).color("orange")
countLabel = Label.font(11).color("darkGray")
actionButton = Button.font("15").color("#0065F7").border(1, "#0065F7").radius(3)
actionButton.highColor("white").highBg("#0065F7").padding(5, 10)
iapLabel = Label.font(9).color("darkGray").lines(2).str("In-App\nPurchases").align(.center)
let ratingStack = HStack(ratingLabel, countLabel).gap(5)
let midStack = VStack(titleLabel, categoryLabel, ratingStack).gap(4)
let actionStack = VStack(actionButton, iapLabel).gap(4).align(.center)
HStack(indexLabel, iconView, 10, midStack, "<-->", 10, actionStack).embedIn(self.contentView, 10, 0, 10, 15)
轻量级样式
一些链式属性可以设置为样式。
//local style
let style1 = Styles.color("darkGray").font(15)
Label.styles(style1).str("hello world")
//global style
Styles("style2").bg("red").padding(10).border(3, "#FC6560").radius(-1)
Button.styles(style1, "style2").str("hello world")
//copy style from view
let style3 = Styles(someButton)
Button.styles(someButton).str("hello world")
其他
您可以通过 PlainTable() 或 GroupTable() 函数创建静态表格视图。
let titles = ["Basic", "Enhancement", "Stack", "StaticTable", "Examples"]
PlainTable(titles).onClick({ row in
print(row.indexPath)
})
您还可以使用链式语法来显示 Alert 和 ActionSheet。
Alert.title("Alert").message("message go here").action("OK").show()
ActionSheet.title("ActionSheet").message("message go here").action("Action1", {
print("Action1")
}).action("Action2", {
print("Action2")
}).cancel("Cancel").show()
安装
CocoaPods
您可以使用CocoaPods将Cupcake添加到您的项目中，只需在Podfile中添加以下行：
pod "Cupcake"
Carthage
如果您使用Carthage，您可以通过将其添加到Cartfile来添加Cupcake的依赖项：
github "nerdycat/Cupcake"