constraintsWithVisualFormat

本文详细介绍了如何使用Auto Layout通过视觉格式语言来定义iOS应用中的视图布局。包括如何使用垂直和水平约束、设置视图间的距离及宽高比等。文章还解释了如何正确地将这些约束添加到视图上。
[NSLayoutConstraint constraintsWithVisualFormat:<visual format string>

options:<options>metrics:<metrics>

views: <views dictionary>

];

constraintsWithVisualFormat:参数为NSString型,指定Contsraint的属性,是垂直方向的限定还是水平方向的限定,参数定义一般如下:

V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离

若是要定义水平方向,则将V:改成H:即可

在接着后面-[]中括号里面对当前的View/控件 的高度/宽度进行设定;

options:字典类型的值;这里的值一般在系统定义的一个enum里面选取

metrics:nil;一般为nil ,参数类型为NSDictionary,从外部传入 //衡量标准

views:就是上面所加入到NSDictionary中的绑定的View

在这里要注意的是 AddConstraints  和 AddConstraint 之间的区别,一个添加的参数是NSArray,一个是NSLayoutConstraint

使用规则

|: 表示父视图

  -:表示距离

  V:  :表示垂直

  H:  :表示水平

>= :表示视图间距、宽度和高度必须大于或等于某个值

    <= :表示视图间距、宽度和高度必须小宇或等于某个值

    == :表示视图间距、宽度或者高度必须等于某个值

@  :>=、<=、==  限制   最大为  1000



1.|-[view]-|:  视图处在父视图的左右边缘内

2.|-[view]  :   视图处在父视图的左边缘

3.|[view]   :   视图和父视图左边对齐

4.-[view]-  :  设置视图的宽度高度

5.|-30.0-[view]-30.0-|:  表示离父视图 左右间距  30

6.[view(200.0)] : 表示视图宽度为 200.0

7.|-[view(view1)]-[view1]-| :表示视图宽度一样,并且在父视图左右边缘内

8. V:|-[view(50.0)] : 视图高度为  50

9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离

为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。

10:  [wideView(>=60@700)]  :视图的宽度为至少为60 不能超过  700 ,最大为1000

11: 如果没有声明方向默认为  水平  V:


这里需要注意的问题是,当我们将一个创建好的约束添加到View上时,添加的目标View要遵循以下的规则:
对于两个同层级View之间的约束关系,添加到他们的父View上。
对于两个不同层级View之间的约束关系,添加到他们最近的共同的父View上
对于有层次关系的两个View之间的约束关系,添加到层次较高的父View上


编写具有两个界面的代码,不同的开发场景和平台有不同的实现方式,下面以基于DuiVision界面库和iOS编程为例进行说明。 ### 基于DuiVision界面库 基于DuiVision界面库开发包含两个界面的程序,需要为每个界面完成资源定义、事件处理类代码编写以及业务逻辑代码编写等内容。 1. **资源定义**:为两个界面分别创建图片资源和xml定义文件。 2. **事件处理类代码**:为每个界面编写对应的事件处理类,处理界面响应消息。 3. **业务逻辑代码**:编写与每个界面相关的业务逻辑代码。 以下是一个简单示例: ```python # 这里只是概念示例,并非真实可运行代码 # 假设存在 DuiVision 相关的类和方法 # 资源定义部分,假设有两个界面的 xml 文件 resource_definition = { "interface1": "interface1.xml", "interface2": "interface2.xml" } # 事件处理类 class Interface1EventHandler: def handle_event(self, event): # 处理界面 1 的事件逻辑 pass class Interface2EventHandler: def handle_event(self, event): # 处理界面 2 的事件逻辑 pass # 业务逻辑代码 def interface1_business_logic(): # 界面 1 的业务逻辑 pass def interface2_business_logic(): # 界面 2 的业务逻辑 pass ``` ### iOS编程 在iOS编程中,使用纯代码通过VFL(Visual Format Language)布局实现两个界面(这里以两个视图为例)。 ```objc // 创建两个视图 UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; // 布局上下两个 view NSArray *redViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redview]-20-|" options:0 metrics:nil views:@{@"redview":redView}]; [self.view addConstraints:redViewH]; // 布局左右两个 view NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==redview)]-20-|" options:0 metrics:nil views:@{@"blueView":blueView,@"redview":redView}]; [self.view addConstraints:blueViewV]; ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值