• 欢迎相同喜欢动效的project师/UI设计师/产品增加我们
  • iOS动效特攻队–>QQ群:547897182
  • iOS动效特攻队–>熊熊:648070256

浅谈一下

关于iOS兼容布局一直都是开发人员经常面对的问题,随着代码量的增加,非常多人也有了一套自己的布局理论。本人也做了不少项目。開始用的Storyboard,xib。约束布局。由于是做的大多是应用型App。对于横竖屏的切换不是非常多。所以约束的长处我们用的非常少。

随着项目变的越来越大,每次需求变动修改或者复用界面时都会有无必要的触碰到之前设置好的约束,结果非常easy导致约束crash。布局乱的一塌糊涂。找了半天也不一定能完美解决反而经常浪费了不少时间。

后来就開始基于约束布局的理念,自己整理了一套布局方式。

而且整理了一些经常使用的布局方法。上传到自己的Pod里面。

Pods里面另一些其它方法,本文暂不讨论。仅仅说布局这一块。

BearSkill方法展示

BearSkillPod名称:BearSkill



演示Demo下载地址:https://github.com/BearRan/BearSkillDemo

这是关于布局的方法



我们先来看一下BearSkill里面有哪些布局方法。

多个子类view布局方法

项目中经常会有多个子类view依照某个方向等间距布局这样的情况。针对这样的情况。特有例如以下四种方法。

一切尽在gif和demo中,大家自己理解下。

demo的界面上也有方法名称和适用场景说明。

1,

/**
* 依据子view自己主动布局 自己主动计算:起始点,结束点。间距(三值相等)
* 说明: 在父类view尺寸不等于需求尺寸时。会显示日志而且取消布局
*/
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center;

2,

/**
* 依据子view自己主动布局 须要设置:起始点,结束点; 自己主动计算:间距
* 说明: 在父类view尺寸不等于需求尺寸时,会显示日志而且取消布局
*/
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd;

3,

/**
* 依据子view自己主动布局 须要设置:间距; 自己主动计算:起始点,结束点
* 说明: 在父类view尺寸不等于需求尺寸时,会显示日志而且取消布局
*/
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center gapDistance:(CGFloat)gapDistance;

4,

/**
* 依据子view自己主动布局 须要设置:起始点,结束点,间距
* 说明: 在父类view尺寸不等于需求尺寸时。会自己主动变化
*/
+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd gapDistance:(CGFloat)gapDistance;

View与View之间的相对布局

在同一图层或者父子类的关系的view中。view之间的位置关系也是我们经常须要设置的,来看demo

假设还是不太清楚怎么使用,每一个代码的最后都有最简使用代码演示样例

经常使用的其它布局參数Set和Get

不一一解释了。都是看了名字就知道的參数

//  Getter

- (CGFloat)x;
- (CGFloat)y;
- (CGFloat)maxX;
- (CGFloat)maxY;
- (CGFloat)width;
- (CGFloat)height;
- (CGPoint)origin;
- (CGSize)size; - (CGFloat)centerX;
- (CGFloat)centerY; //Setter - (void)setX:(CGFloat)x;
- (void)setMaxX:(CGFloat)maxX;
- (void)setMaxX_DontMoveMinX:(CGFloat)maxX; - (void)setY:(CGFloat)y;
- (void)setMaxY:(CGFloat)maxY;
- (void)setMaxY_DontMoveMinY:(CGFloat)maxY; - (void)setWidth:(CGFloat)width;
- (void)setHeight:(CGFloat)height;
- (void)setOrigin:(CGPoint)point;
- (void)setOrigin:(CGPoint)point sizeToFit:(BOOL)sizeToFit;
- (void)setSize:(CGSize)size; - (void)setCenterX:(CGFloat)x;
- (void)setCenterY:(CGFloat)y; - (void)setWidth_DonotMoveCenter:(CGFloat)width;
- (void)setHeight_DonotMoveCenter:(CGFloat)height;
- (void)setSize_DonotMoveCenter:(CGSize)size;
- (void)sizeToFit_DonotMoveSide:(kDIRECTION)dir centerRemain:(BOOL)centerRemain; /**
* 和父类view剧中
*
* 当前view和父类view的 X轴/Y轴/中心点 对其
*/
- (void)BearSetCenterToParentViewWithAxis:(kAXIS)axis; /**
* 和指定的view剧中
*
* 当前view和指定view的 X轴/Y轴/中心点 对其
*/
- (void)BearSetCenterToView:(UIView *)destinationView withAxis:(kAXIS)axis;

布局逻辑分析

我们来分析下经常使用App的界面



这是QQ iOSclient的好友界面的cell,

1,view3用BearSetCenterToView:(UIView *)destinationView withAxis:(kAXIS)axis这种方法,设置为与cell Y轴居中

2。view1里的两个Label用BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd gapDistance:(CGFloat)gapDistance;这种方法,自己主动在view1中布局。而且view1会自己主动修改自己的尺寸,

3,view1用BearSetCenterToView:(UIView *)destinationView withAxis:(kAXIS)axis这种方法,设置为与左边的图片居中

4,view2里的两个label和view1同理

5。当然。view2也能够直接用“14:28”这个label设置与view3的右上角的相对位置,通过- (void)setMaxX:(CGFloat)maxX;- (void)setY:(CGFloat)y;方法

支付宝口碑界面



1,view1中是4个button,这个界面当然也能够用collectionView搭建。

只是还是说下我这里的布局思路。把四个button放入subviewArray中,设置offStart和offEnd距离,通过+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd;这种方法就可以实现自己主动布局。是不是非常方便呢?后期修改也方便删减代码。

2。view3在view2中,而且view3和view2垂直方向居中。

view3通过- (void)BearSetRelativeLayoutWithDirection:(kDIRECTION)direction destinationView:(UIView *)destinationView parentRelation:(BOOL)parentRelation distance:(CGFloat)distance center:(BOOL)center;一句代码搞定布局位置!



1,这样的界面有多种布局思路。可是基本都还是几乎相同的。左边的图片就不说了。view1和左边图片设置边距。顶部对其。view1内部用+ (void)BearAutoLayViewArray:(NSMutableArray *)viewArray layoutAxis:(kLAYOUT_AXIS)layoutAxis center:(BOOL)center offStart:(CGFloat)offStart offEnd:(CGFloat)offEnd;直接搞定

2。view2这样的思路无非就是把以下的label单独分离出来。view2高度设置为和左側图片高度一样。- (void)setHeight:(CGFloat)height;能够直接设置view的高度

总结

自己一个人整理的,之前也看过别人写的,可能我的这套方法命名规范。代码规范什么的不是非常好。欢迎大家一起来增加,帮忙优化我的这套布局方法。只是这套方法,能满足一般的App中70%以上的界面布局。有什么好的想法或者思路的能够私聊我。QQ:648070256。欢迎大家多多交流。

BearSkill纯代码搭建iOS界面的更多相关文章

  1. 搭建App主流框架_纯代码搭建(OC)

    转载自:http://my.oschina.net/hejunbinlan/blog/529778?fromerr=EmSuX7PR 搭建主流框架界面 源码地址在文章末尾 达成效果 效果图 注:本文部 ...

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

    简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...

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

    本文转载至   http://www.ios122.com/2015/09/masonry/ 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstrain ...

  4. iOS 用代码搭建UI界面实例

    1.背景 学习IOS开发也差不多两个月了,赶鸭子上架的学习模式让我学习比较快,但是真心很累,每天有每天的工作进度,在学习的 时候需要边做一个项目真心有点累,但是看到自己的收获还是值得的.自己原来是做C ...

  5. iOS纯代码制作欢迎界面——UIScrollView, UIPageControl, UIImageView,UIButton, NSTimer

    欢迎界面,还是比较简单的,一个UIScrollView控件,一个UIPageControl,几个UIImageView即可摆平.在这里光玩这些,就显得诚意不足了.特意拓展一下,再加几个UIButton ...

  6. (六十二)纯代码搭建UI

    在Xcode6中,去掉了Empty Application的选项,因此可以通过先创建SingleView,再删除storyboard,并且把工程设置中的main Interface清空. 通过AppD ...

  7. iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController)

    iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController)   这里我们就直接上实例: 一:新建一个项目singleV ...

  8. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

  9. iOS 用代码+Xib搭建UI界面实例

    1.背景 有些我们不能只用代码去构建界面,代码是万能的,你用其他方式可以实现的界面,用代码也一定能 实现,但是我们没必要这样做,有的时候用xib会是更好的选择,代码和xib的优劣地方我们得知道,为了 ...

随机推荐

  1. svn cleanup失败

    今天用SVN的时候出现被锁定的情况,既不能更新代码也不能提交. 解决方法如下: 1. 在被锁定的文件夹上点右键,找到并点击Clean up菜单项 2. 在Cleanup对话框中勾选“Break loc ...

  2. Git 环境设置(安装)

    在使用Git之前,必须安装它,并做一些基本配置的变化.下面是步骤在Ubuntu和CentOS Linux安装 Git 客户端. Git客户端安装 如果使用的是GNU/ Linux 发行版Debian基 ...

  3. 微信小程序——收起和查看更多功能

    项目中做一些列表的时候,可能会需要做到 查看更多 及 收起功能,如下图所示: 大概的需求就是默认只显示2条,点击[查看更多]显示全部,点击[收起]还原. 实现的方法千万种.我来讲一下我的实现思路: 1 ...

  4. 微信小程序——实现动画循环播放

    今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...

  5. [日志log] 常用log日志记录方式对比和详解

    1.现在都有哪些记录日志的方法 A.java.util.logging.Logger - 使用详解 B.log4j - 使用详解 C.SLF4J(simple logging Facade for J ...

  6. Numpy 的数学和统计方法

    可以通过数组上的一组数学函数对整个数组或某个轴向的数据进行统计计算.sum.mean以及标准差std等 聚合计算(aggregation, 通常叫做约简(reduction))既可以当做数组的实例方法 ...

  7. VIM下的插入模式的相关知识:

    1. 建议:当打错一个单词时,删除掉重新打一遍, 避免在错誤的基础上进行修改: 2. 在插入模式下,可以用一些组合键,它也可以用于VIM 命令模式下,也可以用于 base shell 下: ctrl- ...

  8. MySQL 服务(mysqld)crash

    场景:     数据从 10.165.98.190 自建MySQL同步至 阿里云 MongoDB过程中,mysql服务会崩溃,同步数据失败. 原因分析:     经DBA 分析,10.165.98.1 ...

  9. SpringMVC系列(一)SpringMVC概述和搭建SpringMVC的第一个helloWord入门程序

    一.SpringMVC 概述 • Spring为展现层提供的基于MVC设计理念的优秀的Web框架,是目前最主流的MVC框架之一 • Spring3.0 后全面超越 Struts2,成为最优秀的 MVC ...

  10. MongoDB 3.X JAVA基本操作

    对Collection的操作 import java.util.ArrayList; import java.util.Iterator; import java.util.List; import ...