Swift代码动态创建NSLayoutConstraint布局

示例效果
这里写图片描述

说明
黄色lable为子view(childView),红色view为父view(parentView)。两者关系为:
childView在距离父控件的左右各20边距处, 高度25。chidView在parentView中垂直方向上居中显示。

注:约束的设置,控件内部约束由自己添加,比如宽高,如果是与其他的
控件约束那么有父控件添加

NSLayoutConstraint参数说明:

/**
 * 创建约束 NSLayoutConstraint  参数 说明:
 * item 自己
 * attribute
 * relatedBy 大于等于 小于等于 等于 ...
 * toItem 另外一个控件
 * attribute 另一个控件的属性
 * multiplier 乘以多少
 * constant : 加上多少
 * NSLayoutConstraint : 某个控件的属性值 等于 另外一个控件的属性值 
                乘以多少 加上多少
 * 添加约束 addConstraint
 */
NSLayoutConstraint(item view1: Any, attribute attr1: NSLayoutAttribute, relatedBy relation: NSLayoutRelation, toItem view2: Any?, attribute attr2: NSLayoutAttribute, multiplier: CGFloat, constant c: CGFloat)

创建子控件

let childView = UILabel()
childView.text = "正在链接服务器"
childView.backgroundColor = UIColor.yellow //背影黄色
childView.textAlignment = .center //文本居中对齐

parentView.backgroundColor = UIColor.red//设置父元素背影红色,方便查看效果

关闭autoresizing

// 关闭autoresizing,不然无效果
childView.translatesAutoresizingMaskIntoConstraints =false

创建约束:

//创建相对父view的左右间距各20
//在约束
let leftConstraint = NSLayoutConstraint(item: childView, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: topStatusBarView, attribute:NSLayoutAttribute.leading, multiplier: 1.0, constant: 20)

//右约束
let rightConstraint = NSLayoutConstraint(item: childView, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: topStatusBarView, attribute:NSLayoutAttribute.trailing, multiplier: 1.0, constant: -20)

let centerConstraint = NSLayoutConstraint(item: childView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: topStatusBarView, attribute:NSLayoutAttribute.centerY, multiplier: 1.0, constant: 0)

//子控件自身高度
let heigtConstraint = NSLayoutConstraint(item: childView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier: 1.0, constant: 25)

//子控件内部自己的属性(高度,自己添加)      
childView.addConstraint(heigtConstraint)

//子元素相对父亲的元素,由父添加
parentView.addConstraints([leftConstraint, rightConstraint, centerConstraint])
SwiftUI中,我们可以使用WKInterfaceController来创建watchOS应用程序的用户界面。在编写代码之前,我们需要首先定义我们的布局。我们可以通过在Interface.storyboard文件中使用图形界面编辑器来实现。一旦我们有了布局,我们可以开始使用SwiftUI的代码来添加它。 首先,我们需要将我们的Interface.storyboard文件命名为Interface.storyboard文件,并将其添加到我们的watchOS应用程序目录中。接下来,我们可以为我们的界面创建一个新的WKInterfaceController子类。在这个类中,我们将定义我们的布局和所有必要的操作和函数。 接下来,我们需要从Interface.storyboard文件中注释的XML中提取我们的布局代码。我们可以在Interface.storyboard文件上右键单击并选择“显示全部内容”,这会打开一个源代码视图。我们需要查找我们的布局代码,并将其粘贴到我们的WKInterfaceController类中。在这里,我们可以使用SwiftUI代码重建界面。 具体而言,我们可以使用SwiftUI的不同容器来创建我们的布局,例如VStack和HStack。我们还可以添加Text,Button,Image等视图来显示文本,响应输入以及显示图像。我们还可以使用SwiftUI的布局编组来实现快捷方式以及滚动视图等功能。 使用SwiftUI添加watchOS应用程序的UI确实需要一些学习曲线,但是一旦熟练掌握,可以很容易地快速设计出优美和交互式的用户界面。 总之,使用SwiftUI和WKInterfaceController可以方便地在watchOS中创建用户友好的应用程序。可以通过编写SwiftUI代码来添加我们的布局。这种方法需要一定的学习曲线,但一旦熟练掌握就能够快速地为我们的watchOS程序添加交互性和美感。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值