zoukankan      html  css  js  c++  java
  • SnapKit教程:简化iOS App开发中的自动布局

    对于iOS开发人员,以编程方式设置UI可能会感到困难和复杂,特别是如果您在Swift方面不是很有经验。但幸运的是,有很多图库支持我们解决这个问题。其中一个是SnapKit。

    我们使用SnapKit以编程方式设置UI,因为它是迄今为止最好的Swift UI布局库。在这个SnapKit教程中,我们将简要介绍SnapKit世界。

    在这个  SnapKit教程中,我们描述了使用SnapKit的经验,  以帮助您学习  如何简化iOS App Development中的自动布局

    snapkit教程

    1. SnapKit简介

    对于iOS程序员来说,“自动布局”术语非常熟悉。在实现移动应用程序的布局时,它几乎成为必需的部分。目前,有两种思路在起作用。必须决定是使用Interface Builder来实现布局还是以编程方式执行。使用Interface Builder时,我们可以通过使用storyboardxib文件添加所有约束,在这种情况下,我们的代码将不那么复杂,因为将使用更少的代码行,并且编写所有这些代码的时间将被打折扣。这只是“拖放”的东西。

    但是,项目越大越复杂,接口文件的数量越多,管理这些文件的难度就越大。然后,如果您需要一些动态布局,则必须拖动许多约束来相应地更新UI。它使您的项目难以调试并且难以控制。就像这还不够,现在想象一下,你有大量的iOS开发人员在同一个项目上工作,因此会出现很多其他问题,例如自动生成文件的合并冲突。丑,对吧?

    因此,无论哪种方式,您都必须知道如何以编程方式进行自动布局,因为如果您的应用程序成功,这将成为未来的一项要求。

    但以编程方式使用自动布局的最大缺点是需要太长时间。您将不得不编写大量代码来设置约束而不是点击几下鼠标。Apple的自动布局编写非常冗长且耗时。SnapKit通过提供Apple的Auto Layout Constraints系统的简洁抽象,帮助我们解决这个问题。

    2. SnapKit和用法

    SnapKit是一个允许iOS开发人员轻松操作自动布局约束的工具。通过使用SnapKit,您可以创建,更新,删除和管理UI视图的布局约束

    让我们考虑一些例子,让您了解SnapKit的简洁和清晰,而不是Apple的Cocoa Auto-Layout库。首先,您需要通过CocoaPods(依赖管理器)安装SnapKit。将其添加到您的Podfile:

    pod'SnapKit'


    为了节省时间和墨水(笑),我们不会谈论CocoaPods和Podfile。
    它们属于另一篇文章,所以请谷歌随意。

    你还记得如何以编程方式添加约束吗?例如,如果我们想要垂直居中视图,代码将是这样的:

    let horizontalConstraint = NSLayoutConstraint(item: view, attribute: NSLayoutConstraint.Attribute.centerX, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerX, multiplier: 1, constant: 0)

    哎呀,看起来很难看。我们甚至不想考虑它,更不用说写下来了。让我们看看SnapKit如何为Swift开发人员解决这个巨大的痛点。

    让我们显示一个UIView固定在其超视图的四个边缘。所以,想象一下我们有四个约束,比如上面的一个,有很多混乱的代码。让我们看看SnapKit如何处理这种情况。

    第1步:以编程方式创建UIView

    想象一下,我们在新的Xcode项目中有一个空白视图控制器。viewDidLoad()中,我们有以下几行代码:

    let childView = UIView()
    childView.backgroundColor = .red
    self.view.addSubview(childView)

    它基本上是创建一个新视图,为它设置背景颜色并将其添加到视图中。这里的所有都是它的。

    第2步:使用SnapKit

    首先,我们需要导入这个库。

    import SnapKit

    让我们继续在viewDidLoad()中编写代码
    childView.snp.makeConstraints { (make) in
      make.top.bottom.left.right.equalTo(self.view)
    }
    这很简单,对吧?!从字面上看,有一行,我们已经使childView的所有四个边等于super.view的边。如果将其与我们在上一节中显示的代码进行比较,这是一种更简洁的方法。因此,在编写UI时,您已经节省了大量时间。但那还不是全部。我们甚至可以进一步重构此代码:
    childView.snp.makeConstraints { (make) in
      make.edges.equalTo(self.view)
    }
    现在重新运行,您可以看到我们仅使用一行代码固定四条边,而不是像之前显示的二十或三十条线。

    3.更多SnapKit示例

    让我们继续使用另一个SnapKit示例。我们将创建另一个名为anotherChildView的视图

    let anotherChildView = UIView()
    anotherChildView.backgroundColor = .yellow
    self.view.addSubview(anotherChildView)

    让我们在SnapKit中尝试新事物:
    childView.snp.makeConstraints { (make) in
      make.size.equalTo(CGSize( 300, height: 300))
      make.top.equalTo(self.view.snp.top).offset(100)
      make.centerX.equalTo(self.view)
    }
    anotherChildView.snp.makeConstraints { (make) in make.size.equalTo(childView) make.top.equalTo(childView.snp.bottom).offset(50) make.centerX.equalTo(self.view) }

    如您所见,我们有很多功能
    • size.equalTo
    • top.equalTo (Likewise, we have bottom.equalTo, left.equalTo and right.equalTo) with the offset.
    • centerX.equalTo and centerY.equalTo with the offset.

    除此之外,SnapKit也有。乘以您可以使用此功能为视图创建纵横比因为这些代码行非常简单直接,所以我们不会深入研究实现细节。您可以参考SnapKit.io网站,因为它的文档非常详细且易于理解

    现在让我们再次运行它。

    它按预期工作。此外,SnapKit还支持我们进行调试。它将准确地向我们显示约束被破坏的视图。然后我们可以相应地轻松检查和更新这些约束。

    4.关于SnapKit的结论

    阅读本SnapKit教程后,我们希望您能看到SnapKit以编程方式设置UI的好处。它允许您编写更少的代码,这反过来使整个过程更加简单。然而,作为一个小缺点,我们仍然需要继续学习如何使用可用的iOS API以编程方式使用自动布局(因为SnapKit只是一个第三方库,有一天可能不再支持 - 这是非常不可能的,因为围绕SnapKit开源项目有一个巨大的iOS社区)。

    总的来说,如果您希望在以编程方式进行约束时改进代码,则SnapKit是一个有用的库。您的Xcode项目将变得更简洁,更模块化



  • 相关阅读:
    centos7 hbase 搭建笔记
    【转】python 2.6.6升级到python 2.7.x版本的方法
    centos7 sqoop 1 搭建笔记
    centos7 hive + 远程mysql 搭建笔记
    docker 批量操作容器
    centos7 hdfs yarn spark 搭建笔记
    【转】mysql查看表空间占用情况
    【转】Centos 7 修改主机名hostname
    jQuery选择
    jQuery检查复选框是否被选
  • 原文地址:https://www.cnblogs.com/zhanggen/p/10863086.html
Copyright © 2011-2022 走看看