Masonry布局ScrollerView以及一些复杂的布局

这是我的第一篇简书,随便写写,记录下Masonry布局的一些常用技巧!

这里要是有不了解Masonry的同学,请自行百度!

1.Masonry布局scrollerView


scrollerVIew

之间在第一次接触Masonry布局scrollerView的时候依然会想着先赋值scrollerView.contentSize,但是Masonry布局的视图你是无法第一时间拿到frame,需要在合适的时候[self layoutIfNeeded]视图才会完成布局得到frame。并且还要根据数据大小来设置Size的height或是Width。现在回头想想着实有些愚蠢。正确的Maonry布局scrollerView可以不用设置contentSize属性,是需要在scrollerView上在覆盖一层contentView,并对contentView进行合理布局。

@property  (nonatomic,strong)      UIScrollView    *scroller;

@property  (nonatomic,strong)      UIView               *scrollerContentView;

下面是scrillerContentView的Masonry布局代码

self.scrollerContentView = [[UIView alloc]init];

[self.scroller addSubview:self.scrollerContentView];

mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.mas_equalTo(weakSelf.scroller);

make.height.mas_equalTo(weakSelf.scroller);

}];

这里需要注意了,若你的scrollerView是支持横向滑动的,这么写 “make.height.mas_equalTo(weakSelf.scroller)" 没错,此时scrollerView.contentSize的高是固定的。倘若你的scrollerView支持竖直方向滑动,则应该对width添加约束,此时长度是固定的,应该写成“make.width.mas_equalTo(weakSelf.scroller)"。这里算是完成了对scrollerContentView的布局。

接下来是scrollerView上的子视图的布局。

所有的子视图都添加到scrollerContentView上面,然后添加约束,这都不难。关键的是对最后的一个子视图的约束。做到子视图对scrollerContentView的上下左右都有约束,这样才能确定scrollerContentView的位置和大小。

[self.scrollerContentView addSubview:bgView];

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.bottom.mas_equalTo(weakSelf.scrollerContentView);

weakSelf.lastBgView ? (make.left.mas_equalTo(weakSelf.lastBgView.mas_right).offset(10 * LAYOUT_WIDTH)) : (make.left.mas_equalTo(weakSelf.scrollerContentView));

make.width.mas_equalTo(180 * LAYOUT_WIDTH);

i == dataArr.count - 1 && i > 0 ? (make.right.mas_equalTo(weakSelf.scrollerContentView)) : nil;

}];

上面的背景是我循环创建子视图bgView添加到scrollerContentView上面,然后Masonry添加约束。可以看到这行代码:

“i == dataArr.count - 1 && i > 0 ? (make.right.mas_equalTo(weakSelf.scrollerContentView)) : nil;”

在布局最后一个子视图的时候添加了子视图的右边对scrollerContentView的右边的约束。(这里我是横向滑动的scrollerView,若是竖直方向滑动的scroller应该对子视图的top或是bottom对scrollerContentView进行约束),这样算是完成了对scrollerView的Masonry布局。

2.两个非对称的视图居中


视图居中

需求就是这样:厨师帽子的图标和“名厨推荐”的标签居中。

其实布局很简单,创建一个容器View,图标和标签都添加到容器view上面。容器View对父视图的布局是center.x与父视图无偏差(这个是关键),其他约束能确定容器View位置即可。容器View的子视图的布局思想和布局scrollerContentView的思想一样,做到对容器的上下左右都有布局,这样就能确定容器View的大小。

下面的代码:

UIView *bgView = [[UIView alloc]init];         //这个是容器View

[titlebgView addSubview:bgView];

self.titleImageView = [[UIImageView alloc]init];      //子视图图标

[bgView addSubview:self.titleImageView];

[self.titleImageView mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.top.bottom.mas_equalTo(bgView);

make.height.width.mas_equalTo(25 * LAYOUT_WIDTH);

}];

self.titleLabel = [[UILabel alloc]init];      //子视图标签

self.titleLabel.textColor = [UIColor blackColor];

self.titleLabel.font = [UIFont systemFontOfSize:15];

[bgView addSubview:self.titleLabel];

[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.mas_equalTo(weakSelf.titleImageView.mas_right).offset(5 * LAYOUT_WIDTH);

make.centerY.mas_equalTo(weakSelf.titleImageView);

make.right.mas_equalTo(bgView);

}];

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {

make.center.mas_equalTo(titlebgView);

}];

3.搜索记录,标签等布局


标签视图

像这种大小不一的标签视图,现在的应用上面还是比较常见的,想搜索记录,推荐,类别分类的功能模块上都有可能用到。这里的难点就在对标签长度的以及换行的计算;算了我直接上代码(为什么我看人家的代码五颜六色的,我的却是黑白的❓蛋疼的很) 我直接上代码截图了!

代码片段1

这里我先是对标签视图的组头标签也就是图片“标签视图”的“title-0"和”title-1"的创建和约束。这里我定义了一个UIButton *lastBtn 来记录title下面当前所创建的最后一个子标签。

"lastBtn ? (make.top.mas_equalTo(lastBtn.mas_bottom).offset(10 * LAYOUT_HEIGHT)) : (make.top.mas_equalTo(weakSelf).offset(5 * LAYOUT_HEIGHT))"

可以看到 lastBtn为nil的话,说明title标签为第一个,添加约束"make.top.mas_equalTo(weakSelf).offset(5 * LAYOUT_HEIGHT)" ;

lastBtn被赋值的话说明已经有子标签创建,并且为当前的最后一个,故添加约束"make.top.mas_equalTo(lastBtn.mas_bottom).offset(10 * LAYOUT_HEIGHT)"

这里完成对组头标签的布局。

代码片段2

这里是在创建组头标签的循环里嵌套循环创建子视图和布局的代码,也是重点。 我这里先是标记了一个长度currentWidth,这个长度代表的是当前创建的这个子标签的起始长度,可以理解为子标签的 origin.x,用这个currentWidth将子标签的width加起来对换行进行判断。

"CGFloat BtnW = [btn.titleLabel.text sizeWithFont:btn.font].width" 这里可以算出文字所占的长度,即为标签长度。在布局中判断是否超出父视图长度,随后添加约束。

在最后别忘了将lastBtn更新为当前的标签按钮,以及更新currentWidth。

代码片段3

最后添加黑色确定按钮的约束,还是那句话"做到父视图的上下左右的约束完整"。

3张代码片段图片拼起来就是完整的布局代码。

第一次写简书,不足请谅解!(原谅我,我会努力的)

Masonry还有很多NB的地方,我也是在学习中,上面的代码要是不足之处请指出,若有不理解的地方请联系我:

163邮箱

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • [置顶]iOS - Masonry使用中的一些整理 标签:iOS资源大全iOS常用方法iOS学习资料Masonry...
    DreamMakerSky阅读 3,155评论 0 4
  • Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有高可读性...
    3dcc6cf93bb5阅读 1,753评论 0 1
  • (一)Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布...
    木易林1阅读 2,316评论 0 3
  • 昨日沪深两市双双震荡上涨,指数全天的运行情况比较好,资金净流出二十几个亿,资金净流出不多,中小板块虽然没有什么热点...
    老张财经阅读 81评论 0 0
  • 一顿饭的功夫,手机里播放微课或者音乐或者精彩电影短片或者是看都看不完的订阅号。我利用这个时间学习一些对我有用没用的...
    Calm的大鹿阅读 538评论 0 0