基于iOS的UI布局,思考大前端的UI布局思想
一、Frame的设置
直接设置子视图的postion和size控制位置和大小。 是ios中基础的布局方式。
拓展: 在web/h5中的布局,默认是流式布局,就是排成一列的方式,里面可以设置relative、resoluation,fixed; 实现了相对,绝对、悬浮的布局功能。
小结: frame 可以实现了h5中的relative、relative以及fixed的功能,不过它默认是静止的,而web/h5是流失布局的。
二、AutoresizingMask 自动调整尺寸 【相对性】
![alt](https://i-blog.csdnimg.cn/blog_migrate/6cce701ee00d0146ce2978d5a3795d6a.png)
AutoresizingMask帮助我们确定(子视图)某个视图相对于父视图进行如何调整,是有限度的
;需要在viewWillLayoutSubviews/viewDidLayoutSubviews中进行认为干预。
存在问题: 同一个视图上有两个子视图,如果确立它们之间的关系? iOS6之前的按照比重, 后来使用AutoLayout进行实现。
三、AutoLayout 自动布局
size class(iOS8引入),如果设备太多,按照固定方式布局进行调整造成工作量很大【现在基本上是去掉了】; Apple简化分辨率概念: 将尺寸抽象为Compact、Regular、Any(紧凑、正常、任意)三种情况。 —— AutoLayout
包含两个部分:1)autoresizingmask 2)contraints
autoresizingmask:描述xib中布局显示的呃逆荣,开发中给开发人员调整参数使用的。给每个view生成一个3段串码,每个预约条件成为唯一的id,并描述该约束相关的view以及约束类型与约束之。 constraints:在固定大小的view上拖拽也使用constraints来进行计算更新会浪费很大。
例子1:UIScrollView上精心自动布局的约数拉取。
通过contentSize来进行获取通过约束对UIScrollView进行撑大;
实践中可能存在的问题:由于Scrollview的contentSize由其subviews确定,其subviews的布局依赖于其父视图Scrollview的边界。 这时矛盾的; 解决:即要么不让UIScrollView的contentSize由其subviews确定,要么就让ScrollView的subviews不依赖其contentSize(即Scrollview的边界) 选择子View设置一个常量和UIScrollView一样。
例子2:UITableView中的重用Cell存在重叠的问题
原因:因为Cell中的重用,没有心的内容覆盖上一次显示的内容,所以,还是回显示上一次的内容
解决:在prepareForReuse 方法中重置变量为默认的状态。- (void)prepareForReuse {
将有关的UI以及变量重置为默认的状态
[super prepareForReuse];
}
约束实现UI布局
1、IB的约束的建立
2、代码布局: 1) 直接添加constraints 2)VFL(Visual format language),苹果自定义的一种布局约束描述的规范。3)UI布局约束库
1、IB实现:
直接在xib上进行对约束的拉取
2、代码约束实现:
1)直接使用约束的方法
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
注意事项:
《1》在使用代码添加约束操作前,先去掉IB中对该VC的XIB中的autolayout勾选项。
《2》Disable 掉 Autoresizing _contentView.translatesAutoresizingMaskIntoConstraints = NO; _topButton.translatesAutoresizingMaskIntoConstraints = NO; _mutipleButton.translatesAutoresizingMaskIntoConstraints = NO; _bottomButton.translatesAutoresizingMaskIntoConstraints = NO;
2)VFL —— 解决原生方法写得过于繁琐
- (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;
3)Masonry库
简化写出更多的场景使用的函数,更加简短 masonry源码阅读
4) PureLayout 用的比较少
基本上分为:(父视图和子视图之间的关系) 边缘关系: Edge ( 边距: 对应边的关系, 边缘关系: 除了边距的关系之外,还对应的是关于左边也可以对应着外面的关系) 数轴的关系: x、-y轴关系和基线的关系 二维关系: 数据的大小,宽和高了;
四、SwiftUI —— FlexBox
盒子布局的方式,在iOS,目前本人还没用过 ,这个地方以后再补充。
本文由 mdnice 多平台发布