这里介绍一种屏幕适配方法,UIScrollView适配
层级介绍:
self.view{UIScrollView[UIView(子控件1,子控件2,子控件3......)]}
层级就是这样,将滚动视图加入到self.view中,再创建一个UIView(可作为contentView)添加到ScrollView中,子控件加入到contentView中
约束代码:
UIScrollView *scrollV = [[UIScrollView alloc] init];
scrollV.contentSize = CGSizeMake(kScreenW, kScreenH);
scrollV.backgroundColor = [UIColor colorWithRed:0.96 green:0.96 blue:0.96 alpha:1.00];
scrollV.bounces = NO;
scrollV.showsHorizontalScrollIndicator = NO;
[self.view addSubview:scrollV];
UIView *contentView = [[UIView alloc] init];
contentView.backgroundColor = [UIColor whiteColor];
[scrollV addSubview:contentView];
self.contentView = contentView;
UILabel *titleLb = [[UILabel alloc] init];
titleLb.font = [UIFont systemFontOfSize:19];
titleLb.numberOfLines = 0;
titleLb.textColor = [UIColor blackColor];
titleLb.textAlignment = NSTextAlignmentLeft;
[contentView addSubview:titleLb];
self.titleLb = titleLb;
UILabel *authorLb = [[UILabel alloc] init];
authorLb.font = [UIFont systemFontOfSize:14];
authorLb.numberOfLines = 1;
authorLb.textColor = [UIColor lightGrayColor];
authorLb.textAlignment = NSTextAlignmentLeft;
[contentView addSubview:authorLb];
self.authorLb = authorLb;
UILabel *timeLb = [[UILabel alloc] init];
timeLb.font = [UIFont systemFontOfSize:14];
timeLb.numberOfLines = 1;
timeLb.textColor = [UIColor lightGrayColor];
timeLb.textAlignment = NSTextAlignmentRight;
[contentView addSubview:timeLb];
self.timeLb = timeLb;
UIImageView *imageView = [[UIImageView alloc] init];
imageView.contentMode = UIViewContentModeScaleAspectFit;
[contentView addSubview:imageView];
self.iconView = imageView;
UILabel *contentLb = [[UILabel alloc] init];
contentLb.font = [UIFont systemFontOfSize:16];
contentLb.numberOfLines = 0;
contentLb.textColor = [UIColor darkGrayColor];
[contentView addSubview:contentLb];
self.contentLb = contentLb;
[scrollV mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.right.bottom.equalTo(self.view);
}];
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollV);
make.width.mas_equalTo(kScreenW);
}];
[titleLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view).offset(15);
make.top.equalTo(contentView).offset(15);
make.right.equalTo(self.view).offset(-15);
}];
[authorLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(15);
make.left.equalTo(self.view).offset(15);
make.top.equalTo(titleLb.mas_bottom).offset(15);
make.width.equalTo(contentView).multipliedBy(0.4);
}];
[timeLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(15);
make.top.equalTo(titleLb.mas_bottom).offset(15);
make.right.equalTo(self.view).offset(-15);
make.width.equalTo(contentView).multipliedBy(0.4);
}];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view).offset(15);
make.right.equalTo(self.view).offset(-15);
make.top.equalTo(authorLb.mas_bottom).offset(12);
make.height.mas_equalTo(155);
}];
[contentLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view).offset(15);
make.right.equalTo(self.view).offset(-15);
make.top.equalTo(imageView.mas_bottom).offset(15);
make.bottom.equalTo(contentView).offset(-20);
}];
这里的话重点需要点一下的是,contentView不但需要上下左右设置好父类约束,还需要设置一下宽度约束,因为根据约束可知滚动视图的高度是由子控件撑起来的,但是宽度并没有被撑起来,所以我们需要固定contentView的宽度
约束的层级的话就是:
1.滚动视图对于self.view是上下左右等同
2.contentView对于滚动视图是上下左右等同,也必须固定宽度
3.最下面的子控件要设置好到contentView的距离,否则contentView不会被支撑起来,连带的滚动视图也不会支撑起来
效果:
Paste_Image.png Paste_Image.png
网友评论