前言 在MyLayout的6大布局中，每种布局都有不同的应用场景。...且每种布局的子视图的约束机制不一样：线性布局MyLinearLayout、表格布局MyTableLayout、流式布局MyFlowLayout、浮动布局MyFloatLayout这四种布局的子视图之间的约束是通过添加到父布局的先后顺序来决定的...在这些布局中相对布局因为是通过设定视图之间的依赖来建立一种布局约束，因此我们可以用他来构造一些复杂且无规律的界面布局，但其缺点则是太过于依赖约束，导致当界面调整时需要重新设定视图之间的依赖关系(iOS的...在当前的布局库版本中，我们只有线性布局、浮动布局、表格布局、流式布局支持智能边界线的设定，而框架布局、相对布局则是不支持的。...因此我们也可以借助浮动布局来我们各种复杂的界面布局，而且浮动布局也能方便的实现线性布局以及流式布局的能力。
iOS布局体系的概览 在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父布局视图某个位置的框架布局...这些属性和类共同构建了出了一套完整的iOS界面布局系统。下面是这个套界面布局体系的类结构图： ?...这种流式布局的布局机制是，里面的子视图按添加的顺序每行依次从左排列到右，而当布局视图的剩余宽度容纳不下一个要插入的新的子视图的宽度时则会新起一行，重新从左到右继续排列，如果遇到某个子视图的宽度甚至比布局视图还要宽时则总时会压缩子视图的宽度和布局视图的宽度保持一致...这种流式布局的布局机制是，里面的子视图按添加的顺序每列依次从上排列到下，而当布局视图的剩余高度容纳不下一个要插入的新的子视图的高度时则会新起一列，重新从上到下继续排列，如果遇到某个子视图的高度甚至比布局视图还要高时则总时会压缩子视图的高度和布局视图的高度保持一致...六、总结 关于流式布局的功能就介绍到这了，流式布局是MyLayout布局系统里面的5大布局视图之一，主要用于建立那些有规律排列和对齐的视图的应用场景，而且通过使用流式布局来建立界面布局使用的代码量是最少而且最灵活的
简单示例 override func viewDidLoad() { super.viewDidLoad() baiduMap = BMKMapV...
MyLayout功能强大而且简单易用，它集成了iOS Autolayout和Size Classes、android的5大布局体系、HTML/CSS的浮动定位技术以及flex-box和bootstrap...AutoLayout和frame布局的性能比较 参考的文章地址: http://floriankugler.com/2013/04/22/auto-layout-performance-on-ios/...线性布局MyLinearLayout 等价于iOS的UIStackView和android的LinearLayout布局。...MyRelativeLayout 等价于iOS的AutoLayout 和 Android的RelativeLayout布局。...等价于iOS的Size Classes MyLayout布局体系为了实现对不同屏幕尺寸的设备进行适配，提供了对Size Classes的支持。
三个图片的均匀布局 ? 5个图片的均匀布局 需求：在绿色框内实现图片的均匀布局。...思路： 1.先获取绿色框的宽度 2.再获取所有图片的宽度 3.获取图片间的间距（（绿色框的宽度-所有图片的宽度）／（图片数-1）） 4.进行布局 代码： CGFloat allImageW = 0.0f
iOS流布局UICollectionView系列五——圆环布局的实现 一、引言 前边的几篇博客，我们了解了UICollectionView的基本用法以及一些扩展，在不定高的瀑布流布局中...是一个布局抽象基类，我们要使用自定义的布局方式，必须将其子类化，可能你还记得，我们在进行瀑布流布局的时候使用过UICollectionViewFlowLayout类，这个类就是继承于UICollectionViewLayout...类，系统为我们实现好的一个布局方案。...方法来返回我们的布局信息字典，这个前面瀑布流布局的思路是一样的： @implementation MyLayout { NSMutableArray * _attributeAttay; } -...，我们就实现哦圆环布局，随着item的多少，布局会自动调整，如果不是UICollectionView的功劳，实现这样的功能，我们可能要写上一阵子了^_^。
2.png 所以，软件界面开发的核心点即是：如何减少UI设计稿的建模难度和减少建模转化到代码的实现难度 最初iOS提供了平面直角坐标系的方式，来解决布局问题，即所谓的手动布局。...更多的是依靠相对位置。 所幸，iOS为我们提供自动布局的方法，来解决这一困境。 3.png 自动布局的基本理念 其实说到本质，它和手动布局是一样的。...对一个控件放在哪里，我们依然只关心它的(x, y, width, height)。但手动布局的方式是，一次性计算出这四个值，然后设置进去，完成布局。...关于如何解决减少建模转化到代码的实现难度的问题， 开源库 上面的代码，我们可以看到，虽然自动布局已经比手动布局优雅不少了，但它依然行数较多。...至此，我们完成了所有准备，就可以开始愉快的自动布局啦。 以上就是Masonry对iOS自动布局封装的解读。 如有问题，欢迎指正。
前言 UI布局是整个前端体系里不可或缺的一环。代码的布局是设计语言与用户视觉感受沟通的桥梁，不论它看起来多么简单或是琐碎，但不得不承认，绝大部分软件开发的问题，都是界面问题。...image.png 所以，软件界面开发的核心点即是：如何减少UI设计稿的建模难度和减少建模转化到代码的实现难度 最初iOS提供了平面直角坐标系的方式，来解决布局问题，即所谓的手动布局。...更多的是依靠相对位置。 所幸，iOS为我们提供自动布局的方法，来解决这一困境。 ? image.png 自动布局的基本理念 其实说到本质，它和手动布局是一样的。...对一个控件放在哪里，我们依然只关心它的(x, y, width, height)。但手动布局的方式是，一次性计算出这四个值，然后设置进去，完成布局。...至此，我们完成了所有准备，就可以开始愉快的自动布局啦。 以上就是Masonry对iOS自动布局封装的解读。 如有问题，欢迎指正。
iOS界面布局之二——初识autolayout布局模型 一、引言 在上一篇博客中介绍了传统的布局方式：autoresizing。...，它让动态布局变的十分简单便捷。 ...因此你使用autolayout进行布局时，就是在添加一个一个的约束。控件与控件之间的约束，控件与父视图之间的约束。...，现在我们来实现一个效果，借用网上关于autolayout自动布局的一个小例子。...，就在于其布局的精确性，而精确性正是由约束来提供的。
iOS中UI的布局是很重要的，而在前期开发中就要选定好布局的方法，因为这对整个工程乃至于后期的版本维护都有很重要的影响。...这中页面布局方式的思维模式跟Frame完全不同，使用时应跳出Frame的坐标布局思维模式，站在关系依赖布局的思维方式上才可以达到娴熟正确的使用。...IB 原生的AutoLayout 原生的iOS布局,要添加`一个约束`是这样的: NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem...就相当于以上那复杂的代码就要最少写四次。 所以对IOS的AutoLayout进行封装就显得很有必要了。...` ---- 小结 iOS关于UI布局的知识还有很多，至此我列举了一些需要注意的地方，使用的时候是先初始化`new`比较方便，先加载到父视图上后设置相关的属性，然后再进行布局方面的设置，若后加到父试图上
iOS界面布局之三——纯代码的autoLayout及布局动画 一、引言 关于界面布局，apple的策略已经趋于成熟，autolayout的优势在开发中也已经展现的淋漓尽致。...除了使用storyBoard进行布局约束的拖拽，有时我们也需要在代码中进行autolayout的布局设置，Masonry库可以方便的创建约束属性，实际上，我们也没有必要再使用系统原生的代码来创建和设置约束...前几篇布局介绍的链接如下： 使用autoresizing进行界面布局：http://my.oschina.net/u/2340880/blog/423357 初识autolayout布局模型：http:...这个概念，相应的也增加了NSLayoutConstraint这个对象，这个对象就是专门用来进行约束布局的设置对象。...代表是水平的布局还是垂直的布局，H代表水平，V表示垂直，|表示父视图的边沿，-20-表示距离20px，[]内是要布局摆放的视图对象名，()中是约束的尺寸，H下则为宽度，V下则为高度,@后面的数字代表优先级
在IOS的UI设计中也有绝对定位和相对定位，和我们的web前端的绝对定位和相对定位有所不同但又有相似之处。下面会结合两个小demo来学习一下我们IOS开发中UI的绝对定位和相对定位。...在布局中LayoutConstraint和Fram布局方式是不能并存的。...上面说了这么多了，可能说的不太明白，还是那句话，怎么能少的了代码和实例的支持呢，下面会通过屏幕适配的事例来用绝对布局和相对布局同时实现下面的描述效果。 ...相对布局使用起来会比绝对布局要复杂一些，下面先做屏幕适配的例子，图一是在iPhone的4.0寸的效果图， 当我们不做任何处理的时候在3.5寸屏上是显示不出来的如第二张图： ?...那么我如何用相对布局实现上面那种view放大的效果呢，接下来我们需要新建一个工程，因为相对布局和绝对布局在同一个组件中无法并存。
前言 TangramKit是iOS系统下用Swift编写的第三方界面布局框架。...他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局体系以及HTML/CSS中的float和flex-box的布局功能和思想，目的是为iOS开发人员提供一套功能强大、...，因此iOS提出了一套新的界面布局体系：AutoLayout以及SizeClass....iOS系统的原生布局体系里面是通过bounds属性和center属性来进行视图的尺寸设置和位置设置的。...根据排列的方向可以分为垂直线性布局和水平线性布局。线性布局和iOS9上的UIStackView以及Android中的线性布局LinearLayout提供一样的功能。
关于iOS的布局主要有两种方式，分别是AutoResizing和AutoLayout。其中AutoResizing作为一种旧的布局方式，在AutoLayout被推广之后已经很少被使用。...为了更加清晰的了解iOS的布局方式，本篇针对于这两种布局方法进行简要的总结。...一.AutoResizing 我们在使用AutoResizing进行布局的时候，其主要思想就是设置子视图跟随父视图的frame变化而变化。具体的情况，我们可以设置左跟随，右跟随等等。...从而实现了视图的自动布局。而当我们确定选择使用AutoLayout添加自己的约束的时候，我们必须设置此属性为NO，XIB中这个属性默认是NO。...还有一种就是代码直接添加约束，但是代码自动布局是一件很麻烦的事，我们通常又会借助第三方即Masonry，下章节将会简要介绍Masonry的用法。
UIKeyboardTypeNumbersAndPunctuation 3.png 主键盘显示如上图，次键盘显示字母 4.UIKeyboardTypeURL 4.png 适用于网址输入 5.UIKeyboardTypeNumberPad 5.png 只有数字的数字键盘...6.UIKeyboardTypePhonePad 6.png 可用于拨号的数字键盘 7.UIKeyboardTypeNamePhonePad 7.png 主键盘显示如上图，次键盘显示如下图 7.1.png...8.UIKeyboardTypeEmailAddress 8.png 适用于邮件地址输入的键盘 9.UIKeyboardTypeDecimalPad 9.png 带“点”的数字键盘，可用于带有小数点的数字输入...10.UIKeyboardTypeTwitter 10.png 11.UIKeyboardTypeWebSearch 11.png 适用于网页搜索的键盘
目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了，但是在一些变化比较复杂的页面，还是需要通过代码来进行UI开发的。...Masonry是同时支持Mac和iOS两个平台的，在这两个平台上都可以使用Masonry进行自动布局。...在项目中设置的AutoLayout约束，起到对视图布局的标记作用。设置好约束之后，程序运行过程中创建视图时，会根据设置好的约束计算frame，并渲染到视图上。...调用此方法，如果有标记为需要重新布局的约束，则立即进行重新布局，内部会调用updateConstraints方法 - (void)updateConstraints 重写此方法，内部实现自定义布局过程...关于UIView重新布局相关的API，主要用以下三个API： - (void)setNeedsLayout 标记为需要重新布局 - (void)layoutIfNeeded 查看当前视图是否被标记需要重新布局
实现的栅格布局效果示意图 需求示意图 确定需求 由上面的需求示意图可知模块的最小单位是正方形，边长是屏幕宽除去边距间隔后的四等份，而每个模块的样式有小正方形(1:1)、大正方形(2:2)、横长方形(2...:1)、纵长方形(1:2)，动态的根据服务器下发模块样式绘制布局，可以横向滑动，限定为两行的高度。...答案当然是用UICollectionView了，然后自定义流水布局UICollectionViewLayout，主要代码如下：计算记录每一个cell对应的布局属性。...这个样式的栅格布局我已封装集成在WSLWaterFlowLayout 中，详情可以前往下载。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。
iOS界面布局之一——使用autoresizing进行动态布局 autoresizing是iOS中传统的界面自动布局方式，通过它，当父视图frame变换时，子视图会自动的做出相应的调整。...二、nib文件中可视化设置自动布局 在storyboard中我们可以更加轻松的进行autoresizing自动布局。...如果你觉得autoresizing很强大，那么你就太容易满足了，autoresizing可以满足大部分简单的自动布局需求，可是它有一个致命的缺陷，它只能设置子视图相对于父视图的变化，却不能精确这个变化的度是多少...，因此对于复杂的精准的布局需求，它就力不从心了。...但是有一个好消息告诉你，iOS6之后的autolayout自动布局方案，正是解决复杂布局的好帮手，我们在下一遍博客中再进行详细讨论。 专注技术，热爱生活，交流技术，也做朋友。
iOS文本布局探讨之一——文本布局框架TextKit浅析 一、引言 在iOS开发中，处理文本的视图控件主要有4中，UILabel，UITextField，UITextView和UIWebView...其中UILabel与UITextField相对简单，UITextView是功能完备的文本布局展示类，通过它可以进行复杂的富文本布局，UIWebView主要用来加载网页或者pdf文件，其可以进行HTML,...TextKit是一个偏上层的开发框架，在iOS7以上可用，使用它开发者可以方便灵活处理复杂的文本布局，满足开发中对文本布局的各种复杂需求。...官方文档中的一张图片很确切，经常会被用来描述TextKit框架在iOS系统文本渲染中所处的位置。 ?...三、使用TextKit进行文本布局流程 个人理解，TextKit主要用于更精细的处理文本布局以及进行复杂的图文混排布局，使用TextKit进行文本的布局展示十分繁琐，首先需要将显示内容定义为一个
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
