XZ_Swift之苹果原生自动布局的使用
来源:互联网 发布:oracle数据库培训 编辑:程序博客网 时间:2024/05/21 11:09
- 自动布局核心公式
“view1.attr1 = view2.attr2 * multiplier + constant”
核心概念:即 任何一个视图 的 属性 都可以 参照 其他视图 的 某一个属性 乘以 乘积 加上一个 常数
relatedBy relation (等于/大于等于/小于等于)
constant(在x轴:负数向左,正数向右;在y轴:负数向上,正数向下) - 自动布局构造函数
self.addConstraint(NSLayoutConstraint.init(item: 视图,attribute: 约束属性,relatedBy: 约束关系,toItem: 参照视图,attribute: 参照属性,multiplier: 乘积,constant: 约束数值))
- 如果指定 宽 / 高 约束
-参照视图设置为 nil
-参照属性选择 .notAnAttribute - 自动布局类函数
self.addConstraint(NSLayoutConstraint.constraints(withVisualFormat: VFL公式,options: [],metrics: 约束数值字典[String: 数值],views: 视图字典[String: 子视图]))
- VFL 可视化格式语言
· H 水平方向
· V 水平方向
· I 边界
· [ ] 包含控件的名称字符串,对应关系在 views 字典中定义
· ( ) 定义控件的宽/高,可以在 metrics 中指定
提示:VFL 通常用于连续参照关系,如果遇到居中对齐,通常直接使用参照;
居中对齐使用VFL不好表示,居中很难说怎么居中,居中使用构造函数比较合适
注意:代码的原生的自动布局,需要取消 autoresizing;
autoresizing 和 autolayout 是不能共存的,纯代码的使用 autoresizing, xib 布局使用 autolayout;先使用下列代码取消autoresizing,自动布局才会起作用。
// 取消自动布局 for subview in subviews { subview.translatesAutoresizingMaskIntoConstraints = false }
使用原生代码实现下图布局
class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // setupUI() } // MARK: - 私有控件 // 圈 private lazy var imgIcon = UIImageView(image: UIImage.init(named: "visitordiscover_feed_image_smallicon")) // 主页图片 private lazy var imgHouse = UIImageView(image: UIImage.init(named: "visitordiscover_feed_image_house")) // 注册按钮 private lazy var btnRegister = UIButton(title: "注册", font: 16, normalColor: .orange, highlightedColor: .black, bgImg: "common_button_white_disable") // 登录按钮 private lazy var btnLogin = UIButton(title: "登录", font: 16, normalColor: .darkGray, highlightedColor: .black, bgImg: "common_button_white_disable")}// MARK: - 设置页面extension ViewController { func setupUI() { view.backgroundColor = .white // 1.添加到视图 view.addSubview(imgIcon) view.addSubview(imgHouse) view.addSubview(btnRegister) view.addSubview(btnLogin) // 2.取消自动布局 for subview in view.subviews { subview.translatesAutoresizingMaskIntoConstraints = false } // 3.给图片添加自动布局 // 1>圈 view.addConstraint(NSLayoutConstraint.init(item: imgIcon, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0)) view.addConstraint(NSLayoutConstraint.init(item: imgIcon, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0)) // 2> 主页 view.addConstraint(NSLayoutConstraint.init(item: imgHouse, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0)) view.addConstraint(NSLayoutConstraint.init(item: imgHouse, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0)) // 3> 登录 view.addConstraint(NSLayoutConstraint.init(item: btnRegister, attribute: .right, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: -30)) view.addConstraint(NSLayoutConstraint.init(item: btnRegister, attribute: .top, relatedBy: .equal, toItem: imgIcon, attribute: .bottom, multiplier: 1, constant: 30)) view.addConstraint(NSLayoutConstraint.init(item: btnRegister, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100)) view.addConstraint(NSLayoutConstraint.init(item: btnRegister, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 35)) // 登录 view.addConstraint(NSLayoutConstraint.init(item: btnLogin, attribute: .left, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 30)) view.addConstraint(NSLayoutConstraint.init(item: btnLogin, attribute: .top, relatedBy: .equal, toItem: btnRegister, attribute: .top, multiplier: 1, constant: 0)) view.addConstraint(NSLayoutConstraint.init(item: btnLogin, attribute: .width, relatedBy: .equal, toItem: btnRegister, attribute: .width, multiplier: 1, constant: 0)) view.addConstraint(NSLayoutConstraint.init(item: btnLogin, attribute: .height, relatedBy: .equal, toItem: btnRegister, attribute: .height, multiplier: 1, constant: 0)) }}
VFL布局格式代码示例
// views: 定义 VFL 中的控件名称和实际名称映射关系// metrics: 定义 VFL 中 () 指定的常数映射关系let views = ["imgMask": imgMask, "btnRegister": btnRegister] as [String : Any]let metrics = ["spacing": -35]// imgMask设置水平方向距离左边界和右边界都是0 addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[imgMask]-0-|",options: [],metrics: nil,views: views))// imgMask设置竖直方向距离上边界0、底部和btnRegister的top向下35, addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[imgMask]-(spacing)-[btnRegister]",options: [],metrics: metrics,views: views))
阅读全文
0 0
- XZ_Swift之苹果原生自动布局的使用
- XZ_Swift之使用苹果原生UIRefreshControl实现下拉刷新和上拉加载
- XZ_Swift之! 、? 和 ?? 的区别
- 谈一谈苹果原生的布局框架 NSLayoutConstraint 和 VFL
- XZ_Swift之控制流
- XZ_Swift之Swift面向对象
- AutoLayout之关于苹果原生约束的探索
- 使用苹果原生的JSON数据解析浅析
- 使用苹果原生API进行二维码和条形码的扫描
- 使用苹果原生API进行二维码和条形码的扫描
- iOS 10 Auto Layout界面自动布局系列3-使用原生NSLayoutConstraint添加布局约束
- Autolayout自动布局的使用
- UITableViewHeaderFooterView的使用+自动布局
- XZ_Swift之Swift基础第一篇
- XZ_Swift之Swift基础第二篇
- JSON数据解析之苹果原生
- Python使用HTTP2实现苹果原生推送
- IOS自动布局的一些使用
- 个人总结的一个中高级Java开发工程师或架构师需要掌握的一些技能
- Bow词袋
- jstl自定义标签实现jsp页面元素权限控制
- mybatis 中的批量添加、删除、修改
- hibernate.cfg.xml配置全解
- XZ_Swift之苹果原生自动布局的使用
- Angular 内置结构型指令
- 调微信App支付接口
- 动态规划--矩阵连乘
- Linux网络编程之UDP
- oracle官方培训地址
- XMLHttpRequest对象
- github部署到生产环境
- Web前端开发精品课HTML CSS JavaScript基础教程第九章课后编程题答案