以编程方式介绍自动版式

本教程来自 codzify.com将在iOS App开发中以编程方式为您提供有关Autolayout的充分理解。 希望你们都喜欢！ 您可以了解更多iOS App开发概念 这里。

UIView Autolayout是iOS App开发中一个非常有趣的概念。 自动布局负责响应式设计。 iPhone每次都有不同的屏幕尺寸。 借助Autolayouts ，您不必每次都创建应用程序设计。 自动版式负责响应式设计。 

 我将提供一个简单的库，您可以免费将其用于Autolayouts。 请参见给定示例中的自动版式代码，它太长了。 因此，我们在下一个教程中简化了代码。 但是，要了解此类别，您必须清除约束的基本概念。

什么是自动布局约束？ 

  注意：-要使用自动版式，您必须定义约束。

约束是您应分配给特定视图（如…）的特定规则。

1）无论iPhone屏幕尺寸为，请向左间隔20px。

2）无论iPhone屏幕尺寸是多少，都请向右间隔20px。

3）无论iPhone屏幕尺寸是多少，请给其顶部20px的间距。

4）无论iPhone屏幕尺寸是多少，都应与底部隔开20px的间距。

这意味着在一个视图中，距左，右，底部和顶部的间距为20 px。

编写约束的语法： 

 让topConstraint = NSLayoutConstraint（item： SpecificUIView ，attribute： .attributeName ，relatedBy： .Realtion ，toItem： superView ，attribute： .attribute ，乘数：1，常数： 12 ）; 

  [superView addConstraint：contraint];

总记得 ，

  1. 假设将label1添加到view1，则view1（orangeColor View）将成为label1的超级视图。

2）假设将view1添加到boxView，则boxView将成为view1的超级视图。

3）假设将boxView添加到superBoxView，则superBoxView将成为boxView的超级视图

约束属性最常用的包括：

1）NSLayoutConstraint.left

2）NSLayoutConstraint.right

3）NSLayoutConstraint.top

4）NSLayoutConstraint.bottom

5）NSLayoutConstraint.width

6）NSLayoutConstraint.height

任务输出：

打开Xcode 转到文件>新建>项目>单视图应用程序>输入项目名称（例如：-AutolayoutsDemo），然后选择语言为Swift>完成。

现在，您可以在Xcode的左侧导航菜单上看到一个名为Autolayouts_Demo.swift的文件。

我们首先从AppDelegate.swift文件开始。 将此代码复制并粘贴到didFinishLaunchingWithOptions方法（您可以在Appdelegate.swift中看到的第一个方法）中。 

 导入UIKit 
 导入CoreData 
  @UIApplicationMain 
 类AppDelegate：UIResponder，UIApplicationDelegate { 
  var window：UIWindow？ 

  func application（_ application：UIApplication，didFinishLaunchingWithOptions launchOptions：[UIApplicationLaunchOptionsKey：Any]？）->布尔 { 
  //应用程序启动后进行自定义的替代点。 

 窗口= UIWindow（框架：UIScreen.main.bounds） 
 让mainController = Autolayouts_Demo（）作为UIViewController 
 让navigationController = UINavigationController（rootViewController：mainController） 
  navigationController.navigationBar.isTranslucent = false 
  self.window？.rootViewController = navigationController 
  self.window？.makeKeyAndVisible（） 

 返回真 
  }

AppDelegate是在您的App启动时首先调用的文件。 您的文件中添加了许多ViewController。 那么， 我们的应用程序如何知道哪个首先开始？ 因此，在didFinishLaunchingApplications中，我们告诉我们的代码从ViewController文件开始。

UINavigationController通常在每个App中都可以看到。 正如在“最终输出图像”中看到的那样，这是带有青绿色的标头。 单词本身说明了它的意思。 它控制所有导航。 

  self.window？.rootViewController = navigationController

这样，您可以设置Root View Controller。 在我们的例子中，我们希望ViewController.swift文件成为第一个启动的文件。

Autolayouts_Demo.swift文件如下所示： 

  // Autolayouts_Demo.swift 
  //由Manish Methani在18/05/05上创建。 
  //版权所有©2018 Codzify。 版权所有。 
  // 
 导入UIKit 
  class Autolayouts_Demo ：UIViewController { 
 覆盖func viewDidLoad（） 
  { 
  super.viewDidLoad（） 
  self.view.backgroundColor = UIColor.white 
  self.title =“自动布局演示” 

  //将SuperView添加到self.view 
 让superView = UIView（） 
 自我看法。  addSubview （superView） 
  superView.backgroundColor = UIColor.red 

  superView.translatesAutoresizingMaskIntoConstraints = false 
 让topConstraint = NSLayoutConstraint（item： superView ，attribute：.top，relatedBy： .equal ，toItem： self.view ，attribute：.top，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （topConstraint） 

 让leftConstraint = NSLayoutConstraint（item： superView ，attribute： .left ，relatedBy： .equal ，toItem：self.view，attribute： .left ，乘数：1，常数： 20 ） 
 自我看法。  addConstraint （leftConstraint） 

 让rightConstraint = NSLayoutConstraint（item： superView ，attribute： .right ，relatedBy： .equal ，toItem：self.view，attribute： .right ，乘数：1，常数： -20 ） 
 自我看法。  addConstraint （rightConstraint） 

  let heightConstraint = NSLayoutConstraint（item： superView ，attribute： .height ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 54 ） 
 自我看法。  addConstraint （heightConstraint） 


  //标签添加到Superview作为子视图 
 让标签 = UILabel（） 
 超级视图。  addSubview （标签） 
  label.textColor = UIColor .white 
  label.font = UIFont.systemFont（ofSize：14，weight：UIFont.Weight（rawValue：1.0）） 
  label.text =“标签作为子视图添加到超级视图” 

  label.translatesAutoresizingMaskIntoConstraints = false 
 让topLabelConstraint = NSLayoutConstraint（item： 标签 ，属性：.top，relatedBy： .equal ，toItem： superView ，属性： .top ，乘数：1，常数： 12 ） 
 超级视图。  addConstraint （topLabelConstraint） 

 让leftLabelConstraint = NSLayoutConstraint（item： 标签 ，属性： .left ，relatedBy： .equal ，toItem： superView ，属性： .left ，乘数：1，常数： 20 ） 
 超级视图。  addConstraint （leftLabelConstraint） 

 让rightLabelConstraint = NSLayoutConstraint（item： 标签 ，attribute： .width ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 300 ） 
 超级视图。  addConstraint （rightLabelConstraint） 

  let heightLabelConstraint = NSLayoutConstraint（item： 标签 ，属性： .height ，relatedBy： .equal ，toItem： nil ，属性： .notAnAttribute ，乘数：1，常数： 24 ） 
 超级视图。  addConstraint （heightLabelConstraint） 



  //相对于SuperView添加了SuperView1 
 让superView1 = UIView（） 
 自我看法。  addSubview （superView1） 
  superView1.backgroundColor = UIColor.yellow 

  superView1.translatesAutoresizingMaskIntoConstraints = false 
 让topSuperView1Constraint = NSLayoutConstraint（item： superView1 ，属性：.top，relatedBy： .equal ，toItem： superView ，属性： .bottom ，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （topSuperView1Constraint） 

 让leftSuperView1Constraint = NSLayoutConstraint（item： superView1 ，attribute： .left ，relatedBy： .equal ，toItem：self.view，attribute： .left ，乘数：1，常数： 20 ） 
 自我看法。  addConstraint （leftSuperView1Constraint） 

 让widthSuperView1Constraint = NSLayoutConstraint（item： superView1 ，attribute： .width ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 120 ） 
 自我看法。  addConstraint （widthSuperView1Constraint） 

  let heightSuperView1Constraint = NSLayoutConstraint（item： superView1 ，attribute： .height ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 54 ） 
 自我看法。  addConstraint （heightSuperView1Constraint） 



  //相对于SuperView1和Superview添加了SuperView2 
 让superView2 = UIView（） 
 自我看法。  addSubview （superView2） 
  superView2.backgroundColor = UIColor.orange 

  superView2.translatesAutoresizingMaskIntoConstraints = false 
 让topSuperView2Constraint = NSLayoutConstraint（item： superView2 ，属性：.top，relatedBy： .equal ，toItem： superView ，属性： .bottom ，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （topSuperView2Constraint） 

 让leftSuperView2Constraint = NSLayoutConstraint（item： superView2 ，属性： .left ，relatedBy： .equal ，toItem： superView1 ，属性： .right ，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （leftSuperView2Constraint） 

 让widthSuperView2Constraint = NSLayoutConstraint（item： superView2 ，attribute： .width ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 200 ） 
 自我看法。  addConstraint （widthSuperView2Constraint） 

  let heightSuperView2Constraint = NSLayoutConstraint（item： superView2 ，attribute： .height ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 54 ） 
 自我看法。  addConstraint （heightSuperView2Constraint） 


  //相对于SuperView2添加了SuperView3 
 让superView3 = UIView（） 
 自我看法。  addSubview （superView3） 
  superView3.backgroundColor = UIColor.green 

  superView3.translatesAutoresizingMaskIntoConstraints = false 
 让topSuperView3Constraint = NSLayoutConstraint（item： superView3 ，attribute：.top，relatedBy： .equal ，toItem： superView2 ，attribute： .bottom ，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （topSuperView3Constraint） 

 让leftSuperView3Constraint = NSLayoutConstraint（item： superView3 ，attribute： .left ，relatedBy： .equal ，toItem： superView2 ，attribute： .left ，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （leftSuperView3Constraint） 

 让widthSuperView3Constraint = NSLayoutConstraint（item： superView3 ，attribute： .width ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 80 ） 
 自我看法。  addConstraint （widthSuperView3Constraint） 

  let heightSuperView3Constraint = NSLayoutConstraint（item： superView3 ，attribute： .height ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 54 ） 
 自我看法。  addConstraint （heightSuperView3Constraint） 

  } 
  }

例子的简短描述：

self.view添加了4个视图。

监督是红色的

superview1是黄色的

superview2是橙色的

superview3是绿色的

并且添加的一个标签被添加到superView

监督约束 

  superView.translatesAutoresizingMaskIntoConstraints = false 
 让topConstraint = NSLayoutConstraint（item： superView ，attribute：.top，relatedBy： .equal ，toItem： self.view ，attribute：.top，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （topConstraint）

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

总是这样阅读约束：“将superView的顶部应用于self.view的顶部，在该self.view上将superView作为子视图添加到12px的距离处”。 超级视图和子视图之间存在关系。 假设将一个视图添加到superView，则该视图成为该superView的子视图。 如果将第二个视图添加到superView，则该视图将成为该superView的子视图。 如果将一个标签添加到第一个子视图，则该子视图将成为该标签的超级视图。 现在，如果直接用标签应用第二个Superview的约束，那么您将与约束冲突。 

 让leftConstraint = NSLayoutConstraint（item： superView ，attribute： .left ，relatedBy： .equal ，toItem：self.view，attribute： .left ，乘数：1，常数： 20 ） 
 自我看法。  addConstraint （leftConstraint）

总是这样阅读约束，“将superView的左侧应用到self.view的左侧，将superView作为子视图添加到其上，距离为12px” 

 让rightConstraint = NSLayoutConstraint（item： superView ，attribute： .right ，relatedBy： .equal ，toItem：self.view，attribute： .right ，乘数：1，常数： -20 ） 
 自我看法。  addConstraint （rightConstraint）

总是这样阅读约束：“将superView的权限应用于self.view的权限，在该self.view上将superView作为子视图添加到12px的距离处” 

  let heightConstraint = NSLayoutConstraint（item： superView ，attribute： .height ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 54 ） 
 自我看法。  addConstraint （heightConstraint）

总是这样阅读约束，“将superView的高度应用于没有将SuperView作为子视图添加的nil，这不是54px的属性”

标签约束 

  label.translatesAutoresizingMaskIntoConstraints = false

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

 让topLabelConstraint = NSLayoutConstraint（item： 标签 ，属性：.top，relatedBy： .equal ，toItem： superView ，属性： .top ，乘数：1，常数： 12 ） 
 超级视图。  addConstraint （topLabelConstraint）

总是这样阅读约束：“将标签的顶部应用于以12px的距离将标签作为subView添加到其上的superView的顶部”。 

 让leftLabelConstraint = NSLayoutConstraint（item： 标签 ，属性： .left ，relatedBy： .equal ，toItem： superView ，属性： .left ，乘数：1，常数： 20 ） 
 超级视图。  addConstraint （leftLabelConstraint）

总是这样阅读约束，“将标签的左边应用于添加了标签作为superView的superView的左边，间距为12px” 

 让rightLabelConstraint = NSLayoutConstraint（item： 标签 ，attribute： .width ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 300 ） 
 超级视图。  addConstraint （rightLabelConstraint）

总是这样阅读约束，“将标签的宽度应用于nil，它不是anAnAttribute，正在将标签添加为300px的子视图” 

  let heightLabelConstraint = NSLayoutConstraint（item： 标签 ，属性： .height ，relatedBy： .equal ，toItem： nil ，属性： .notAnAttribute ，乘数：1，常数： 24 ） 
 超级视图。  addConstraint （heightLabelConstraint）

总是这样阅读约束，“将标签的高度应用到nil上，notnAttribute不是将其标签添加为带有24px的subView的标签”

SuperView1约束 

  superView1.translatesAutoresizingMaskIntoConstraints = false

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

 让topSuperView1Constraint = NSLayoutConstraint（item： superView1 ，属性：.top，relatedBy： .equal ，toItem： superView ，属性： .bottom ，乘数：1，常数： 12 ） 
 自我看法。  addConstraint （topSuperView1Constraint）

总是这样阅读约束，“将superView1的顶部应用于以12px的距离将superView1作为subView添加到其上的superView的底部” 

 让leftSuperView1Constraint = NSLayoutConstraint（item： superView1 ，attribute： .left ，relatedBy： .equal ，toItem：self.view，attribute： .left ，乘数：1，常数： 20 ） 
 自我看法。  addConstraint （leftSuperView1Constraint）

总是这样阅读约束，“将superView1的左侧应用到self.view的左侧，将superView1作为subView添加到其上，其间距为20px” 

 让widthSuperView1Constraint = NSLayoutConstraint（item： superView1 ，attribute： .width ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 120 ） 
 自我看法。  addConstraint （widthSuperView1Constraint）

总是这样阅读约束，“将superView1的宽度应用于nil，notil是在其上将superView1添加为120px的子视图的subAnAttribute” 

 let heightSuperView1Constraint = NSLayoutConstraint（item： superView1 ，attribute： .height ，relatedBy： .equal ，toItem： nil ，attribute： .notAnAttribute ，乘数：1，常数： 54 ） 
 自我看法。  addConstraint （heightSuperView1Constraint）

总是这样阅读约束，“将superView1的高度应用到nil上，这不是在其上将superView1添加为54px宽度的subView的notAnAttribute”

来自codzify.com的本教程将以编程方式为您提供有关iOS App开发中自动布局的足够了解。 希望你们都喜欢！ 您可以在此处了解更多iOS App开发概念。

Interesting Posts