2个 属性 8个 UIView的各类扩展 视图几何相关的扩展 UIView (UIViewGeometry)，主要定义了视图上位置和区域相关一些属性和方法 视图层次结构相关的扩展 UIView (UIViewHierarchy...自动调整自己的宽度，保证与superView左边和右边的距离不变. 53 UIViewAutoresizingFlexibleRightMargin = 1 自动调整自己的高度，保证与superView顶部和底部的距离不变. 56 UIViewAutoresizingFlexibleBottomMargin = 1 自动调整子视图与父视图的位置，默认UIViewAutoresizingNone */ 225 @property(nonatomic) UIViewAutoresizing autoresizingMask...发生改变的时候就会调用,一般在这里重写布局子控件的位置和尺寸 */ 288 - (void)layoutSubviews; 289 290 /** 设置view之间的间距，该属性只对autolayout
周围的四条虚线分别代表子控件距离父控件上、下、左、右之间的距离关系/或者叫约束关系，周围的四条虚线所包围的小方块代表子视图，小方块内部的两条带双向箭头的线分别代表子控件的宽度和高度。...storyBoard上的autoresizing.gif 注意:Autoresizing只能设置父子视图之间的关系，也就是说，Autoresizing只能控制子视图和父视图之间的位置/大小关系。...从另一个角度也能解释：autoresizing是约束子控件和父控件之间的位置关系的，控制器的view并没有父控件，所以不能通过autoresizing来约束控制器的view。...用苹果官方的话，Auto Layout是一个基于约束的，描述性的布局系统。所谓基于约束就是代表我们可以为需要布局的子控件添加一些约束对象来限制他在屏幕上显示的位置。...就是警告 > 警告代表着当前控件在storyBoard中呈现的位置或者尺寸和程序运行后实际呈现的效果不一样，导致约束警告的原因往往是没有更新控件的约束，但并不影响其真实效果，也不会报错。
现在的版本要求子视图的位置或者是否隐藏改变后需要调用 使用线性布局时里面的子视图的frame.origin.y是无效的，而是通过子视图的headMargin,tailMargin分别指出其距离他...因此线性布局比较适合通过代码的方式来 构造视图。同时适合于将线性布局作为scrollview的子视图来布局。因为线性布局在位置调整后会 如果是使用自动布局则这个类将无效。...这些布局都是借鉴了目前市面上的iOS和android以及HTML5中的各种布局框架和思想而设计的。至于当时为什么以My开头初衷也是随手这么一写，所以后来开源后还是保持以My开头。...但实际中我们总是带着解决问题的想法去使用某个框架和库的，我这里想说的是当你在使用AutoLayout时因为复杂的约束设置以及更新方法而焦头烂额时，当你使用AutoLayout而对多屏幕多设备适配而进行多条件编写时...需要设置的约束少，不需要像AutoLayout那样无论是位置和尺寸都需要明确的通过设置约束来指定。有些时候可能只需要一两个属性就可以把所有子视图的位置和尺寸都设置完成。
；框架布局MyFrameLayout中的子视图则只跟父布局视图有关，而跟添加的先后顺序无关；相对布局中MyRelativeLayout的子视图则是通过设置视图之间的依赖关系来建立约束的，而跟添加的先后顺序无关...在这些布局中相对布局因为是通过设定视图之间的依赖来建立一种布局约束，因此我们可以用他来构造一些复杂且无规律的界面布局，但其缺点则是太过于依赖约束，导致当界面调整时需要重新设定视图之间的依赖关系(iOS的...浮动 我们的UI界面中总是有一种场景是：某个容器视图后续添加的子视图的左边总是紧跟着前面添加的子视图的右边，而上边则跟前面视图的上边保持一致进行停靠显示，而当容器视图剩余的宽度空间不够容纳新加入的子视图时则新加入的子视图自动的往下移动且在不覆盖已经排列好的视图的前提下寻找出一个可以容纳其宽度的最合适的位置进行停靠...2.如果新加入的子视图的宽度能够被放入到前一个加入的视图右边到布局视图右边的剩余宽度空间中的话，则新加入的视图的左边位置是等于前一个加入视图的右边位置，且新加入视图的上边位置和前一个加入的视图的上边位置保持一致...最后我们再来考察F的情况，虽然前面最后一个向右浮动的视图是B，但是根据浮动规则2的约定，视图F的上边位置必须要和最后一个加入的视图E的上边位置保持一致，但是如果和E的上边位置保持一致的话，F的长度将会覆盖掉
但随着业务的发展和个性化的驱动，通用视图库无法覆盖所有应用场景，本文提出了一种设计稿自动生成代码的方案。...但随着业务的发展和个性化的驱动，通用视图库无法覆盖所有应用场景，本文提出了一种设计稿自动生成代码的方案。...图层位置交叉 image.png 实践中发现当设计稿中不同字体/大小/颜色的文字排列在一起时，解析出来的图层信息往往会出现重叠的情况，由于DSL视图树算法依赖位置来确定不同组件的约束关系，因此位置的交叉会对算法准确度造成较大的影响...image.png 注意：从生成DSL的结果来看，包含布局和成组布局的处理方式其实是一样的，都是使用类似于FrameLayout的层叠布局包含内部图层元素，但是我们仍然保持分类原则（矩形之间的位置关系...image.png 对行/列布局中单状态列表组件的识别，只需要比较item子视图树的结构，子视图树结构一致则判断为单状态列表组件。
有些布局类则提供了通过子视图之间的约束限制来实现布局排列，比如浮动布局、相对布局、框架布局。有些布局类则需要通过多个层次嵌套来实现界面需求，比如线性布局、流式布局、表格布局、弹性布局。...、性能的提升都做了大量的改进，新增和改进的功能主要有： 弹性布局flexbox的实现MyFlexLayout 最值约束 视图尺寸和位置的压缩 环绕和拉伸停靠的支持 拖放类MyLayoutDragger实现布局内视图的拖放...MyLayoutPos中的clone方法就是专门为最值约束使用的，主要为了解决那些获取最值时希望在某个位置的偏移的场景。 目前只有相对布局下的子视图才支持位置最值约束设置，其他布局下的子视图不支持。...3.视图尺寸和位置的压缩 在一些场景中我们希望当所有子视图的尺寸总和超过布局视图的尺寸时为了能让所有子视图都得到完全的显示而需要对子视图的尺寸进行适当的压缩，对于位置也是如此。...目前只有线性布局、框架布局、流式布局、表格布局、弹性布局下的子视图的宽度和尺寸才支持压缩特性，其他布局中的子视图不支持。
iOS布局体系的概览 在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父布局视图某个位置的框架布局...这种流式布局的布局机制是，里面的子视图按添加的顺序每行依次从左排列到右，而当布局视图的剩余宽度容纳不下一个要插入的新的子视图的宽度时则会新起一行，重新从左到右继续排列，如果遇到某个子视图的宽度甚至比布局视图还要宽时则总时会压缩子视图的宽度和布局视图的宽度保持一致...这种流式布局的布局机制是，里面的子视图按添加的顺序每列依次从上排列到下，而当布局视图的剩余高度容纳不下一个要插入的新的子视图的高度时则会新起一列，重新从上到下继续排列，如果遇到某个子视图的高度甚至比布局视图还要高时则总时会压缩子视图的高度和布局视图的高度保持一致...三、流式布局内子视图的尺寸位置和间距 对于流式布局来说，虽然我们总是按约定的规则来排列定位其中的每个子视图的位置，但是我们依然在某种情况下需要设置每个子视图之间的间距，以及子视图本身的高度和宽度尺寸。...表格布局需要明确的指定建立一个新的行操作，同时又要明确的指定建立列的操作，同时表格布局的行和列的指定都是可以单独指定的，而流失布局则没有明确的行和列的概念，流失布局总是按一个方向进行排列，只要在遇到数量的约束和内容的空间的约束时就是自动的进行换行处理
虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。这两个应该吻合的，但是这里并没有。 Note：你可能会奇怪，为什么Xcode不为X轴方向自动增加一个约束。...Xcode将不再增加任何自动约束，并希望你为这个视图增加需要的约束。...2.2 AutoLayout框架介绍(ZXPAutoLayout) iOS原生的自动布局(NSLayoutConstraint)非常繁琐, 影响开发进度和可读性也不利于维护, 正所谓工欲善其事必先利其器..., 有一个良好的自动布局框架, 则会让我们事半功倍....在Storyboard界面配置自动布局要点： 1、对于一个视图内同级别的子视图，要配就全部都配置成自动布局； 2、对于每个视图，无法上下左右四个方向上的设置，一定要设置全； 3、
而MyLayout则除了提供约束依赖外，还提供了根据视图添加顺序自动建立约束的功能，从而减少了这种显示依赖关系建立的问题，最终的结果是简化了布局的代码量，以及减少了布局更新时的代码修改量。...线性布局是一种里面的子视图按添加的顺序从上到下或者从左到右依次排列的单列(单行)布局视图，因此里面的子视图是通过添加的顺序建立约束和依赖关系的。...相对布局是一种里面的子视图通过相互之间的约束和依赖来进行布局和定位的布局视图。相对布局里面的子视图的布局位置和添加的顺序无关，而是通过设置子视图的相对依赖关系来进行定位和布局的。...框架布局是一种里面的子视图停靠在父视图特定方位并且可以重叠的布局视图。框架布局里面的子视图的布局位置和添加的顺序无关，只跟父视图建立布局约束依赖关系。...浮动布局是一种里面的子视图按照约定的方向浮动停靠，当尺寸不足以被容纳时会自动寻找最佳的位置进行浮动停靠的布局视图。
如果是通过frame方式在一些不规则界面的场景中就需要进行大量计算来实现布局，而AutoLayout则可以通过设置视图之间的依赖约束来实现布局，这两者的布局方式都和子视图加入到父视图的顺序无关，越是不规则的界面...浮动 我们的UI界面中总是有一种场景是：某个容器视图后续添加的子视图的左边总是紧跟着前面添加的子视图的右边，而上边则跟前面视图的上边保持一致进行停靠显示，而当容器视图剩余的宽度空间不够容纳新加入的子视图时则新加入的子视图自动的往下移动且在不覆盖已经排列好的视图的前提下寻找出一个可以容纳其宽度的最合适的位置进行停靠...R2:如果新加入的子视图的宽度能够被放入到前一个加入的视图右边到布局视图右边的剩余宽度空间中的话，则新加入的视图的左边位置是等于前一个加入视图的右边位置，且新加入视图的上边位置和前一个加入的视图的上边位置保持一致...最后我们再来考察F的情况，虽然前面最后一个向右浮动的视图是B，但是根据浮动规则2的约定，视图F的上边位置必须要和最后一个加入的视图E的上边位置保持一致，但是如果和E的上边位置保持一致的话，F的长度将会覆盖掉...，那么这个布局视图里面的子布局视图将会根据视图之间的关系而自动智能的生成边界线。
容器视图实现尺寸自适应 对于一个容器父视图来说，当要实现父视图的尺寸依赖所有子视图的尺寸来实现自适应时，要设置的约束依赖不是通过尺寸约束来实现而是通过位置约束来实现。...那就是当添加或者删除子视图时以及调整了某个子视图的位置和尺寸时就需要重新调整父视图的自适应约束设置。...所有为子视图设置的约束都必须放入到一个布局视图中才有效。整个布局框架提供了多种布局视图，每种布局视图中的子视图都将按照特定的规则进行排列和布局。...因为MyLayout&TangramKit中的尺寸自适应约束不需要明确依赖某个子视图，因此当布局视图中的子视图有变化时系统会自动重新进行布局视图的尺寸计算，而当布局视图的尺寸变化时又会调整UIScrollView...您可以在这个DEMO中看到如何实现父视图的尺寸和兄弟视图的尺寸和位置如何依赖尺寸自适应的布局视图的代码。
框架布局TGFrameLayout: 框架布局里面的所有子视图布局时和添加的顺序无关，而是按照设定的位置停靠在布局视图的：左上、左中、左下、中上、中中、中下、右上、右中、右下、填充这个10个方位中的任何一个位置上...框架布局里面的子视图只跟框架布局视图的边界建立约束关系。框架布局和Android中的框架布局FrameLayout提供一样的功能。...相对布局TGRelativeLayout: 相对布局里面的子视图和添加的顺序无关，而是按照子视图之间设定的尺寸约束依赖和位置约束依赖进行布局排列。...因此相对布局里面的所有子视图都要设置位置和尺寸的约束和依赖关系。相对布局和iOS的AutoLayout以及Android中的相对布局RelativeLayout提供一样的功能。...当子视图的尺寸无法容纳到布局视图的剩余空间时，则会自动寻找一个能够容纳自身尺寸的最佳位置进行浮动停靠。浮动布局里面的子视图并不是有规则的多行多列的排列。
约束 Auto Layout你的视图层级里所有视图通过放置在它们里面的约束来动态计算的它们的大小和位置。...删除视图时直接使用removeConstraint和removeConstraints时需要注意这样删除是没法删除视图不支持的约束导致view中还包含着那个约束（使用第三方库时需要特别注意下）。...布局约束规则 表达布局约束的规则可以使用一些简单的数学术语，如下表 类型 描述 值 属性 视图位置 NSLayoutAttributeLeft, NSLayoutAttributeRight, NSLayoutAttributeTop...不含视图项的约束不合法，每个约束至少需要引用一个视图，不然会崩。在删除视图时一定要注意。...页面第一次显示是会自动标记上需要刷新这个标记的，所以第一次看显示都是看不出问题的，但页面再次调用layoutIfNeeded时是不会立刻执行layoutSubview的（但之前加上setNeedsLayout
但如果在项目中根据不同屏幕尺寸进行各种判断，写死坐标的话，这样开发起来是很吃力的。 所以一般用纯代码开发UI的话，一般都是配合一些自动化布局的框架进行屏幕适配。...什么是Masonry Masonry是一个对系统NSLayoutConstraint进行封装的第三方自动布局框架，采用链式编程的方式提供给开发者API。...在项目中设置的AutoLayout约束，起到对视图布局的标记作用。设置好约束之后，程序运行过程中创建视图时，会根据设置好的约束计算frame，并渲染到视图上。...UIScrollView原来的子视图都添加到containerView上，并且和这个视图设置约束。...，要对containerView的上下左右都添加和子视图的约束，以便确认containerView的边界区域。
容器视图添加N个页视图，对于水平分页滚动来说容器视图的高度和滚动视图一样，而宽度则是滚动视图的宽度乘以页视图的数量，页视图的尺寸则和滚动视图保持一致，对于垂直分页滚动来说容器视图的宽度和滚动视图一样，而高度则是滚动视图的高度乘以页视图的数量...，页视图的尺寸则和滚动视图保持一致。...containerView.gravity = MyGravity_Vert_Fill | MyGravity_Horz_Fill; //设置线性布局中的所有子视图均分和填充线性布局的高度和宽度。...gravity的设置就可以确定子页视图的高度和宽度，再加上线性布局的特性，所以页视图不需要设置任何附加的约束。...containerView.myVertMargin = 0; //容器视图的高度和滚动视图保持一致。
6条线，上下左右以及空间内的两条红色交叉线如下图 上下左右四条红色的线分别表示此视图距离父视图的上下左右边的约束各式多少 中间两条上下交叉的线表示，此视图的高度与宽度是否随着父视图的变化而按比例变化...Autoresizing 举个例子： 当我们将左边和上面虚线变成实线时，代表子控件和父控件在这个方向上的间距被固定 当我们点击子视图内部的虚线时，同样也变为实线，代表子视图的宽度或者高度被固定了...@property(nonatomic) UIViewAutoresizing autoresizingMask; //是一个枚举值，作用是自动调整子控件与父控件中间的margin(间距)或者子控件的宽高...Autoresizing的各种组合预览 ** UIViewAutoresizingNone** view的frame不会随superview的改变而改变(这样的约束条件有冲突，会默认左间距和上间距固定...可以满足大部分简单的自动布局需求，可是它有一个致命的缺陷，它只能设置子视图相对于父视图的变化，却不能精确这个变化的度是多少，因此对于复杂的精准的布局需求，它就力不从心了
自动版式 Masonry - Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性（使用介绍1 使用介绍2），iOS自适应前段库-Masonry...使用DEMO 视图居中显示，子视图含边距，视图等距离摆放，计算ScrollView的内容。 Classy - Classy是一个能与UIKit无缝结合stylesheet（样式）系统。...Snap - Snap是砌体自动布局DSL的Swift版本，是一款轻量级的布局框架，使用了更好的语法封装了AutoLayout.Snap支持iOS和OS X....在代码中纯手工创建约束灰常痛苦，但幸运的是我们有了SnapKit，在板中用上它，你可以简单直观地编写约束了。...Neon.swift - 功能强大的UI布局神器。 EasyPeasy.swift - 编程方式自动布局框架库。
当一个 View 的可见性被设置为 GONE时，相对于它的那些 View 仍能保持在正确的位置上，也能根据情况重新布局（详见续作《例说（二）》）。 5....此约束布局在手机上的样子 造成位置偏移的根本原因是：每一个 View 都至少需要有 2 个约束（Constraints），一个竖直方向的和一个水平方向的，来确定它的位置。...而在编辑器视图中，View 之所以没有错位，是因为 AS 会在 View 添加后自动增加属性来表示他们在编辑器中的位置。这个布局代码如下： ?...如果我们把其中自动生成的和编辑器相关的属性——tools:layout_editor_absoluteX="xxx"，tools:layout_editor_absoluteY="xxx"——删除，就发现在编辑器中控件的位置同手机上的一般无二了...删除编辑器相关属性后，此约束布局在视图中的样子 这些编辑器相关的属性仅仅是为了我们在编辑时预览方便而设置的，编译后并不起作用。
另一种是自动布局（Auto Layout），相比较于Frame需要指出每个视图的精确位置和大小，自动布局对于视图位置的描述更加简洁和易读，只需要确定两个视图之间的关系就能够确定布局。...后来通过RN和Weex等框架，它被带入到客户端开发当中，同时支持了iOS和Android。 与自动布局类似，Flexbox也是使用的描述性的语言来布局。...使用Flexbox布局的视图元素叫Flex容器（flex container），其子视图元素会自动成为容器成员，叫做Flex项目（flex item）。...Texture 如何使用 Flexbox 思路进行布局？ Texture框架的布局方案考虑的是十分长远的，并且也已经十分成熟，虽然学习起来费些力气，但是性能上远好于苹果的自动布局。...使用这些值可以计算最终的约束大小，但这个方法要尽量少用。
Litho是Facebook推出的一套高效构建Android UI的声明式框架，主要目的是提升RecyclerView复杂列表的滑动性能和降低内存占用。...而Litho组件的属性是不可变的，所以对于一个组件来说，它的布局计算结果是唯一且不变的。...限制子视图绘出父布局。 有监听焦点变化。 有设置Tag。 有监听触摸事件。 有光影效果。 对于以上场景的使用请仔细考虑，过多的使用会导致Litho的层级优化效果变差。...3.3.3 对比Android的约束布局 为了解决布局嵌套问题，Android推出了约束布局（ConstraintLayout），使用约束布局也可以达到扁平化视图的目的，那么使用Litho的好处是什么呢...Litho可以更好地实现复杂布局。约束布局虽然可以实现扁平效果，但是它使用了大量的约束来固定视图的位置。随着布局复杂程度的增加，约束条件变得越来越多，可读性也变得越来越差。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
