文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints....#import "Masonry.h" 使用 初始Masonry 这是使用MASConstraintMaker创建的约束: /* 注意:view1应首先添加为某个视图的子视图,superview是一个局部变量...如果你给这些属性传递一个常量, Masonry会自动将它们转换为相对于其父视图的相对值: //creates view.left = view.superview.left + 10 make.left.lessThanOrEqualTo...如果你需要一个视图随着父视图的宽度和高度,位置自动变化,你应该同时指定 right,bottom,width,height与父视图对应属性的比例(基于某个尺寸下的相对位置计算出的比例),并且constant...button1 make.center.equalTo(button1) //使 centerX = superview.centerX - 5, centerY = superview.centerY

2.1K50

深入详解iOS适配技术

所以，storyboard和代码是相同的，无论什么视图，凡是可以通过storyboard进行设置的属性，都有与之对应的属性代码，我们也可以使用代码的方式实现。...UIViewAutoresizingFlexibleLeftMargin // 自动弹性的调整与superView左边的距离，保证与superView右边的距离不变。 　　...UIViewAutoresizingFlexibleRightMargin // 自动弹性的调整与superView的右边距离，保证与superView左边的距离不变。 　　...UIViewAutoresizingFlexibleTopMargin // 自动弹性d调整与superView顶部的距离，保证与superView底部的距离不变。 　　...UIViewAutoresizingFlexibleBottomMargin // 自动弹性的调整与superView底部的距离，也就是说，与superView顶部的距离不变。

8.5K70
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    iOS界面布局的核心以及TangramKit介绍

    在相对值类型的尺寸中, 视图某个维度的尺寸所依赖的另外一个视图可以是它的兄弟视图，也可以是它的父视图，也可以是它的子视图，甚至可以是它自身的其他维度。...流式布局和表格布局的区别是，表格布局有明确行的概念，在使用前要添加行再添加列，而流式布局则没有明确行的概念，由布局自动生成行和列。...当子视图的尺寸无法容纳到布局视图的剩余空间时，则会自动寻找一个能够容纳自身尺寸的最佳位置进行浮动停靠。浮动布局里面的子视图并不是有规则的多行多列的排列。...除了自动激发外，我们可以通过手动调用布局视图的setNeedLayout方法来实现布局视图的layoutSubviews调用。...A.tg_centerX.equal(B.tg_right) //A视图的水平中心点和B视图的右边对齐 UIView类型的值其实就是TGLayoutPos的简化版本设置，标识某个方位的位置等于指定视图的相同方法的位置值

    2.2K30

    初窥Masonry

    于是，一个第三方框架Masonry就自然而然的进入了视线，Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法来封装自动布局，简洁明了，具有高的可读性。...否则会报错 mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况 mas_remakeConstraints...则会清除之前的所有约束 仅保留最新的约束 三种函数善加利用 就可以应对各种情况了 */ 让一个View略小于SuperView 这里我们假定让一个View小于它的SuperView每个边界的距离都是10...因为这里的计算是绝对的数值，计算bottom需要小于superView的高度，所以要-10，同理用于right。...可以看出 scrollView的内部已如我们所想排列好了 这里的关键就在于container这个view起到了一个中间层的作用 能够自动的计算UIScrollView的contentSize 横向或者纵向排列等间隙的一组

    62040

    【IOS开发基础系列】Autolayout自动布局专题

    1 简介         bounds是指这个view在它自己坐标系的坐标和大小 而frame指的是这个view在它superview的坐标系的坐标和大小区别主要在坐标系这一块。...虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。这两个应该吻合的，但是这里并没有。 Note：你可能会奇怪，为什么Xcode不为X轴方向自动增加一个约束。...对于TableView等大型视图控件，默认顶行就行，无须手动考虑导航条与状态栏高度；         重点参考IM_RAC项目中，IMSingleChatVC的自动布局设置 4 开发问题汇总 4.1...4.1.2 Constraint可以只使用部分，细节控件可去代码中做 4.1.3 Constraint中设计的布局一定与代码中设计得布局保持一致         使用Storyboard进行布局设计后，...系统运行时会总是以Storyboard中布局来刷新页面，所以代码中设计得布局一定要与Constraint中设计的布局保持一致。

    34940

    iOS动画-CALayer布局属性详解

    本篇主要内容： 1.Frame与Bounds的区别 2.中心点(position)与锚点(anchorPoint) 3.视图与图层的坐标系 一、Frame与Bounds的区别 我们已经知道UIView...的很多布局属性其实都来自于图层；UIView的布局属性包括:frame、bouns、center，分别对应了CALayer中frame、bounds、position。...origin，这就说明修改position与anchorPoint中任何一个属性都不能影响另一个属性，由此我们也可以再次改进公式： frame.origin.x = position.x - anchorPoint.x...锚点动画.gif 三、视图与图层的坐标系 CALayer给不同坐标系之间的图层转换提供了一些工具类方法： - (CGPoint)convertPoint:(CGPoint)p fromLayer:(nullable...)坐标系下的点或者矩形转换为另一个图层(或视图)坐标系下的点或者矩形；开发过程中我们通常操作的对象都是视图，所以下面以视图为例简单演示其用法：首先创建添加两个宽高都是100*100的橙色、紫色视图在控制器的

    2.3K20

    IOS开发系列——Masonry手写Autolayout专题【整理，部分原创】

    否则会报错 mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况 mas_remakeConstraints 则会清除之前的所有约束...的superView 1.1.2 [初级] 让一个view略小于其superView(边距为10) UIView *sv1 = [UIView new]; [sv1 showPlaceHolder]...1.3.2 使用了Masonry布局的控件最好手动释放内存，若有APP自动释放内存，会有延迟，导致页面布局失败 //需要手动释放mas_makeConstraints的内存，若有APP自动释放内存，会有延迟...因此进行子视图布局时，用前者容易挂机。...1.3.4 使用dispatch_get_main_queue保证布局与后续处理的同步 虽然mas_updateConstraints的block回调是顺序执行的，但是布局真正起作用还是放在了main_queue

    79510

    iOS动画-CALayer基础知识

    6.中心点(position)与锚点(anchorPoint) 7.视图与图层的坐标系 一、理解视图与图层 UIView我们都非常熟悉， 但它其实是对于CALayer的一层封装，我们在创建UIView...视图的的职责就是创建并管理这个图层，以确保子视图在层级关系中添加或者被移除的时候，它们的关联图层也同样对应在层级关系树当中有相同的操作。...1.图层与视图的底层关系 下面的图示很好的展示了UIView与CALayer的底层上的区别： ?...主动绘制 我们需要显式的调用-display方法；这不同于UIView，当图层显示到屏幕上时，CALayer不会自动重绘它的内容，CALayer把重绘的决定权交给了开发者； 2.绘制特点 尽管没有使用...)坐标系下的点或者矩形转换为另一个图层(或视图)坐标系下的点或者矩形；开发过程中我们通常操作的对象都是视图，所以下面以视图为例简单演示其用法：首先创建添加两个宽高都是100*100的橙色、紫色视图在控制器的

    1.9K50

    如何把设计图自动转换为iOS代码? 在线等,挺急的!

    这是一篇可能略显枯燥的技术深度讨论与实践文章.如何把设计图自动转换为对应的iOS代码?...我没有详实的数据统计来确认各个iOS开发者的日常开发中,MVC各个层面,具体的时间成本如何;单从我个人角度来说, View布局的拆分与转换,占据了我 70% 以上的时间.我们公司通常是按单个完整任务来拆分工作的...尽管作为一名iOS开发人员,我依然对苹果公司提供的开发技术及其发展方向持谨慎和保守态度.前一段时间,尝试使用 Xib来布局视图,遇到一些坑,但是熟悉之后,也确实比原来单纯基于绝对位置的纯代码布局更灵活些...,下面是我研究的成果: 上图,是一个Xib模块,其中的色块部分,嵌套的是另一个Xib模块.最终显示是,色块会自动被对应的Xib模块替代....目前能得到的效果 视图基于 AutoLayout; 视图自动适配不同屏幕尺寸; 视图完全独立于数据与业务逻辑; 视图严肃仅与父视图有位置关系; 可以将视图模块的元素与模块同名属性自动关联; 仅需知道父视图的宽高

    1.4K60

    iOS-屏幕适配实现（Autoresizing）

    6条线，上下左右以及空间内的两条红色交叉线如下图 上下左右四条红色的线分别表示此视图距离父视图的上下左右边的约束各式多少 中间两条上下交叉的线表示，此视图的高度与宽度是否随着父视图的变化而按比例变化...@property(nonatomic) UIViewAutoresizing autoresizingMask; //是一个枚举值，作用是自动调整子控件与父控件中间的margin(间距)或者子控件的宽高...= 1 与父视图左边间距固定，右边可变 UIViewAutoresizingFlexibleTopMargin = 1 与父视图下边间距固定，上边可变 UIViewAutoresizingFlexibleHeight...= 1 视图高度可变 UIViewAutoresizingFlexibleBottomMargin = 1 与父视图上边间距固定，下边可变 };...可以满足大部分简单的自动布局需求，可是它有一个致命的缺陷，它只能设置子视图相对于父视图的变化，却不能精确这个变化的度是多少，因此对于复杂的精准的布局需求，它就力不从心了

    27510

    iOS自动布局——Masonry详解

    前言 UI布局是整个前端体系里不可或缺的一环。代码的布局是设计语言与用户视觉感受沟通的桥梁，不论它看起来多么简单或是琐碎，但不得不承认，绝大部分软件开发的问题，都是界面问题。...更多的是依靠相对位置。 所幸，iOS为我们提供自动布局的方法，来解决这一困境。 ? image.png 自动布局的基本理念 其实说到本质，它和手动布局是一样的。...obj1.property1 =（obj2.property2 * multiplier）+ constant value 子控件的某一个量一定与另一个控件的某一个量呈线性关系，这就是约束。...效果图 我们注意到，自动布局其实工作分两步： 创建视图的约束 将约束添加到合适的位置 约束关系从上面的描述中，已经非常清晰了。那么如何寻找约束添加的合适位置呢？ ?...至此，我们完成了所有准备，就可以开始愉快的自动布局啦。 以上就是Masonry对iOS自动布局封装的解读。 如有问题，欢迎指正。

    1K20

    Masonry

    翻译： Masonry是一个轻量级的布局框架，它使用更好的语法包装AutoLayout。...Masonry有自己的布局DSL，它提供了一种链式调用的方式来描述NSLayoutConstraints，从而使布局代码更简洁，更易读。 Masonry支持iOS和Mac OS X....为什么需要使用Masonry 首先看下直接用NSLayoutConstraints方式布局视图需要什么操作： 例如：我们需要布局一个视图view1，使他距离父视图上下左右都为10，NSLayoutConstraints...比如举个列子 viewA.left = viewB.right + 10, 因为是viewA与viewB的相对约束，那么约束是添加在viewA与viewB的公共父视图上的，如果viewB是viewA的父视图...addSubview:label]; 不需要初始化的参数可以直接不写，只初始化我们需要的 总结 另外很多人担心自动布局的性能问题，事实上苹果已经在iOS12中对auto layout进行优化： WWDC2018

    1.1K10

    iOS布局之AutoresizingMask和AutoLayout

    superView.frame = CGRectMake(0, 0,200 , 200); 以上代码中我们设置了子视图的宽度随父视图的变化而改变，其效果图如下： ?...image.png 2.然后我们进入size Inspector，在这里我们可以看到与AutoResizing布局属性相关的红色线条，我们在这里选择或者取消红线，就相当于增加或者取消了子视图的自动跟随约束...2.png 二、AutoLayout AutoLayout相比AutoResizing更加实用，是可以完全替代AutoResizing的一种自动布局方式。...从而实现了视图的自动布局。而当我们确定选择使用AutoLayout添加自己的约束的时候，我们必须设置此属性为NO，XIB中这个属性默认是NO。...还有一种就是代码直接添加约束，但是代码自动布局是一件很麻烦的事，我们通常又会借助第三方即Masonry，下章节将会简要介绍Masonry的用法。

    1.9K60

    iOS自动布局——Masonry详解

    代码的布局是设计语言与用户视觉感受沟通的桥梁，不论它看起来多么简单或是琐碎，但不得不承认，绝大部分软件开发的问题，都是界面问题。那么，如何高效的完成UI开发，也是软件行业一直在克服的问题。...更多的是依靠相对位置。 所幸，iOS为我们提供自动布局的方法，来解决这一困境。 3.png 自动布局的基本理念 其实说到本质，它和手动布局是一样的。...对一个控件放在哪里，我们依然只关心它的(x, y, width, height)。但手动布局的方式是，一次性计算出这四个值，然后设置进去，完成布局。...obj1.property1 =（obj2.property2 * multiplier）+ constant value 子控件的某一个量一定与另一个控件的某一个量呈线性关系，这就是约束。...至此，我们完成了所有准备，就可以开始愉快的自动布局啦。 以上就是Masonry对iOS自动布局封装的解读。 如有问题，欢迎指正。

    3K80

    深入剖析Auto Layout，分析iOS各版本新增特性

    自从它发布以来JavaScript，.NET，JAVA，Smalltall和C++都有相应的库。2011年苹果将这个算法运用到了自家的布局引擎中，美其名曰Auto Layout。...它的superview.setNeedsLayout() Deferred Layout Pass 在这个时候主要是做些容错处理，更新约束有些没有确定或者缺失布局声明的视图会在这里处理。...NSLayoutAttributeBaseline 属性 占位符，在与另一个约束的关系中没有用到某个属性时可以使用占位符 NSLayoutAttributeNotAnAttribute 关系 允许将属性通过等式和不等式相互关联...第一种是一个视图是另一个视图的父视图，第二个情况是两个视图在一个窗口下有一个非nil的共同父视图。...block里更新布局让Engine执行导致Ambiguous Layouts这种权重相同冲突崩溃的情况发生。

    1.3K10

    iOS9新特性——堆叠视图UIStackView

    iOS9新特性——堆叠视图UIStackView 一、引言         随着autolayout的推广开来，更多的app开始使用自动布局的方式来构建自己的UI系统，autolayout配合storyBoard...二、在storyBoard上初识StackView         UIStackView是一个管理一组堆叠视图的控制器类视图，所谓堆叠视图时一种平铺式的线性布局方式，不可重叠，布局方向也不可交错，如果你做过...watchOS的开发，你会发现，其实StackView与watchOS中的group十分能相似。...有关被管理视图的添加与移除： //初始化方法，通过数组传入被管理的视图 - (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView...; 与StackView布局设置相关： 1.布局模式： @property(nonatomic) UILayoutConstraintAxis axis; 上面这个属性用于设置布局的模型，枚举如下： /

    2K10

    iOS学习——布局利器Masonry框架源码深度剖析

    iOS开发过程中很大一部分内容就是界面布局和跳转，iOS的布局方式也经历了 显式坐标定位方式 --> autoresizingMask --> iOS 6.0推出的自动布局（Auto Layout）...iOS6.0推出的自动布局实际上用布局约束（Layout Constraint）来实现，通过布局约束（Layout Constraint）可以确定两个视图之间精确的位置的相对距离，为此，iOS6.0推出了...：NSLayoutConstraint-代码实现自动布局。...用Masonry框架进行布局非常简单，主要特点是采用链式语法进行布局，这一点使得我们在使用和代码布局上更为方便，利用Masonry进行布局的前提条件之一是 布局视图必须先被添加到父视图中。...的install方法，该方法关键代码（代码太长，只放关键性代码）如下，我们可以看到其实就是通过iOS系统自带的自动布局约束布局类NSLayoutConstraint进行布局。

    1.5K101
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券