SwiftAutoLayout 实战10 个高频界面布局案例快速实现【免费下载链接】SwiftAutoLayoutTiny Swift DSL for Autolayout项目地址: https://gitcode.com/gh_mirrors/sw/SwiftAutoLayoutSwiftAutoLayout 是一个极简的 Swift 自动布局 DSL它把原生NSLayoutConstraint的冗长写法压缩成一行像数学方程一样的声明式代码。无论你是 iOS 新手还是想提升界面布局效率的普通开发者本文都能帮你快速上手10 个高频 SwiftAutoLayout 布局案例覆盖居中、等宽、等比缩放、间距排列、约束优先级、安全区域等日常开发最常遇到的场景。读完你就能用它写出更简洁、更好维护的 AutoLayout 代码。SwiftAutoLayout 是什么让约束变成数学方程AutoLayout 的每一条约束本质上都是一个线性方程attribute1 multiplier × attribute2 constant。而 SwiftAutoLayout 的核心理念就是把方程直接写成代码。先看一个直观的对比原生 NSLayoutConstraint 写法SwiftAutoLayout DSL 写法一长串NSLayoutConstraint(item:attribute:relatedBy:...)参数view1.left view2.right * 2.0 10.0 ~ 750仅这一行就同时表达了左边缘对齐、倍率 2、偏移 10、优先级 750四个信息可读性一目了然。它支持三种关系运算符、、支持 - * /运算还支持用~快速设置约束优先级在 iOS / macOS / tvOS 三端通用。核心实现位于Sources/SwiftAutoLayout.swift全部源码只有 150 行左右非常轻量。SwiftAutoLayout 安装方法SPM 与 Xcode 集成先获取源码git clone https://gitcode.com/gh_mirrors/sw/SwiftAutoLayout然后有两种接入方式任选其一Swift Package Manager在项目的Package.swift中添加依赖即可。Xcode 手动集成把SwiftAutoLayout.xcodeproj作为子项目引入然后在 iOS 工程链接SwiftAutoLayout-iOS.framework在 macOS 工程链接SwiftAutoLayout-Mac.framework。安装完成后在代码里import SwiftAutoLayout就可以开始使用了。动手之前记住一个前提使用 AutoLayout 的视图要先把translatesAutoresizingMaskIntoConstraints设为false。10 个高频 SwiftAutoLayout 布局案例下面这 10 个案例均参考了项目自带的单元测试SwiftAutoLayoutTests/SwiftAutoLayoutTests.swift中的真实用法可以直接复制到你的项目里验证。案例 1固定位置布局——一条约束快速定位把按钮固定在父视图的左上角只需两条约束NSLayoutConstraint.activate([ button.left parent.left 16, button.top parent.top 20 ])parent.left 16表示相对父视图左边缘偏移 16pt减号则反向偏移语义和数学完全一致。案例 2视图居中——最常用的居中布局写法让一个卡片视图在屏幕上居中是日常开发中出现频率最高的需求NSLayoutConstraint.activate([ card.centerX parent.centerX, card.centerY parent.centerY ])两条约束搞定水平垂直居中无需再写任何计算偏移量的代码。案例 3等宽等高布局——让兄弟视图尺寸一致让两个按钮在水平方向上平分宽度、保持相同高度NSLayoutConstraint.activate([ leftButton.width rightButton.width, leftButton.height rightButton.height, leftButton.right rightButton.left - 12 ])约束之间的等号可以自由组合多视图联动非常方便。案例 4等比缩放布局——用 multiplier 控制宽高比固定图片的宽高比或让视图跟随父视图按比例缩放// 固定宽高比为 4:3 imageView.width imageView.height * 4.0 / 3.0 // 高度始终是父视图的一半 childView.height parent.height / 2.0*和/直接作用于约束正好对应方程里的 multiplier比原生写法少一半参数。案例 5水平间距布局——元素横向排列三个标签横向排列并保持固定间距NSLayoutConstraint.activate([ labelA.right labelB.left - 12, labelB.right labelC.left - 12 ])每个视图只需约束与相邻视图的距离就能自动推导出整条链式布局。案例 6约束优先级——用 ~ 设置约束优先级当两个约束可能冲突时用~指定优先级让 AutoLayout 自动取舍title.right button.left - 8 button.width 80 ~ 250 // 低优先级空间不足时可被压缩~后面跟数字如 250、750数字越小优先级越低这一特性在自适应布局中非常实用。案例 7尺寸范围约束—— 与 的妙用限制视图的最小、最大尺寸防止内容溢出NSLayoutConstraint.activate([ contentView.width 320, contentView.width 480, avatar.width 64 ])、正是原生NSLayoutRelation的三种关系映射语义直白。案例 8安全区域布局——配合 LayoutGuide 使用iOS 上避开状态栏、导航栏和 Home 指示条可以结合UILayoutGuide使用NSLayoutConstraint.activate([ header.top view.topLayoutGuideBottom, footer.bottom view.bottomLayoutGuideTop, contentView.leading layoutGuide.leading ])SwiftAutoLayout 让LayoutGuide与普通视图一样支持全部约束运算适配安全区域不再需要额外计算。案例 9文本基线对齐——让多行文字更整齐让标题和副标题按文字基线对齐视觉上更协调NSLayoutConstraint.activate([ title.lastBaseline subtitle.lastBaseline, title.firstBaseline subtitle.firstBaseline - 4 ])针对文本视图还额外提供了baseline、firstBaseline、lastBaseline属性满足精细的文字排版需求。案例 10批量激活约束——一次管理多个布局把多个约束放进数组一次激活是项目中最推荐的写法NSLayoutConstraint.activate([ view2.centerX superview.centerX, view2.centerY superview.centerY, view1.left view2.right 10, view1.width 200, view1.trailing layoutGuide.trailing ])当然单独一条约束也可以用(view1.left view2.right 10).isActive true激活灵活按需选择。总结SwiftAutoLayout 布局技巧速查回顾这 10 个案例SwiftAutoLayout 的核心优势可以浓缩为三点✍️写法直观约束即方程、、与加减乘除符号直接表达语义。代码量少同等布局代码行数通常只有原生写法的三分之一。能力完整优先级、LayoutGuide、基线对齐、批量激活等能力一应俱全。如果你正在被冗长的NSLayoutConstraint初始化代码困扰不妨试试这套极简的 Swift 自动布局 DSL。更多运算符细节可查阅核心源码Sources/SwiftAutoLayout.swift完整的测试用例则在SwiftAutoLayoutTests/SwiftAutoLayoutTests.swift里面覆盖了加减乘除、优先级、LayoutGuide 等全部边界场景是最好的学习参考。【免费下载链接】SwiftAutoLayoutTiny Swift DSL for Autolayout项目地址: https://gitcode.com/gh_mirrors/sw/SwiftAutoLayout创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考