开发者俱乐部

标题: Stevia：一款开源、简单、直观的纯代码自动布局类库 [打印本页]
作者: jack    时间: 2016-3-20 00:29
标题: Stevia：一款开源、简单、直观的纯代码自动布局类库

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

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

以登陆界面为例：


Login View Example

使用原生AutoLayout：

  1. class LoginViewNative:UIView {

  3.     let email = UITextField()
  4.     let password = UITextField()
  5.     let login = UIButton()

  7.     convenience init() {
  8.         self.init(frame:CGRectZero)
  9.         backgroundColor = .whiteColor()

  11.         addSubview(email)
  12.         addSubview(password)
  13.         addSubview(login)

  15.         email.translatesAutoresizingMaskIntoConstraints = false
  16.         password.translatesAutoresizingMaskIntoConstraints = false
  17.         login.translatesAutoresizingMaskIntoConstraints = false

  19.         addConstraint(NSLayoutConstraint(
  20.                 item: email,
  21.                 attribute: .Left,
  22.                 relatedBy: .Equal,
  23.                 toItem: self,
  24.                 attribute: .Left,
  25.                 multiplier: 1,
  26.                 constant: 8)
  27.         )
  28.         addConstraint(NSLayoutConstraint(
  29.                 item: email,
  30.                 attribute: .Right,
  31.                 relatedBy: .Equal,
  32.                 toItem: self,
  33.                 attribute: .Right,
  34.                 multiplier: 1,
  35.                 constant: -8)
  36.         )
  37.         addConstraint(NSLayoutConstraint(
  38.             item: password,
  39.             attribute: .Left,
  40.                 relatedBy: .Equal,
  41.                 toItem: self,
  42.                 attribute: .Left,
  43.                 multiplier: 1,
  44.                 constant: 8)
  45.         )
  46.         addConstraint(NSLayoutConstraint(
  47.             item: password,
  48.             attribute: .Right,
  49.             relatedBy: .Equal,
  50.             toItem: self,
  51.             attribute: .Right,
  52.             multiplier: 1,
  53.             constant: -8)
  54.         )
  55.         addConstraint(NSLayoutConstraint(
  56.             item: login,
  57.             attribute: .Left,
  58.             relatedBy: .Equal,
  59.             toItem: self,
  60.             attribute: .Left,
  61.             multiplier: 1,
  62.             constant: 0)
  63.         )
  64.         addConstraint(NSLayoutConstraint(
  65.             item: login,
  66.             attribute: .Right,
  67.             relatedBy: .Equal,
  68.             toItem: self,
  69.             attribute: .Right,
  70.             multiplier: 1,
  71.             constant: 0)
  72.         )
  73.         for b in [email, password, login] {
  74.             addConstraint(NSLayoutConstraint(
  75.                 item: b,
  76.                 attribute: .Height,
  77.                 relatedBy: .Equal,
  78.                 toItem: nil,
  79.                 attribute: .NotAnAttribute,
  80.                 multiplier: 1,
  81.                 constant: 80)
  82.             )
  83.         }
  84.         addConstraint(NSLayoutConstraint(
  85.             item: email,
  86.             attribute: .Top,
  87.             relatedBy: .Equal,
  88.             toItem: self,
  89.             attribute: .Top,
  90.             multiplier: 1,
  91.             constant: 100)
  92.         )
  93.         addConstraint(NSLayoutConstraint(
  94.             item:email,
  95.             attribute: .Bottom,
  96.             relatedBy: .Equal,
  97.             toItem: password,
  98.             attribute: .Top,
  99.             multiplier: 1,
  100.             constant: -8)
  101.         )
  102.         addConstraint(NSLayoutConstraint(
  103.             item: login,
  104.             attribute: .Bottom,
  105.             relatedBy: .Equal,
  106.             toItem: self,
  107.             attribute: .Bottom,
  108.             multiplier: 1,
  109.             constant: 0)
  110.         )

  112.         email.placeholder = "Email"
  113.         email.borderStyle = .RoundedRect
  114.         email.autocorrectionType = .No
  115.         email.keyboardType = .EmailAddress
  116.         email.font = UIFont(name: "HelveticaNeue-Light", size: 26)
  117.         email.returnKeyType = .Next

  119.         password.placeholder = "Password"
  120.         password.borderStyle = .RoundedRect
  121.         password.font = UIFont(name: "HelveticaNeue-Light", size: 26)
  122.         password.secureTextEntry = true
  123.         password.returnKeyType = .Done

  125.         login.setTitle("Login", forState: .Normal)
  126.         login.backgroundColor = .lightGrayColor()
  127.         login.addTarget(self, action: "loginTapped", forControlEvents: .TouchUpInside)
  128.         login.setTitle(NSLocalizedString("Login", comment: ""), forState: .Normal)
  129.     }

  131.     func loginTapped() {
  132.         //Do something
  133.     }
  134. }
复制代码


使用Stevia：

  1. class LoginViewStevia:UIView {

  3.     let email = UITextField()
  4.     let password = UITextField()
  5.     let login = UIButton()

  7.     convenience init() {
  8.         self.init(frame:CGRectZero)
  9.         backgroundColor = .whiteColor()

  11.         sv(
  12.             email.placeholder("Email").style(fieldStyle), //.style(emailFieldStyle),
  13.             password.placeholder("Password").style(fieldStyle).style(passwordFieldStyle),
  14.             login.text("Login").style(buttonStyle).tap(loginTapped)
  15.         )

  17.         layout(
  18.             100,
  19.             |-email-| ~ 80,
  20.             8,
  21.             |-password-| ~ 80,
  22.             "",
  23.             |login| ~ 80,
  24.             0
  25.         )
  26.     }

  28.     func fieldStyle(f:UITextField) {
  29.         f.borderStyle = .RoundedRect
  30.         f.font = UIFont(name: "HelveticaNeue-Light", size: 26)
  31.         f.returnKeyType = .Next
  32.     }

  34.     func passwordFieldStyle(f:UITextField) {
  35.         f.secureTextEntry = true
  36.         f.returnKeyType = .Done
  37.     }

  39.     func buttonStyle(b:UIButton) {
  40.         b.backgroundColor = .lightGrayColor()
  41.     }

  43.     func loginTapped() {
  44.         //Do something
  45.     }
  46. }
复制代码









欢迎光临 开发者俱乐部 (http://xodn.com/) Powered by Discuz! X3.2