使用NSLayoutAnchor删除情节提要

接口构建器是Apple提供的出色工具。 但是,了解事物的编程方面也很重要。 不用担心,那不会那么痛苦。

卸下主板

在Xcode中打开一个新项目,然后选择“单一视图应用程序模板”。 默认情况下,此模板提供Storyboard,因此让我们先删除Main.Storyboard。

更新信息列表

尽管已删除它,但Xcode仍认为它正在引用情节提要,因此我们需要进入info.plist并删除以下行。

更新AppDelegate

现在,在AppDelegate.swift中,找到didFinishLaunchingWithOptions(:)并使用以下代码对其进行更新。

 窗口= UIWindow(框架:UIScreen.mainScreen()。bounds) 
  window?.rootViewController = UINavigationController(rootViewController:ViewController()) 
 窗口?.makeKeyAndVisible() 
 返回真 

我们正在使用屏幕边界初始化window属性,并设置其rootViewController。 通过将ViewController放置在导航控制器中,我们可以免费获得导航栏。 此外,makeKeyAndVisible被调用,Apple提供了一个很好的解释:

这是一种方便的方法,可以显示当前窗口并将其放置在所有其他相同或更低级别的窗口之前。

使用NSLayoutAnchor的视图

让我们继续使用快速的hello world标签进行测试。 在ViewController.swift中,我们将更新viewDidLoad(:)以在红色背景上显示标签。

我们将首先将视图的背景色更新为红色。 这显示了不使用Interface Builder来更新视图属性是多么容易。

  view.backgroundColor = UIColor.redColor() 

接下来,我们将创建一个带有文本Hello World的标签,其中文本颜色为白色。

 让标签= UILabel() 
  label.text =“世界你好” 
  label.textColor = UIColor.whiteColor() 

容易吧? 有趣的部分是当我们需要以编程方式应用约束时!

要通过代码创建类似于Storyboard的约束,我们可以使用NSLayoutConstraints。 但是,NSLayoutConstraint可能太冗长,因此可能会使您有点眼花hard乱。 Apple在iOS9中推出了名为NSLayoutAnchor的工厂类来帮助我们。 绝对值得一看!

  view.addSubview(label) 
  label.translatesAutoresizingMaskIntoConstraints = false 
  label.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true 
  label.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true 

首先,我们将标签添加为子视图。 现在,标签位于视图内; 但是,我们仍然需要正确放置它。 由于我们正在应用约束,因此将标签的translatesAutoresizingMaskIntoConstraints属性设置为false。 这是苹果的官方解释

如果要使用“自动布局”来动态计算视图的大小和位置,则必须将此属性设置为false,然后为视图提供一组无歧义,无冲突的约束。

由于我们使用NSLayoutAnchor来设置约束,因此每个UIView都有锚属性。 因此,我们可以直接访问这些锚点并将其约束到视图的锚点。 这看起来与在Storyboard中创建约束非常相似,但现在已在代码中! 通过将标签的X锚点和Y锚点居中放置到其父视图中,我们可以确保标签将在任何景观中显示在中心。

完整的viewDidLoad如下所示

  super.viewDidLoad() 
  view.backgroundColor = UIColor.redColor() 

让标签= UILabel()
  label.text =“世界你好” 
  label.textColor = UIColor.whiteColor() 
  view.addSubview(label) 
  label.translatesAutoresizingMaskIntoConstraints = false 
  label.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true 
  label.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true 

测试

现在,您可以使用以下快捷方式运行项目:⌘+ R,应会看到以下内容。 与往常一样,这是GitHub存储库

SnapLayout

我还发布了一个pod,以便开发人员可以跳过称为SnapLayout的样板代码