iOS开发之|iOS开发之 storyboard自动布局
一.自动布局基础知识
- VFL:Visual Format Language 可视化格式语言
H:水平方向
V:水平方向
| 表示父视图 - 本身表示一段距离: -
- 表示指定距离: -距离-
注意:使用自动布局步骤:
1.使用自动布局(autolayout) frame就会失效,就不需要再去设置视图的frame
使用代码自动布局 需要禁用这个属性:
translatesAutoresizingMaskIntoConstraints = NO
2.绑定视图与字符串
3.添加约束 - 可视化语言编译
可视化语言:
H:|-100-[view(>=100)]-100-|
V:|-150-[view(40)]
编译:
横向:距离父视图左侧100 视图本身的宽度最小是100 距离父视图右侧是100
竖向:距离父视图顶部150 视图本身的高度是40 - 常见的两个错误:
1.Unable to parse constraint format: Expected a view or '|' 丢了竖杠。
2.'Unable to parse constraint format: Unable to interpret '|' character, because the related view doesn't have a superview 在布局后把View放在父视图上就会报这个错 要初始化view时 就把它放在父视图上。
UIView *view = [[UIView alloc]init];
view.backgroundColor = [UIColor greenColor];
[self.view addSubview:view];
//1.禁用属性
view.translatesAutoresizingMaskIntoConstraints = NO;
//2.绑定视图和字符串
NSDictionary *views = NSDictionaryOfVariableBindings(view);
//3.添加约束/*
第一个参数:VFL语句
第二个参数:options 基于哪一个选项 (基于哪个方向去计算布局)
第三个参数:metrics:绑定数值(NSNumber)与字符串
第四个参数:绑定视图 与字符串
*/
[self.view addConstraints:[NSLayoutConstraintconstraintsWithVisualFormat:@"H:|-20-[view(>=100)]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[view(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:views]];
【iOS开发之|iOS开发之 storyboard自动布局】2.下面用一个比较复杂的例子来剖析自动布局(在viewDidLoad中调用loadDemo这个方法即可)
- (void)loadDemo{
// 1 创建三个视图 红/绿/蓝/黄/橙色视图
// 红
UIView *redView = [self alive];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 绿
UIView *greenView = [self alive];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
// 蓝
UIView *blueView = [self alive];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 黄
UIView *yellowView = [self alive];
yellowView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:yellowView];
// 橙
UIView *orangeView = [self alive];
orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orangeView];
[self.view addConstraints:[self portraitConstraints:redView :greenView :blueView yellowView:yellowView orangeView:orangeView]];
}// 这样写完全是为了代码的方便使用,创建对象的同时初始化控件
- (UIView *)alive
{
UIView *newView = [UIView new];
newView.translatesAutoresizingMaskIntoConstraints = NO;
return newView;
}- (NSMutableArray *) portraitConstraints:(UIView *)redView :(UIView *)greenView :(UIView *)blueView yellowView:(UIView *)yellowView orangeView:(UIView *)orangeView{
NSMutableArray *array = [NSMutableArray array];
// 注1:红色视图的宽度大于等于10 小于30黄色视图的宽度大于40 小于120水平
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(>=10,<=30)]-20-[greenView(>=40,<=120)]-20-[yellowView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView, greenView, yellowView)]];
// 注2:垂直方向 red高度V:100<= <=160蓝色 V:30<= <=60橙色待定
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[redView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView, blueView, orangeView)]];
// 和注2类似
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[greenView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(greenView, blueView, orangeView)]];
// 和注2类似或许有人会问 为什么得添加黄色和绿色,原因很简单,就是为了满足各个约束,避免造成约束不足
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[yellowView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(yellowView, blueView, orangeView )]];
// 注3:控制blued的宽度
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-120-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView)]];
// 注4:为橙色高度添加约束条件
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView]-20-[orangeView(>=blueView)]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];
// 注4:为橙色添加宽度约束条件
[array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];
return array;
}
推荐阅读
- 欢乐颂2再一次逗笑了我!
- 最动人的风景是人
- 那年花开(4)
- C++中的cout.setf(ios::fixed)是什么意思()
- 一线车讯|预售价15.28-17.48万元,几何G6/M6正式开启预售 | 一线车讯
- axios使用,在vue中的使用(私有和全局,封装api接口模块)
- 薛之谦复合(爱不该是失而复得,而是彼此从未离开)
- 开利网络参与BNI线下资源对接会,与参会来宾共创共赢
- 汽车出行|拥抱科技创新,坦克开辟“越野+新能源”新主场
- 【iOS逆向】某交友App的x-sign算法分析