BearSkill纯代码搭建iOS界面

  • 欢迎相同喜欢动效的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。欢迎大家多多交流。

时间： 2024-10-06 01:39:08

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

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

转载自:http://my.oschina.net/hejunbinlan/blog/529778?fromerr=EmSuX7PR 搭建主流框架界面 源码地址在文章末尾 达成效果 效果图 注:本文部分图标及效果图来自[IT江湖] https://github.com/itjhDev/itjh 导读 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条 我们本文主要是讨论主体框架的搭建,数据暂时没有添

十分钟搭建App主流框架_纯代码搭建(OC)，你不知道的框架

十分钟搭建App主流框架_纯代码搭建(OC),你不知道的框架java学习爱好者 2019-06-11 14:28搭建主流框架界面 需要源码的可以私信我达成效果 效果图ps :需要源码的可以加群,668041364导读 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条我们本文主要是讨论主体框架的搭建,数据暂时没有添加分析做项目的基本流程 1.搭建项目主框架(1)先搭建tabBarController

iOS 用代码搭建UI界面实例

1.背景 学习IOS开发也差不多两个月了,赶鸭子上架的学习模式让我学习比较快,但是真心很累,每天有每天的工作进度,在学习的 时候需要边做一个项目真心有点累,但是看到自己的收获还是值得的.自己原来是做C#开发的,由于公司需求想开展手机业务, 想公司内部的人做,我觉得是机遇,我就选择了iOS. 学习了这么就吐槽下ios的学习环境,很多时候你问别人问题得不会回你,特别是QQ群,所以想写一些比较清楚的教程帮助那些像 我一样摸索前进的新学者更快的进入.我比较常去的一些论坛都是很牛逼的.cocoa Chin

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

欢迎界面,还是比较简单的,一个UIScrollView控件,一个UIPageControl,几个UIImageView即可摆平.在这里光玩这些,就显得诚意不足了.特意拓展一下,再加几个UIButton,可以让这个欢迎界面变成可点击的,可滑动的模块添加在页面中,然后再加一个NSTimer,让它自己隔2秒自己循环滑动着,立马让它变成可以放在主页用于展示主打商品的模块. 下面直接展示可直接运行的Demo,代码都挺简单,这次就不添加注解了. #import "ViewController.h"

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

快速入门 安装 使用 CocoaPods 安装 pod 'Masonry' 推荐在你的在 prefix.pch 中引入头文件: // 定义这个常量,就可以在使用Masonry不必总带着前缀 `mas_`: #define MAS_SHORTHAND // 定义这个常量,以支持在 Masonry 语法中自动将基本类型转换为 object 类型: #define MAS_SHORTHAND_GLOBALS #import "Masonry.h" 使用 初始Masonry 这是使用MASCo

纯代码搭建项目框架

一.修改项目的启动过程 将Main Interface处的main删除 在application:didFinishLaunchingWithOptions:launchOptions:方法中创建window,并且设置根控制器 // 设置整体主题TabBar的tintColor UITabBar.appearance().tintColor = UIColor.orangeColor() // 1.创建window self.window = UIWindow(frame: UIScreen.m

(纯代码)QQ登录界面：

#import "ViewController.h" @interface ViewController () @property (nonatomic, weak) UITextField *_textName; @property (nonatomic, weak) UITextField *_textPassword; @endhttp://www.cnblogs.com/pocket-mood/p/4331303.html @implementation ViewControl

Stroyboard(可视化界面)与纯代码

Stroyboard是苹果在 iOS 5 中引入的新技术,让纯代码变成了一个可视化的界面,让nib.xib有一种更加直观的展现,几十行甚至几百行的代码搞定的一个控件,现在只要动动手指就能完成一个控件了,初学者学到的绝大部分都是教你怎么使用StoryBoard的而不是怎么用纯代码,但是我自己更加喜欢纯代码,总觉得自己敲出来的代码更加能信任,修改起来也会更加简单. 一开始我以为纯代码跟可视化界面其实是一样的,看个人喜好选择用什么方法,后来查了资料发现,如果是一个大的项目,用可视化界面,那么团队就不能

android 纯代码布局

LinearLayout中margin属性小结 java代码控制layout_Margin参数 Andorid 布局layout_margin和padding分析 Android 用纯代码实现复杂界面 [应用代码] Android代码写布局