SDAutoLayout使用介绍

阅读原文

SDAutoLayout是一款优秀的自动布局框架,大家或多或少对它有点了解,今天总结下它的基本使用方法,希望对大家能有点帮助

项目示例

1、基本布局

{
    //1、填充一个和父视图一样的滚动视图
    [self.view addSubview:self.listView];
    self.listView.sd_layout
    .spaceToSuperView(UIEdgeInsetsMake(0, 0, 0, 0));
    
    //2、左、上20,长50,宽100
    UIView *view1 = [UIView new];
    view1.backgroundColor = UIColor.redColor;
    [self.listView addSubview:view1];
    view1.sd_layout
    .topSpaceToView(self.listView, 20)
    .leftSpaceToView(self.listView,20)
    .heightIs(100)
    .widthIs(200);
    
    //3、长宽为view1一半,
    UIView *view2 = [UIView new];
    view2.backgroundColor = UIColor.greenColor;
    [self.listView addSubview:view2];
    view2.sd_layout
    .heightRatioToView(view1,.5)
    .widthRatioToView(view1,.5)
    .centerYEqualToView(view1)
    .centerXEqualToView(view1);
    
    //4、距离view1为20,距离右侧屏幕20,顶部、高度和view一样
    UIView *view3 = [UIView new];
    view3.backgroundColor = UIColor.blueColor;
    [self.listView addSubview:view3];
    view3.sd_layout
    .topEqualToView(view1)
    .leftSpaceToView(view1, 20)
    .rightSpaceToView(self.listView, 20)
    .heightIs(view1.height_sd);
}

2、label的父视图根据label的高度自适应

{
    UILabel *label1 = [UILabel new];
    label1.text = @"这个label会根据这些文字内容高度自适应;\n而这个父view会根据label和view具体情况实现高度自适应。\nGot it! OH YAEH! 这个label会根据这些文字内容高度自适应;而这个父view会根据label和view具体情况实现高度自适应。\nGot it! OH YAEH!";
    label1.backgroundColor = UIColor.whiteColor;
    
    UILabel *label2 = UILabel.new;
    label2.backgroundColor = UIColor.greenColor;
    
    UIView *view4 = [UIView new];
    view4.backgroundColor = UIColor.yellowColor;
    [self.listView addSubview:view4];
    [view4 sd_addSubviews:@[label1, label2]];
    
    label1.sd_layout
    .topSpaceToView(view4,20)
    .leftSpaceToView(view4, 20)
    .widthRatioToView(self.listView, .5)
    .autoHeightRatio(0);
    //设置文本内容自适应,如果这里的参数为大于0的数值则会以此数值作为view的高宽比设置view的高度
    
    label2.sd_layout
    .topEqualToView(label1)
    .leftSpaceToView(label1, 20)
    .rightSpaceToView(view4, 20)
    .heightIs(60);
    
    view4.sd_layout
    .leftSpaceToView(self.listView,20)
    .topSpaceToView(lastView, 20)
    .rightSpaceToView(self.listView,20);
    
    // [重点]设置view1高度根据子其内容自适应
    [view4 setupAutoHeightWithBottomView:label1 bottomMargin:20];
}

3、label宽度自适应

{
    UILabel *autoWidthlabel = [UILabel new];
    autoWidthlabel.backgroundColor = randomColor;
    autoWidthlabel.font = [UIFont systemFontOfSize:12];
    autoWidthlabel.text = @"宽度自适应(最大宽度距离父view左、右边距20)宽度自适应(最大宽度距离父view左、右边距20)宽度自适应(最大宽度距离父view左、右边距20)";
    [self.listView addSubview:autoWidthlabel];
    
    autoWidthlabel.sd_layout
    .topSpaceToView(lastView, 20)
    .leftEqualToView(lastView)
    .heightIs(20);
    
    [autoWidthlabel setSingleLineAutoResizeWithMaxWidth:self.view.width - 20*2];
}

4、label高度自适应

{
    UILabel *autoHeightlabel = [UILabel new];
    autoHeightlabel.backgroundColor = randomColor;
    autoHeightlabel.font = [UIFont systemFontOfSize:12];
    autoHeightlabel.text = @"高度自适应(距离父view顶部左边距20,宽度为100)";
    [self.listView addSubview:autoHeightlabel];
    
    autoHeightlabel.sd_layout
    .topSpaceToView(lastView, 20)
    .leftEqualToView(lastView)
    .widthRatioToView(lastView, .5)
    .autoHeightRatio(0);
    
    //设圆角
    autoHeightlabel.sd_cornerRadius = @(5);
}

当然若你的控件是先加载控件,后填入内容就需要在重置内容后对控件进行重新布局:

[view updateLayout];

【注意】SDAutoLayout是延迟布局生效,不是你刚调用.sd_layout对控件进行布局后立即填充内容,它的宽度就是刚布局时的宽度。但是若控件已经加载出来,等大约1秒后你再对它赋值,那么你不对它重新布局,那么它显示的就是最开始的宽度。高度自适应也是如此。

//需要在旋转重新设置
- (void)viewDidLayoutSubviews{
    [super viewDidLayoutSubviews];
    [_autoWidthlabel setSingleLineAutoResizeWithMaxWidth:self.view.width - 20*2];
}

5、设置一排固定间距自动宽度子view

{
    NSInteger count = 4;
    CGFloat margin = 20;
    
    //放button的父视图
    UIView *autoWidthViewsContainer = [UIView new]; 
    
    autoWidthViewsContainer.backgroundColor = [UIColor greenColor];
    
    [self.listView addSubview:autoWidthViewsContainer];
    
    NSMutableArray *temp = [NSMutableArray new];
    
    for (int i = 0; i < count; i++) {
        
        UIView *view = [UIView new];
        
        view.backgroundColor = randomColor;
        
        [autoWidthViewsContainer addSubview:view];
        
        // 设置高度约束,长宽比
        view.sd_layout.autoHeightRatio(.5);
        view.sd_cornerRadius = @(5);
        
        [temp addObject:view];
        
    }
    
    autoWidthViewsContainer.sd_layout
    .leftSpaceToView(self.listView, 20)
    .rightSpaceToView(self.listView,20)
    .topSpaceToView(lastView,20);
    
    // 此步设置之后autoWidthViewsContainer的高度可以根据子view自适应
    [autoWidthViewsContainer setupAutoWidthFlowItems:[temp copy]
                                withPerRowItemsCount:count
                                      verticalMargin:margin
                                    horizontalMargin:margin
                                   verticalEdgeInset:margin
                                 horizontalEdgeInset:margin];
    
    lastView = autoWidthViewsContainer;
}

6、设置一排固定宽度自动间距子view

{
    NSInteger count = 4;
    CGFloat margin = 20;
    CGFloat itemWidth = (self.view.width_sd - 20*2 - (count - 1)*20)/count;
    
    UIView *autoMarginViewsContainer = [UIView new];
    
    autoMarginViewsContainer.backgroundColor = [UIColor lightGrayColor];
    
    [self.listView addSubview:autoMarginViewsContainer];
    
    NSMutableArray *temp = [NSMutableArray new];
    
    for (int i =0; i < count; i++) {
        
        UIView *view = [UIView new];
        
        view.backgroundColor = randomColor;
        
        [autoMarginViewsContainer addSubview:view];
        
        view.sd_layout.autoHeightRatio(0.5);
        view.sd_cornerRadius = @(5);
        
        [temp addObject:view];
        
    }
    
    autoMarginViewsContainer.sd_layout
    .leftSpaceToView(self.listView, 20)
    .rightSpaceToView(self.listView, 20)
    .topSpaceToView(lastView, 20);
    
    //此步设置之后autoMarginViewsContainer的高度可以根据子view自适应
    [autoMarginViewsContainer setupAutoMarginFlowItems:[temp copy] withPerRowItemsCount:count itemWidth:itemWidth verticalMargin:margin verticalEdgeInset:margin horizontalEdgeInset:margin];
    
    lastView = autoMarginViewsContainer;
}

7、设置UIScrollView

  • bottomView设置最后一个视图即可
[self.listView setupAutoContentSizeWithBottomView:lastView bottomMargin:20];

8、cell自定义高度

UITableView设置

  • 设置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return [self.listTableView cellHeightForIndexPath:indexPath model:_itemList[indexPath.row] keyPath:@"title" cellClass:[SDTabelViewCell class] contentViewWidth:[self cellContentViewWith]];
}

- (CGFloat)cellContentViewWith{
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    // 适配ios7横屏
    if ([UIApplication sharedApplication].statusBarOrientation != UIInterfaceOrientationPortrait && [[UIDevice currentDevice].systemVersion floatValue] < 8) {
        width = [UIScreen mainScreen].bounds.size.height;
    }
    return width;
}

UITableViewCell设置

  • 设置布局
self.titleLabel.sd_layout
    .topSpaceToView(self.contentView, 20)
    .leftSpaceToView(self.contentView, 20)
    .widthRatioToView(self.contentView, .5)
    .autoHeightRatio(0);
  • 设置cell高度
[self setupAutoHeightWithBottomView:self.titleLabel bottomMargin:20];

总结

  • 框架使用方便简单,链式设计值得参考
  • 介绍了一些基本使用,还有很多方便的API值得大家挖掘,多看源码,多思考架构思想,让自己的代码写得更加精简
  • 正在使用的朋友多交流经验技巧

以上均是自学过程的积累,学到哪记到哪

原创文章,转载请注明出处,谢谢!

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 我们在上一篇《通过代码自定义不等高cell》中学习了tableView的相关知识,本文将在上文的基础上,利用sto...
    啊世ka阅读 1,481评论 2 7
  • 前几天下店,经理想让我帮她跟顾客讲讲专业养生,经理说这个顾客在这只做面部,不做身体,因为顾客不让她们碰她身体,怕按...
    成晓阅读 1,224评论 2 7
  • 耶,我把这封信写完啵。哈哈哈哈哈,突然想到你躺在我怀里睡着的样子。很安静,看的我很满足了。很有成就感,有人可以在我...
    孤傲博一阅读 521评论 0 1