iOS自动布局（AutoLayout）之 NSLayoutAnchor

最新推荐文章于 2020-05-21 20:35:32 发布
最新推荐文章于 2020-05-21 20:35:32 发布
阅读量3.5k 收藏 5
点赞数 2
分类专栏： # UI控件 文章标签： NSLayoutGuide AutoLayout 约束 NSLayoutAnchor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14920635/article/details/105586026
版权

自动布局（AutoLayout）之 NSLayoutAnchor 方式使用

AutoLayout

自动布局（AutoLayout）是iOS6引入的关系布局，实现动态位置和多视图关系的布局方式，是对frame布局和AutoresizingMask的不足进行补充的一种方式，现在已经成为主流的布局方案，由于原始创建方式比较复杂，可以使用优秀的第三方框架方便创建约束（Swift: SnapKit, Objective-C: Masonary）。

自动布局创建约束方式：

  1. 基于frame属性自动转化AutoLayout的约束，需要translatesAutoresizingMaskIntoConstraints为true.
  2. 通过NSLayouConstraint创建，比较麻烦且代码量多。
  3. 通过VFL语法创建约束组添加，不适合复杂布局，且理解有一定难度。
  4. NSLayoutAnchor, iOS9.0后添加的布局特性，是原生代码布局中最方便的。
  5. 直接在xib或storyboard中添加，最方便简单的实现自动布局方式。

自动布局基本原则：

  1. 创建约束尽量参考依赖父视图。
  2. 约束意义明确完整，尽量避免约束冲突
  3. 代码添加约束，一定要将View的translatesAutoresizingMaskIntoConstraints属性设置为false,否则约束不起效果。
  4. 先添加到父视图，再添加约束，否则会崩溃。

NSLayoutAnchor

NSLayoutAnchor是对AutoLayout创建约束的补充，核心还是NSLayoutConstraint,可以避免过长创建约束代码。NSLayoutAnchor可以理解为约束描边，通过视图之间的边关系和X、Y轴关系，以及定义自身宽高来创建约束。

锚（Anchor）关系

苹果公司为UIView添加如下属性Anchor来作为约束参考

四边关系

Anchor(锚边)描述
leadingAnchor前边锚（与trailingAnchor成对使用）
trailingAnchor后边锚
leftAnchor左边锚（与rightAnchor成对使用）
rightAchor右边锚
topAnchor上边锚
bottomAnchor下边锚

大小关系

Anchor(锚)描述
widthAnchor宽度约束
heightAnchor高度约束

中心点关系

Anchor(锚点)描述
centerXAnchorX轴对齐关系
centerYAnchorY轴对齐关系

基准线

Anchor(锚)描述
firstBaseLineAnchor文本首行基准线
lastBaeLineAnchor文本最后一行基准线

基本使用

实现灰色View和橙色View对齐，且大小相同。

1.初始化视图，并添加到父视图

 private var grayView = UIView()
 private var orangeView = UIView()
 grayView.backgroundColor = .gray
 orangeView.backgroundColor = .orange
 // 1. 先添加到父视图
 view.addSubview(grayView)
 view.addSubview(orangeView)

2.设置取消自动转化frame为约束

// 2.设置取消自动转化frame为约束
 grayView.translatesAutoresizingMaskIntoConstraints = false
 orangeView.translatesAutoresizingMaskIntoConstraints = false

3.通过锚关系添加约束

				// 3. 添加约束
        grayView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 15).isActive = true
        grayView.topAnchor.constraint(equalTo: view.topAnchor, constant: 80).isActive = true
        grayView.heightAnchor.constraint(equalToConstant: 40).isActive = true
        grayView.widthAnchor.constraint(equalToConstant: 40).isActive = true
        grayView.rightAnchor.constraint(equalTo: orangeView.leftAnchor, constant: -15).isActive = true  // 注意这里的值为负值[是相对于orangeView坐标系来确定值]
        
        orangeView.centerYAnchor.constraint(equalTo: grayView.centerYAnchor).isActive = true
        orangeView.widthAnchor.constraint(equalToConstant: 40).isActive = true
        orangeView.heightAnchor.constraint(equalToConstant: 40).isActive = true

Alt
与创建NSLayoutConstraint一样,也可以设置约束优先级，大于等于，小于等于等关系。

关系值确定

不知道你对grayView.rightAnchor.constraint(equalTo: orangeView.leftAnchor, constant: -15).isActive = true这个约束有没有疑问？为啥 值是负的，如果是使用xib来添加约束，他们两个的关系应该是15。

那是因为这个约束值是以orangeView的left锚为原点坐标系来确定的，灰色right边在次坐标系中的数值就是负值。参考以下示例图

在这里插入图片描述

同理特别容易出错的还有需求，如果现在需要灰色view与橙色view的距离大于等于15.

90%的人会写如下错误代码：

grayView.rightAnchor.constraint(greaterThanOrEqualTo: orangeView.leftAnchor, constant: 15).isActive = true 
// 语义上描述就是： 灰色view的right边大于等于橙色left边15距离

事实真是这样吗？你看

在这里插入图片描述

他们反而重合了，那你说把值换为负值总可以了吧！

grayView.rightAnchor.constraint(greaterThanOrEqualTo: orangeView.leftAnchor, constant: -15).isActive = true

然而并不是？你看下面这张图

在这里插入图片描述

由于是参考橙色left边的为原点的坐标系，所以是负值，又因为距离越大负得越多，值越小（-15 > -65）所以就需要使用小于等于，是不是和xib有点相反。

正确约束应该为：

grayView.rightAnchor.constraint(lessThanOrEqualTo: orangeView.leftAnchor, constant: -15).isActive = true

Tips: 在创建leftAnchor或者TopAnchor，一般为正值和xib一致，但是rightAnchor和BottomAnchor就要注意参考哪个坐标系原点来取值，来决定正负值和大于等、小于等于关系选择

参考坐标系的确定是以参数中视图锚边为原点坐标系（注意：此坐标系，不同于view的坐标系，这是一个以边为原点的虚拟坐标系）

UILayoutGuide

UILayoutGuide用于辅助添加约束，它的作用就像一个透明的View,具备约束参考，但是不会渲染。

假如我们想让三个view水平对齐，且中间间距相等。我们就可以使用UILayoutGuide辅助实现。

  1. 创建view即layoutGuide

     		private var grayView = UIView()
    private var orangeView = UIView()
    private var redView = UIView()
    private var layouGuide1 = UILayoutGuide()
    private var layouGuide2 = UILayoutGuide()

  2. 添加view到父视图

    				// 1. 先添加到父视图
        view.addSubview(grayView)
        view.addSubview(orangeView)
        view.addSubview(redView)
				// layoutGuide也需要添加进来
        view.addLayoutGuide(layouGuide1)
        view.addLayoutGuide(layouGuide2)

  3. 通过锚关系添加约束

    // 2.设置取消自动转化frame为约束
        grayView.translatesAutoresizingMaskIntoConstraints = false
        orangeView.translatesAutoresizingMaskIntoConstraints = false
        redView.translatesAutoresizingMaskIntoConstraints = false
        // 3. 添加约束
        
        // 添加layoutGuide的约束
        layouGuide1.widthAnchor.constraint(equalTo: layouGuide2.widthAnchor, multiplier: 1.0).isActive = true
        layouGuide1.heightAnchor.constraint(equalToConstant: 1).isActive = true
        layouGuide2.heightAnchor.constraint(equalToConstant: 1).isActive = true
        // 添加view和layouGuide的约束
        grayView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 30).isActive = true
        grayView.topAnchor.constraint(equalTo: view.topAnchor, constant: 80).isActive = true
        grayView.heightAnchor.constraint(equalToConstant: 40).isActive = true
        grayView.widthAnchor.constraint(equalToConstant: 40).isActive = true
        grayView.rightAnchor.constraint(equalTo: layouGuide1.leftAnchor).isActive = true
    
        layouGuide1.rightAnchor.constraint(equalTo: orangeView.leftAnchor).isActive = true
        orangeView.widthAnchor.constraint(equalToConstant: 40).isActive = true
        orangeView.heightAnchor.constraint(equalToConstant: 40).isActive = true
        orangeView.rightAnchor.constraint(equalTo: layouGuide2.leftAnchor).isActive = true
        
        layouGuide2.rightAnchor.constraint(equalTo: redView.leftAnchor).isActive = true
        redView.widthAnchor.constraint(equalToConstant: 40).isActive = true
        redView.heightAnchor.constraint(equalToConstant: 40).isActive = true
        redView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -15).isActive = true
        // 灰色、橙色、红色view和layoutGuide1、layoutGuide2水平中心对齐
         grayView.centerYAnchor.constraint(equalTo: layouGuide1.centerYAnchor).isActive = true
        orangeView.centerYAnchor.constraint(equalTo: grayView.centerYAnchor).isActive = true
         orangeView.centerYAnchor.constraint(equalTo: layouGuide2.centerYAnchor).isActive = true
         orangeView.centerYAnchor.constraint(equalTo: redView.centerYAnchor).isActive = true

代码量还是有点多，还是xib和storyboard香。

等宽layougGuide

参考

  1. 官网文档
  2. 通过VFL语法实现AutoLayout约束添加
  3. AutoLayou约束布局的发展
Code&Ocean
关注
专栏目录
Layout和anchor
m0_46376834的博客
06-18 568
Layout是 Qt Quick 中用于管理组件布局的元素。它允许您以一种灵活的方式组织和排列子组件，以适应不同的屏幕尺寸和方向。Qt Quick 提供了多种不同类型的布局，如RowLayoutGridLayout等，每种布局都有其特定的排列方式和属性。以下是LayoutLayoutLayoutLayoutLayoutspacingalignmentLayoutRowLayoutGridLayout以下是一个简单的示例，展示如何在 QML 中使用在这个示例中，我们使用。
AutoLayout的三种设置方式之——NSLayoutConstraint代码篇
weixin_30360497的博客
03-03 116
AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术，该技术有三种设置方式，等下我来为大家一一叙述一下。 在说三种设置方式前，我们先简单的说一下autolayout能够设置哪些行为。 1.视图的大小（即视图的绝对大小）。 2.视图的位置（视图相对于父视图或者兄弟视图的位置）。 3.视图的对齐方式（相对于父视图或者相对于兄弟视图）。 　　可以看到aut...
uikit——Auto Layout——NSLayoutAnchor
mardax的专栏
07-26 427
NSLayoutAnchor anchor，即锚，是对UI对象attribute(NSLayoutAttribute)的封装，因此用anchor生成constraint，本质等同用NSLayoutConstraint生成constraint anchor以factory设计模式实现，NSLayoutAnchor为虚父类 NSLayoutAnchor concrete subclass包括： NSLayoutXAxisAnchor：x-axis attribute NSLayoutYAxisAnchor：y
iOS9.0 NSLayoutAnchor初探
dianjinli2274的博客
12-19 150
NSLayoutAnchor API是iOS9版本引入,不仅让约束声明更加清晰明了，而且还通过静态类型检查以确保约束能够正常工作, 其实是一个工厂类,类似NSNumber这样的设计思想. NSLayoutAnchor用来创建NSLayoutConstraint对象,使用这些对象从而实现自动布局. 但是一般不会直接创建NSLayoutConstraint对象,而是用UIView(NS...
Auto Layout(NSLayoutAnchor)
路漫漫其修远兮，吾将上下而求索！
12-19 2754
介绍使用NSLayoutAnchor实现UI约束
iOS自动布局NSAutoLayout
王素燕
04-29 697
随着iOS设备的屏幕越来越大，iPhone6+的出现，让我们这些程序猿也开始忙着做UI的适配，这是一件很苦逼的事情。那 么如何才能很好的适配不同的苹果设备呢？
使用NSLayoutAnchor的更简单方法-Swift开发
05-27
SugarAnchor是NSLayoutAnchor上的语法糖，可以帮助我们编写更紧凑，易读和容易的布局代码。 它在某些情况下包装了NSLayoutXAxisAnchor，NSLayoutYAxisAnchor和NSLayoutDimension的所有功能。SugarAnchor是NSLayoutAnchor上的语法糖，可以帮助我们编写更紧凑，易读和容易的布局代码。 它使用一些易于使用的运算符将NSLayoutXAxisAnchor，NSLayoutYAxisAnchor和NSLayoutDimension的所有功能包装在一起，以减少冗长。 特点简单，简洁，本机[1]。 几乎为零的学习曲线Typesafe，类似于经过NSLayoutAnchor单元测试的小代码库（小于300 LOC）[1]相同的NSLayoutAnchor / NSLayoutConstraints，只是语法上的糖
Autolayout - NSLayoutAnchor
欢迎来到Jack的程序世界
04-25 1632
iOS9引入了NSLayoutAnchor来固定视图的约束。NSLayoutAnchor是工厂类可以快速创建布局对象，它的出现可以让代码变得更加简洁，而且可以有静态检查能力，并提供了额外的约束正确保证。并且Apple推荐使用NSLayoutAnchor进行布局而不是使用NSLayoutConstraint。NSLayoutAnchorNSLayoutAnchor有3个子类：NSLayoutXAxi...
iOS8开发～UI布局（三）深入理解autolayout
10-10
AutoLayout是Apple在iOS 6中引入的一种布局系统，用于自动管理视图（UIView）的位置和大小。它通过一套数学表达式，即约束（Constraints），来定义视图之间的相对关系。这些约束定义了视图的边距、大小以及相对于...
AutoLayout瀑布布局代码
08-20
AutoLayout瀑布布局代码是iOS开发中的一个重要话题，它涉及到如何使用苹果的AutoLayout框架来创建一个仿瀑布流的视图效果。瀑布布局是一种常见的UI设计模式，尤其在展示多列内容，如商品列表、图片展示等场景下非常...
ios开发-iOS开发实用demo之iOS核心动画集开发.zip
最新发布
03-03
12. **Autolayout与Core Animation**：在使用AutoLayout时，需要注意约束可能会影响动画的性能，因为每次布局更新都会触发图层的重新计算。合理使用NSLayoutAnchor可以帮助优化性能。 13. **Core Animation性能监控...
swift-SugarAnchor是NSLayoutAnchor简化用法
08-15
SugarAnchor是NSLayoutAnchor的语法糖，帮助我们写更紧凑,更易读和简便的布局代码。
iOS8 Autolayout官方文档（苹果官方自动布局）
09-08
Apple从iOS6加入了Auto Layout后开始就比较委婉的开始鼓励、建议开发者使用自适应布局，但是到目前为止，我感觉大多数开发者一直在回避这个问题，不管是不是由于历史原因造成的，至少他们在心底还坚守着固定布局的老传统思想。随着iPhone6、iPhone6 Plus的到来，使用自适应布局更是迫在眉睫的事，固定布局的老传统思想脆弱的不堪一击。我们需要学习自动布局。
Anchorman:一个为圣地亚哥该死的优秀公民设计的自动布局图书馆
04-26
您认为自动排版必须很困难吗？ 没事NSLayoutAnchor非常整洁！ 但这对API还是有点乏味。 尝试编写.translatesAutoresizingMaskIntoConstraints = false和.isActive = true 10次​​以上。 但是我们可以通过非常薄的...
Ext3.2 布局——anchor layout
专注于应用与管理！
02-13 1865
anchor layout 是一个有点意思的布局。简单的来说，在使用anchor布局的容器中，它的子组件都有一个anchor配置项，这个配置项表示该组件相对于父组件的位置。 上图是一个使用了anchor的viewport。viewport是一个特殊的容器，用来描述应用的可见区域，它会把自己渲染到document.body，并自动将自己调整到浏览器的大小。而使用了anchor的布局，则子组
FineUI 的 Layout="Anchor" 布局 asp 的
12345789
05-02 849
Fineui 的 锚点布局 是源自 asp 的 使用如下 : (子容器可以是具体的控件) 在父容器中指定布局类型为 锚点布局 在子容器中设置锚点布局的具体参数 此处有3种情况发生: AnchorValue="100% 30%">按照百分比布局 这种布局故名思议就是子容器的大小按照父亲的百分比来,布局会优先右填充,不够,变
QML中的Layout和Anchor
最爱吹吹风
05-21 2714
相较于QWidget，QQuick中使用QML来写界面，开发效率和代码结构都有了明显的进步，而且新版本对QQuick的支持也越来越完备，无论效率，还是界面效果都要优于原有的Widget架构。 QML中界面排布提供了两种方式Layout和Anchor，两个形式结合起来非常方便，之前Widget中只提供了Layout的支持，对于有些特殊分布非常不便。 Layout(布局): 适用于元素并列排布的场景，元素之间没有重叠关系，大的方面界面的主要元素的分布都可以用RowLayout和ColumnLayout规划.
AutoLayout之NSLayoutConstrain
u013984264的专栏
05-13 350
AutoLayout之NSLayoutConstraint
UIKit-NSLayoutAnchor、NSLayoutConstraint
张银阁的博客
10-12 1860
约束类  对控件进行约束 约束控件 有3种方式   1.通过storyboard进行约束   优点 ：简单快捷  缺点：不利于项目后期的修改 2.通过代码约束 优点：便越项目后期的调整 缺点：需要大量的代码实现 代码约束分两种  第一种是通过NSLayoutConstraint进行约束 1. + (NSArray *)constraintsWithVisualFormat:(NSStr
Masonry：iOS自动化布局利器，简化代码与屏幕适配
在iOS开发中，随着界面复杂度的提升和屏幕尺寸的多样化，自动布局成为了提高开发效率和适应不同设备的关键。Interface Builder虽然普遍用于快速设计UI，但在处理复杂布局和老项目时，代码编写仍然是必要手段。苹果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值