Swift自动布局: SnapKit,相当于Objective-C中的Masonry。

这篇具有很好参考价值的文章主要介绍了Swift自动布局: SnapKit,相当于Objective-C中的Masonry。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

OC里面,我们常用Masonry,SDAutoLayout。
Swift里,我们常用SnapKit。

一、项目集成
Podfile 导入

pod 'SnapKit'

使用

import SnapKit

#注意#

通过 snp.makeConstraints 方法给view添加约束,约束有几种,分别是边距,宽,高,左上右下距离,基准线。
添加过约束后可以有修正,修正有位移修正(inset、offset)和倍率修正(multipliedBy)
语法一般是: make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。
.equalTo:等于 
.lessThanOrEqualTo:小于等于
.greaterThanOrEqualTo:大于等于
注意: 使用 snp.makeConstraints 方法的元素必须事先添加到父元素的中,例如:self.view.addSubview(view)

对于如何使用SnapKit,这里简单讲一些常用的场景:

场景1:

在view中心添加一个长宽200的view

swift 自动布局,Swift总汇,swift,objective-c,开发语言,ios,xcode,swiftui,cocoapods

box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })

场景2:

在红色view里,添加一个子view,距离顶部30px

swift 自动布局,Swift总汇,swift,objective-c,开发语言,ios,xcode,swiftui,cocoapods

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
box1.addSubview(box2)
box1.snp.makeConstraints({ (make) in
    make.width.height.equalTo(200)
    make.center.equalTo(self.view)
})

box2.snp.makeConstraints({ (make) in
     make.top.equalTo(box1.snp.top).offset(30)       //距离box1 30距离
     make.left.equalTo(box1)             //等效于 make.left.equalTo(box1.snp.left)
     make.right.equalTo(box1)
     make.height.equalTo(30)
})

场景3:

添加两个view,高宽相等,绿色的紧靠红色上下排列

swift 自动布局,Swift总汇,swift,objective-c,开发语言,ios,xcode,swiftui,cocoapods

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in     
                make.left.equalTo(20)      //距离左边20
                make.right.equalTo(-20)    //距离右边20,注意,这里要为负的20
                make.top.equalTo(100)
                make.height.equalTo(50)
            })
            box2.snp.makeConstraints({ (make) in

                make.top.equalTo(box1.snp.bottom)      //顶部靠着box1底部
                make.left.right.height.equalTo(box1)    //左右高和box1对齐

            })

场景4:

添加两个view,高宽相等,左右排列

swift 自动布局,Swift总汇,swift,objective-c,开发语言,ios,xcode,swiftui,cocoapods

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(100)
                make.left.equalTo(view)
                make.top.equalTo(100)
            })
            box2.snp.makeConstraints({ (make) in

                make.size.equalTo(box1)             //大小等于box1
                make.top.equalTo(box1)              //顶部和box1对齐
                make.right.equalTo(view)

            })

场景5:

添加两个view,绿色大小为红色一半,上下排列

swift 自动布局,Swift总汇,swift,objective-c,开发语言,ios,xcode,swiftui,cocoapods

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            view.addSubview(box2)
            box1.snp.makeConstraints({ (make) in

                make.size.equalTo(CGSize(width: 200, height: 200))
                make.centerX.equalTo(view)
                make.centerY.equalTo(view).offset(-100)     //中心点为view中心偏上100距离
            })
            box2.snp.makeConstraints({ (make) in

                make.size.equalTo(box1).multipliedBy(0.5)   //大小为box1一半
                make.centerX.equalTo(box1)
                make.top.equalTo(box1.snp.bottom).offset(20)

            })

场景6:

添加两个view,绿色在红色里面,内边距设置为依次10、20、30、40
swift 自动布局,Swift总汇,swift,objective-c,开发语言,ios,xcode,swiftui,cocoapods

box1.backgroundColor = UIColor.red
            box2.backgroundColor = UIColor.green
            view.addSubview(box1)
            box1.addSubview(box2)
            box1.snp.makeConstraints({ (make) in
                make.width.height.equalTo(200)
                make.center.equalTo(self.view)
            })
            box2.snp.makeConstraints({ (make) in
                //内距box1边距分别为10、20、30、40
                make.edges.equalTo(box1).inset(UIEdgeInsetsMake(10, 20, 30, 40))
            })

总结:
以上几种是比较常用的使用场景,涉及到一些基本属性。
当然如果你用过Masonry,会发现和Masonry很像,毕竟是同一团队操刀的嘛。
多用多熟练嘛,biu~
文章来源地址https://www.toymoban.com/news/detail-796792.html

到了这里,关于Swift自动布局: SnapKit,相当于Objective-C中的Masonry。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • JavaScript 发布-订阅设计模式实现 React EventBus(相当于vue的$Bus)非父子之间通信

    参考文档:https://github1s.com/browserify/events/blob/main/events.js                  https://www.npmjs.com/package/events                  https://github.com/browserify/events                     首先先新建一个文件eventBus.tsx 然后再组件A使用=接收 然后再组件B使用=触发     安装这个events插件

    2023年04月18日
    浏览(184)
  • Unity UGUI的PhysicsRaycaster (物理射相当于利用泛型函数保存了类型信息线检测)组件的介绍及使用

    这是在Datadog公司任职的Kevin Gosse大佬使用C#编写.NET分析器的系列文章之一,在国内只有很少很少的人了解和研究.NET分析器,它常被用于APM(应用性能诊断)、IDE、诊断工具中,比如Datadog的APM,Visual Studio的分析器以及Rider和Reshaper等等。之前只能使用C++编写,自从.NET NativeAOT发

    2024年01月22日
    浏览(8)
  • Swift基础语法&SnapKit自动布局库的使用

    Swift基础语法&SnapKit自动布局库的使用

    本文详细记录了作者在学习Swift语言和使用SnapKit库过程中的心得体会,同时也探讨了全局文件的使用和懒加载的实现。

    2024年02月08日
    浏览(9)
  • iOS开发Swift-5-自动布局AutoLayout-摇骰子App

    iOS开发Swift-5-自动布局AutoLayout-摇骰子App

    1.在iOS坐标系中,以向左、向下为正方向。图片以左上角为基准点。  2.打开之前的摇骰子App,对它的界面做一些适应所有iPhone机型的效果。  3.先对上方logo做一个y轴约束和一个宽高约束。 宽高约束:  水平居中:  对y轴进行约束。将虚线点击变红色实线,表示固定相邻视图

    2024年02月10日
    浏览(12)
  • 【Swift/Objective-c】公司项目优化(二) - 下拉刷新抖动问题

    使用MJRefresh进行列表下拉刷新时,会出现列表上下颤抖问题 抖动的原因 我们先来看看在手松开之后我们对scrollView做了什么事情: ScrollViewDidEndDragging  =  setContentInset: 为了保证在“Loading”的状态下,下拉刷新控件可以展示,我们对contentInset做了修改,增加了inset的top. 那这样

    2024年01月20日
    浏览(10)
  • 制作两栏布局的 6+5 种方法:从相当合理到完全错误

    制作两栏布局的 6+5 种方法:从相当合理到完全错误

    一个挑战 假设您需要创建一个两列布局。是的,最简单的那种:左边一列,右边一列,中间有一些空隙。有一个明显的现代解决方案: 完毕!当然可以,但是如果我们需要支持一些较旧的浏览器怎么办?然后是 Flexbox。好的!那么文本从一栏流到另一栏呢?没问题,多列。旧

    2023年04月20日
    浏览(8)
  • swift ui 布局 ——Stack(HStack、VStack、ZStack)

    swift ui 布局 ——Stack(HStack、VStack、ZStack)

    将其子视图排列在水平线上 默认子视图是水平中心对齐的,可添加alignment  修改位置,alignmet 的值有 bottom   top  center等,可自己查看api 将其子视图排列在垂直线上 默认子视图是垂直中心中心对齐的,可添加alignment  修改位置,alignmet 的值有 leading   trailing  center等 用于覆盖

    2024年02月05日
    浏览(13)
  • 苦于实现3D空间自动布局的同学,请参考:3D室内空间布局自动化算法分析(含源码)

    苦于实现3D空间自动布局的同学,请参考:3D室内空间布局自动化算法分析(含源码)

    分两步生成给定房间的家具布置: 第一步:根据美学和功能规则,优化房间中家具对象的选择和布置。此过程通过【贪婪成本最小化算法】快速探索家具布局的无限跨维空间 根据室内设计规则形成的成本函数优化全局家具布局和对象选择。在此优化过程中,家具布置会因特

    2024年04月29日
    浏览(66)
  • 【移动端网页布局】流式布局 ① ( 流式布局简介 | 百分比布局 / 非固定像素布局 | 根据屏幕尺寸 / 设备类型自动调整网页布局 )

    【移动端网页布局】流式布局 ① ( 流式布局简介 | 百分比布局 / 非固定像素布局 | 根据屏幕尺寸 / 设备类型自动调整网页布局 )

    流式布局 又称为 百分比布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充 ; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应

    2024年02月03日
    浏览(11)
  • Unity UI自动拓展布局

    首先文字自动拓展很简单,只需要在Text物体里增加个ContentSizeFItter组件,选择你需要的拓展方式(横向和纵向)将其选择 PreferredSize 选项就可以了。 那么再往上,如果需要文字拓展带动上层拓展的话,就需要在文字父物体上加上两个组件,第一个是 LayoutGroup 组件,这个组件

    2024年02月06日
    浏览(8)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包