iOS创建大小自适应的view

开发中免不了会遇到要定制那种宽高自适应的view。这里做下总结

1. 包括的子view不可滚动(即不包含UIScrollView的别的控件)

这种其实比较好处理。

#import "TestView.h"
#import "Masonry.h"

@interface TestView()

@property (nonatomic, strong) UIView *view1;

@end

@implementation TestView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor redColor];
        [self createSubviews];
    }
    return self;
}

- (void)createSubviews {
    self.view1 = [[UIView alloc]init];
    self.view1.backgroundColor = [UIColor yellowColor];
    [self addSubview:self.view1];
    [self.view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.right.bottom.equalTo(self);
        make.size.mas_equalTo(CGSizeMake(150, 20));
    }];      
}


//ViewController.m中
- (void)viewDidLoad {
    TestView *test = [[TestView alloc]init];
    [self.view addSubview:test];
    [test mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(grayView.mas_bottom).offset(5);
        make.centerX.equalTo(self.view);
    }];
}

可以看到,只需要设置子视图的边距跟父视图相同,然后设置子视图的宽高即可。
但是要注意:在外部给父视图做约束的时候,不要设置跟size相关的属性


可以看到,父视图(红色)和子视图(黄色)大小是一致的。

2.子视图中包括可以滚动的控件(UIScrollView)

比如这个需求:




要弹出一个alert框,然后根据中间文字的长短,来调整整个框的大小!然后给一个最大高度,如果文字超过了这个高度,则为可滚动。

按照上面的思路,给UIScrollview添加约束,UIScrollView的内部放一个UILabel,然后设置label的约束为四边距跟scrollview相同。我们来测试一下:

@interface TestView()

@property (nonatomic, strong) UIView *view1; //头部view
@property (nonatomic, strong) UIView *view2; //底部view
@property (nonatomic, strong) UIScrollView *scrollView; 
@property (nonatomic, strong) UILabel *content;

@end

- (void)createSubviews {
    self.view1 = [[UIView alloc]init];
    self.view1.backgroundColor = [UIColor yellowColor];
    [self addSubview:self.view1];
    [self.view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.right.equalTo(self);
        make.size.mas_equalTo(CGSizeMake(150, 20));
    }];
    
    
    self.scrollView = [[UIScrollView alloc]init];
    self.scrollView.backgroundColor = [UIColor orangeColor];
    [self addSubview:self.scrollView];
    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(self);
        make.top.equalTo(self.view1.mas_bottom);

    }];

    self.content = [[UILabel alloc]init];
    self.content.text = @"按时;的房价阿斯兰的风景按时;大楼附近奥德赛;立方阿萨德管理局ad;管理会计we;了感觉肉而过;阿夫林的快感骄傲的高考哈尔;快给我如果;卡;管理科见到过;拉的积分;阿刘的时间安排温哥华;按时给家里;的设计费;阿刘四大金刚;卡到房管局;利润空间感;为了国家;打了个健康; 光和热涵盖了看法那个卡了人家给旅客进入那个卡了进入高考了人工;的房价阿斯兰的风景按时;大楼附近奥德赛;立";
    self.content.numberOfLines = 0;
    [self.scrollView addSubview:self.content];
    
    CGSize contentSize = [self.content sizeThatFits:CGSizeMake(150, 9999)];
    [self.content mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.size.mas_equalTo(contentSize);
    }];

    self.view2 = [[UIView alloc]init];
    self.view2.backgroundColor = [UIColor greenColor];
    [self addSubview:self.view2];
    [self.view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.bottom.equalTo(self);
        make.top.equalTo(self.scrollView.mas_bottom);
        make.size.equalTo(self.view1);
    }];
    
}

可以看到,已经设置了content的四边距和scrollview一致,然后也给了content一个size。
然后设置scrollview的左边和右边,跟父视图一致。
设置view2的顶部挨着scrollview的底部。
然后view2的底部跟父视图底部一致。
这个思路跟上面1中的,是符合的。
但是结果呢?


可以看到,只有view1和view2,
UIScrollview并没有显示在页面上
可见,这个时候,再使用1的方法就不行了。(如果是我约束设置错了,还请各位大佬批评指正)

所以这里使用了另外一种思路。

给scrollview的高度添加约束,然后强引用为一个属性。然后在content文字高度计算完全之后,重新更新此约束,即可修改scrollview的高度。当然,此时子视图的各个控件之间高度的约束就可以忽略了。

@property (nonatomic, strong) NSLayoutConstraint *heightConstraint;

//这里设置高度约束。初始值为0
    self.heightConstraint = [NSLayoutConstraint constraintWithItem:self.scrollView attribute:(NSLayoutAttributeHeight) relatedBy:(NSLayoutRelationEqual) toItem:nil attribute:(NSLayoutAttributeHeight) multiplier:1 constant:0];
    [self addConstraint:self.heightConstraint];

//此处计算完成之后,更新约束值
    CGSize contentSize = [self.content sizeThatFits:CGSizeMake(150, 9999)];
    [self.content mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.size.mas_equalTo(contentSize);
    }];
    self.heightConstraint.constant = contentSize.height;


此时,可以看到,就能达到我们要的效果。

然后上面的那种弹框中所说的父视图超过最大高度的时候可滚动,可以在获取到高度的时候给约束添加个判断即可:

/**
 内容label修改行间距

 @param contentStr 要展示的内容字符串
 */
- (void)replaceContentUsingSpecificLineSpacingWithString:(NSString *)contentStr {
    NSMutableParagraphStyle *mps = [[NSMutableParagraphStyle alloc]init];
    mps.lineSpacing = 6;
    mps.lineBreakMode = NSLineBreakByWordWrapping;
    
    NSDictionary *contentAttributes = @{
                                        NSParagraphStyleAttributeName: mps,
                                        NSFontAttributeName: [UIFont systemFontOfSize: 13],
                                        };
    NSMutableAttributedString *mas = [[NSMutableAttributedString alloc]initWithString:contentStr attributes:contentAttributes];
    
    
    self.content.attributedText = mas;
    [self layoutIfNeeded];
    
    if (self.content.height < kPxValue(428)) {
        LOG(@"短");
        self.scrollHeightConstraint.constant = self.content.height;
    }else {
        LOG(@"长");
        self.scrollHeightConstraint.constant = kPxValue(428);
        self.contentScrollView.contentSize = CGSizeMake(self.contentScrollView.width,self.content.height);
    }
    
}

当然, 这种效果图,还有一种实现方法:UITextView
这里有一篇文章可供参考
iOS:如何优雅的让UITextView根据输入文字实时改变高度

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