自动布局

在前面《 电信网络拓扑图自动布局之总线 》一文中，我们重点介绍了自定义 EdgeType 的使用，概括了实现总线效果的设计思路，那么今天话题是基于 HT for Web 的曲线布局（ShapeLayout）。 ShapeLayout 从字面上的意思理解，就是根据曲线路径来布局节点，省去手动布局节点的繁琐操作，还能保证平滑整齐地排布，这是手动调整很难做到的。ShapeLayout 结合前面提到的总线，是最普遍的应用。 http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html 我们先来看看最简单的圆和椭圆是如何实现自动布局的。我们知道在几何学中，圆和椭圆是可以用三角函数老表示，那么我们就可以将圆或者椭圆分成若干份，通过三角函数就可以算出圆或椭圆上的一点，将节点放到计算出来的点的位置，这样就可以达到 自动布局 的效果。具体的核心代码如下： var radians = Math.PI * 2 / nodeCount, w = width / 2, h = height / 2, a = Math.max(w, h), b = Math.min(w, h), x, y, rad, node; if (shape === 'circle') a = b = Math.min(a, b); for (var i = 0; i <

在前面《 电信网络拓扑图自动布局 》一文中，我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用法，我们今天在这边就重点介绍总线的具体实现方案。 在 HT for Web 的连线手册中，有说明可以自定义连线类型，通过 ht.Default.setEdgeType(type, func, mutual) 函数定义，我们今天要描述的总线也是通过这样的方法来实现的。 我们来简单地描述下这个方法，虽然在文档（ http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html ）中已经描述得很详细了，为了下面的工作能够更好的开展，我这边还是再强调下。 这个函数名是 setEdgeType，顾名思义，它是用来自定义一个 EdgeType 的，那么第一个参数 type 就是用来定义这个 EdgeType 的名称，在 Edge 的样式上设置 edge.type 属性为 type 值，就可以让这条连线使用是我们自定义的 EdgeType。 那么第二个参数呢，就是用来计算连线的走线信息的函数，这个回调函数将会传入四个参数，分别是：edge、gap、graphView、sameSourceWithFirstEdge，其中 edge 就是样式上设置 edge.type

在电信网络拓扑图中，很经常需要用到自动布局的功能，在大数据的层级关系中，通过手工一个一个摆放位置是不太现实的，工作量是相当大的，那么就有了自动布局这个概念，来解放布局的双手，让网络拓扑图能够布局出一个优美的图案，当然在一些复杂的布局中，光有自动布局还是不行的，还是需要手工地做些相应的调整，才能让界面图案更加的完美。今天我们来聊聊电信网络拓扑图 HT for Web 在自动布局上面的相关内容。 在 HT for Web 中有提供两种布局方案，一个是 AutoLayout，一个是 ForceLayout。AutoLayout 提供了几套固定的布局算法，让用户根据不同的需求选择不同的布局算法，比较常用的是 circular（圆形布局）和 symmetic（对称布局）两种布局方式。 上图是 circular 圆形布局的效果，可以看出在较复杂的布局上，可以结合连线呈现一个漂亮的布局结果。 上图是 symmetric 对称布局的结果，可以发现在布局上依据中心点呈相对对称的布局，这种布局方案在空间上看起来会比较紧凑些，比较节约空间。 其他的布局类型在这就不一一讲解了，具体的可以查看我们的 AutoLayout 手册： http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html ForceLayout

iOS界面布局之二——初识autolayout布局模型 一、引言 在上一篇博客中介绍了传统的布局方式：autoresizing。随着iphone型号的越来越多，屏幕的标准也更加多样化，通过autoresizing已经不能满足开发的需求，而进行两套布局或者动态代码控制又大大增加了开发者的工作量，autolayout的出现拯救个这一切，它让动态布局变的十分简单便捷。 autoresizing介绍： http://my.oschina.net/u/2340880/blog/423357 。 二、autolayout的设计思想 正如storyboard的设计目的是为了让开发者将更多的精力投入到逻辑实现而不是界面布局一样。autolayout的设计思想是让开发者将布局上更多的精力放在控件关系上而不是坐标。我们只需要关心控件之间的摆放关系，而并不需要关心这是如何实现的。因此你使用autolayout进行布局时，就是在添加一个一个的约束。控件与控件之间的约束，控件与父视图之间的约束。 1、了解几种约束 点击xcode的storyboard文件，在xcode的导航栏上点击Edito，然后选择Pin，可以看到如图，其中是可以添加的约束类型。 Width：对视图宽度的约束 Height：对视图高度的约束 Horizontal Spacing：对视图间水平距离的约束 Vertical Spacing

iOS界面布局之一——使用autoresizing进行动态布局 autoresizing是iOS中传统的界面自动布局方式，通过它，当父视图frame变换时，子视图会自动的做出相应的调整。 一、通过代码进行布局 任何一个view都有autoresizingMask这个属性，通过这个属性可以设置当前view与其父视图的相对关系。我们先来看UIViewAutoresizing这个枚举： typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) { UIViewAutoresizingNone = 0,//默认 UIViewAutoresizingFlexibleLeftMargin = 1 << 0,//与父视图右边间距固定，左边可变 UIViewAutoresizingFlexibleWidth = 1 << 1,//视图宽度可变 UIViewAutoresizingFlexibleRightMargin = 1 << 2,//与父视图左边间距固定，右边可变 UIViewAutoresizingFlexibleTopMargin = 1 << 3,//与父视图下边间距固定，上边可变 UIViewAutoresizingFlexibleHeight = 1 << 4,//视图高度可变

Masonry 源码： https://github.com/Masonry/Masonry Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。 我们先来看一段官方的sample code来认识一下Masonry [view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(superview).with.insets(padding); }]; 看到block里面的那句话: make edges equalTo superview with insets 通过链式的自然语言 就把view1给autolayout好了 是不是简单易懂? 使用 看一下Masonry支持哪一些属性 @property (nonatomic, strong, readonly) MASConstraint *left; @property (nonatomic, strong, readonly) MASConstraint *top; @property (nonatomic, strong, readonly) MASConstraint *right; @property (nonatomic,

iOS界面布局之四——使用第三方库Masonry进行autolayout布局 一、引言 在前面博客，我们讨论了使用iOS原生的框架代码来进行autolayout布局。在使用中，我们会发现，无论是代码量还是结构的清晰度，都十分不能让我们满意，在storyBoard中只需要几条线就可以搞定的事情，用代码缺要写冗余的一大堆。并且有些时候，故事版并不能解决所有问题，某些控件必须我们手写，这样的话，我们就不得不进行代码的autolayout布局，幸运的是，Masonry可以帮助我们轻松愉快的完成这一任务。 使用代码进行autolayout布局： http://my.oschina.net/u/2340880/blog 。 二、使用Masonry 这里说的大部分内容均来自Masonry和官方gitHub，将其内容进行了翻译和解释，源地址如下： https://github.com/SnapKit/Masonry 。 1、布局的控件属性对照 无论是用storyBoard还是代码，在设置控件之间layout关系的时候，我们都需要设置控件的位置属性。在下面的方法中，这个位置属性就是NSLayoutAttribute对象，他决定的控件对象的参照位置： +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute

HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响，操作起来没那么顺畅，体验将会极其差，这不是我们想要的结果，再进一步和图片的绘制进行比较比较，你会发现，绘制图片和绘制文本在性能上不是一个等级的，在性能上绘制图片会好太多。 我们今天就来谈谈 HT for Web 性能相关的问题。在 HT 中，有很多地方可以设置文本，每个节点上面都可以设置两个 label 和两个 note 文本，如果全开启的话，绘制一个节点就要附带绘制 4 个文本，假如说绘制 文本的性能消耗是绘制图片性能消耗的 3 倍的话，附带绘制 4 个文本，就想当与多出 12 倍的性能消耗，这节点以多的话，可想而知，不管是哪个引擎都不可能 hold 得住这样的性能消耗。 既然绘制文本的性能消耗无法避免，那么我们要如何提高系统的整体性能呢？换个思路，绘制文本会有高性能消耗，导致操作上面的延迟和卡顿，那么我是不是可以在操作时不绘制文本呢，将文本绘制所消耗的性能节省下来，用在其他的性能消耗上，这样是不是就可以解决操作延迟和卡顿的问题呢？ 我们不妨来试试，在 GraphView 中添加若干个 node、edge、group 等节点，并且每个节点上都显示文本（包括线条，上图所示）

autolayout自动布局技术在iOS6就已经推出了，但是因为很多人一开始不习惯使用xib编程，而是坚持使用代码布局控件，所以autolayout并没有普及的太快。但是现在随着越来越多的人开始使用xib，怎样适配不同屏幕的尺寸和横竖屏，成了亟待解决的问题，好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。 首先需要说下需求：需要登陆LoginViewController视图View上面的控件居中显示。 下面我就以一个简单的例子，来简要说明使用autolayout的小技巧， （1）拖拉一个View到LoginViewController.xib的视图上面，调整高度为300，我下面都称其为MiddleView吧，如下图所示， 为了让图片垂直 居中 显示，我们可以通过键盘的上（↑）下（↓）按键移动View。 （2）拖两个UITextField和一个UIButton到View上面，同时设置了MiddleView的背景色为LightGray，如下图所示， （3）给MiddleView添加约束，使其水平和竖直居中，先选中MiddleView，然后按照下图操作， （4）给MiddleView添加宽高（width and height）的约束，上面仅仅添加水平和垂直居中，会有警告，这是因为添加的约束还不够，如下图所示，添加宽高的约束， （5