内容简介:级别: ★★☆☆☆标签:「iOS布局」「iOS autoresizing」「autoresizingMask」作者: Xs·H
级别: ★★☆☆☆
标签:「iOS布局」「iOS autoresizing」「autoresizingMask」
作者: Xs·H
审校:QiShare团队
在沐灵洛 线下分享 iOS UIButton根据内容自动布局 时,有和前端同学讨论到iOS的常用布局方式。讨论过程十分热闹,不容易记录,但作者认为讨论结果有必要记录一下,希望能帮助到一些同学。 作者将iOS常用布局方式归纳为Frame、Autoresizing、Constraint、StackView和Masonry五种,并将逐一介绍。 本篇文章介绍Autoresizing。
autoresizing是iOS较早版本中出现的屏幕适配技术。当时,iOS设备机型少、app界面布局简单,autoresizing可以较好地完成比如横竖屏之类的视图适配需求。在QiShare的项目中,autoresizing常与frame结合着使用来达到某些适配效果。比如,与上篇文章对比,用autoresizing可以更快速地实现浅灰色contentView完全覆盖self.view并与之一起旋转的效果,代码如下。
- (void)viewDidLoad { [super viewDidLoad]; _contentView = [[QiAutoresizingContentView alloc] initWithFrame:self.view.bounds]; _contentView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; _contentView.backgroundColor = [UIColor lightGrayColor]; [self.view addSubview:_contentView]; } 复制代码
在上述代码中,contentView的autoresizingMask属性起到了决定性作用。我们来认识下这个属性。
@property(nonatomic) UIViewAutoresizing autoresizingMask; // simple resize. default is UIViewAutoresizingNone 复制代码
typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) { UIViewAutoresizingNone = 0, UIViewAutoresizingFlexibleLeftMargin = 1 << 0, UIViewAutoresizingFlexibleWidth = 1 << 1, UIViewAutoresizingFlexibleRightMargin = 1 << 2, UIViewAutoresizingFlexibleTopMargin = 1 << 3, UIViewAutoresizingFlexibleHeight = 1 << 4, UIViewAutoresizingFlexibleBottomMargin = 1 << 5 }; 复制代码
contentView的autoresizingMask属性是一个位移枚举UIViewAutoresizing。UIViewAutoresizing将视图分为了LeftMargin(相对于父视图的左边距)、RightMargin(相对于父视图的右边距)、TopMargin(相对于父视图的上边距)、BottomMargin(相对于父视图的下边距)、Width(视图自身的宽)和Height(视图自身的高)6个属性。在不设置autoresizingMask时默认使用UIViewAutoresizingNone赋值。当将autoresizingMask设置为某一个或多个值后,即设定该view的对应属性可以随着父视图的变化而变化。
比如在上述代码中,contentView的autoresizingMask被赋值为UIViewAutoresizingFlexibleWidth和UIViewAutoresizingFlexibleHeight,即设定contentView除了Width和Height可以随着self.view的变化而变化外,其余4个属性都被固定住了,所以能达到预期的效果,如下。
接下来,作者尝试使用autoresizing实现 上篇文章 中4等分的效果,代码如下。
- (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { CGFloat margin = 20.0; CGFloat padding = 20.0; CGFloat width = (self.bounds.size.width - margin * 2 - padding) / 2; CGFloat height = (self.bounds.size.height - margin * 2 - padding) / 2; _subView1 = [[UIView alloc] initWithFrame:CGRectMake(margin, margin, width, height)]; _subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6]; [self addSubview:_subView1]; _subView2 = [[UIView alloc] initWithFrame:CGRectMake(margin + width + padding, margin, width, height)]; _subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6]; [self addSubview:_subView2]; _subView3 = [[UIView alloc] initWithFrame:CGRectMake(margin, margin + height + padding, width, height)]; _subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6]; [self addSubview:_subView3]; _subView4 = [[UIView alloc] initWithFrame:CGRectMake(margin + width + padding, margin + height + padding, width, height)]; _subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6]; [self addSubview:_subView4]; _subView1.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin; _subView2.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin; _subView3.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin; _subView4.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin; } return self; } 复制代码
实现的效果图如下。
观察上图,在旋转屏幕至横屏后,4个subView之间的间距出了问题。 这是因为UIViewAutoresizing枚举中的6个值都是相对于父视图的,不能实现同级视图之间存在约束关系的场景需求。
要实现同级视图之间的约束需求,阅读下篇文章要讲的Constraint会大有帮助。 另外,作者对contentView做了一个缩放动画,可以更好地观察视图的变化情况。具体细节可以在 QiLayoutDemo 中查看。
小编微信:可加并拉入《QiShare技术交流群》。
关注我们的途径有:
QiShare(微信公众号)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 等高布局常用几种方式
- iOS 常用布局方式之Frame
- CSS——把“可以动的盒子”更优雅地展示:③ 常用的“布局”
- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
- 四种方法实现──三栏布局(圣杯布局、双飞翼布局)
- 浅谈CSS三栏布局(包括双飞翼布局和圣杯布局)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C语言常用算法分析
明日科技 / 2012-1 / 39.80元
《C语言学习路线图•C语言常用算法分析》共分为4篇,第1篇为算法基础篇,包括程序之魂——算法、数据结构基础、查找与排序算法、基本算法思想等内容;第2篇为常用算法篇,包括数学算法、矩阵与数组问题、经典算法等内容;第3篇为趣味算法篇,包括数学趣题、逻辑推理题等内容;第4篇为算法竞技篇,包括计算机等级考试算法实例、程序员考试算法实例、信息学奥赛算法实例等内容。 《C语言学习路线图•C语言常用算法分......一起来看看 《C语言常用算法分析》 这本书的介绍吧!