Stevia：一款开源、简单、直观的纯代码自动布局类库

jack · 发表于 2016-3-20 00:29:33

就自动布局而言，AutoLayout已经成为iOS开发者应用开发中必不可少的一部分，苹果一直主张开发者使用AutoLayout来布局，而关于iOS自动布局教程与经验分享亦数不胜数。但不可否认的是，Autolayout太过繁琐复杂，由此出现了Autosizing。除此之外，还有一种解决方案，就是Stevia（GitHub托管地址）。

Stevia是一款非常直观的纯代码自动布局类库，其主要贡献者S4cha在GitHub上写明了为什么会开发出这样一个自动布局类库：因为没有什么并纯代码更赞，Xibs和storyboards太过繁重、很难维护以及合并，将视图拆分成两个独立文件来调试简直就是一场噩梦，我们必须拥有一个更为便捷、效率更高的解决方案。

以登陆界面为例：

Login View Example

使用原生AutoLayout：

class LoginViewNative:UIView {
let email = UITextField()
let password = UITextField()
let login = UIButton()
convenience init() {
self.init(frame:CGRectZero)
backgroundColor = .whiteColor()
addSubview(email)
addSubview(password)
addSubview(login)
email.translatesAutoresizingMaskIntoConstraints = false
password.translatesAutoresizingMaskIntoConstraints = false
login.translatesAutoresizingMaskIntoConstraints = false
addConstraint(NSLayoutConstraint(
item: email,
attribute: .Left,
relatedBy: .Equal,
toItem: self,
attribute: .Left,
multiplier: 1,
constant: 8)
)
addConstraint(NSLayoutConstraint(
item: email,
attribute: .Right,
relatedBy: .Equal,
toItem: self,
attribute: .Right,
multiplier: 1,
constant: -8)
)
addConstraint(NSLayoutConstraint(
item: password,
attribute: .Left,
relatedBy: .Equal,
toItem: self,
attribute: .Left,
multiplier: 1,
constant: 8)
)
addConstraint(NSLayoutConstraint(
item: password,
attribute: .Right,
relatedBy: .Equal,
toItem: self,
attribute: .Right,
multiplier: 1,
constant: -8)
)
addConstraint(NSLayoutConstraint(
item: login,
attribute: .Left,
relatedBy: .Equal,
toItem: self,
attribute: .Left,
multiplier: 1,
constant: 0)
)
addConstraint(NSLayoutConstraint(
item: login,
attribute: .Right,
relatedBy: .Equal,
toItem: self,
attribute: .Right,
multiplier: 1,
constant: 0)
)
for b in [email, password, login] {
addConstraint(NSLayoutConstraint(
item: b,
attribute: .Height,
relatedBy: .Equal,
toItem: nil,
attribute: .NotAnAttribute,
multiplier: 1,
constant: 80)
)
}
addConstraint(NSLayoutConstraint(
item: email,
attribute: .Top,
relatedBy: .Equal,
toItem: self,
attribute: .Top,
multiplier: 1,
constant: 100)
)
addConstraint(NSLayoutConstraint(
item:email,
attribute: .Bottom,
relatedBy: .Equal,
toItem: password,
attribute: .Top,
multiplier: 1,
constant: -8)
)
addConstraint(NSLayoutConstraint(
item: login,
attribute: .Bottom,
relatedBy: .Equal,
toItem: self,
attribute: .Bottom,
multiplier: 1,
constant: 0)
)
email.placeholder = "Email"
email.borderStyle = .RoundedRect
email.autocorrectionType = .No
email.keyboardType = .EmailAddress
email.font = UIFont(name: "HelveticaNeue-Light", size: 26)
email.returnKeyType = .Next
password.placeholder = "Password"
password.borderStyle = .RoundedRect
password.font = UIFont(name: "HelveticaNeue-Light", size: 26)
password.secureTextEntry = true
password.returnKeyType = .Done
login.setTitle("Login", forState: .Normal)
login.backgroundColor = .lightGrayColor()
login.addTarget(self, action: "loginTapped", forControlEvents: .TouchUpInside)
login.setTitle(NSLocalizedString("Login", comment: ""), forState: .Normal)
}
func loginTapped() {
//Do something
}
}

复制代码

使用Stevia：

class LoginViewStevia:UIView {
let email = UITextField()
let password = UITextField()
let login = UIButton()
convenience init() {
self.init(frame:CGRectZero)
backgroundColor = .whiteColor()
sv(
email.placeholder("Email").style(fieldStyle), //.style(emailFieldStyle),
password.placeholder("Password").style(fieldStyle).style(passwordFieldStyle),
login.text("Login").style(buttonStyle).tap(loginTapped)
)
layout(
100,
|-email-| ~ 80,
8,
|-password-| ~ 80,
"",
|login| ~ 80,
0
)
}
func fieldStyle(f:UITextField) {
f.borderStyle = .RoundedRect
f.font = UIFont(name: "HelveticaNeue-Light", size: 26)
f.returnKeyType = .Next
}
func passwordFieldStyle(f:UITextField) {
f.secureTextEntry = true
f.returnKeyType = .Done
}
func buttonStyle(b:UIButton) {
b.backgroundColor = .lightGrayColor()
}
func loginTapped() {
//Do something
}
}

复制代码

		自动登录	找回密码
密码			立即注册

[iOS/OS X] Stevia：一款开源、简单、直观的纯代码自动布局类库