从零开始构建基于Frame布局的iOS应用

从零开始构建基于Frame布局的iOS应用

引用

CSDN

等

8

来源

1.

https://blog.csdn.net/weixin_28746457/article/details/144256501

2.

https://blog.csdn.net/hthutao/article/details/134274001

3.

https://blog.csdn.net/u010713935/article/details/54617983

4.

https://blog.csdn.net/liuxinzhongliubin/article/details/137080613

5.

https://blog.csdn.net/MinggeQingchun/article/details/102677233

6.

https://www.cnblogs.com/xiejw/p/5136667.html

7.

https://tech.meituan.com/2017/02/24/the-future-of-layout.html

8.

https://www.cnblogs.com/LuckyVan/p/9665552.html

在iOS应用开发中，Frame布局虽然古老却依然强大。尽管Auto Layout和Masonry等现代工具逐渐流行，但掌握Frame布局仍然是每个开发者的基本功。本文将带你从零开始，一步步构建基于Frame布局的应用程序，让你深入了解视图的位置和大小控制，为你的iOS开发之路打下坚实的基础。

在iOS开发中，Frame布局通过手动设置视图的origin和size来确定位置，适用于早期设备适配简单的情况。需要指出Frame布局是绝对定位，性能较好但适配复杂。

CGRect结构体

CGRect是Cocoa框架中用于表示二维矩形的结构体，包含四个主要属性：

struct CGRect {
    var origin: CGPoint // (x, y) 对角点位置
    var size: CGSize    // width 和 height
}

struct CGPoint {
    var x: CGFloat
    var y: CGFloat
}

struct CGSize {
    var width: CGFloat
    var height: CGFloat
}

设置视图位置和大小

通过编程方式直接设置frame的值来控制视图的布局。例如，在iOS开发中，可以通过以下方式设置一个视图的位置和大小：

let view = UIView()
view.frame = CGRect(x: 10, y: 20, width: 100, height: 100)
self.view.addSubview(view)

这行代码将视图的左上角放置在距离父视图左边缘10个单位，上边缘20个单位的位置，并将视图的宽度和高度设置为100单位。

使用Autoresizing实现简单适配

随着iOS的发展，苹果公司添加了Autoresizing功能，用来约束父子控件之间的关系，以父控件作为参照进行设置。

let blueView = UIView()
blueView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
blueView.backgroundColor = .blue
self.view.addSubview(blueView)

let redView = UIView()
let redViewH: CGFloat = 30
redView.frame = CGRect(x: 0, y: 170, width: 200, height: redViewH)
redView.backgroundColor = .red
blueView.addSubview(redView)

// 设置自动调整属性
redView.autoresizingMask = [.flexibleTopMargin, .flexibleWidth, .flexibleHeight]

结合Auto Layout进行复杂界面适配

对于复杂界面，可以结合使用Auto Layout与Frame布局来实现更精细的控制。

let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false // 禁用自动转换frame到约束
// 使用Auto Layout定义约束
view.widthAnchor.constraint(equalToConstant: 100).isActive = true
view.heightAnchor.constraint(equalToConstant: 100).isActive = true

// 适当情况下使用frame进行微调
view.frame.origin.y = 20

这种方法结合了CGRect（frame）的直接控制和Auto Layout的灵活适应性，使布局更加符合复杂界面的要求。

性能对比

• Frame布局：直接操作视图坐标，性能最佳（O(n) 复杂度），但代码维护成本高；
• AutoLayout：iOS 12 前性能较差（O(n²) 复杂度），iOS 12+ 优化后性能接近 Frame 布局。

开发建议

• 当界面简单且设备适配要求不高时，可以使用Frame布局
• 对于复杂界面或需要高度自适应的场景，推荐使用Auto Layout
• 在ViewDidLoad中使用自动布局时，需要在ViewDidLayoutSubViews中获取更新后的frame

注意事项

• Frame布局在iOS12前性能优于Auto Layout
• 在ViewDidLoad中使用自动布局时，需要在ViewDidLayoutSubViews中获取更新后的frame

通过以上内容，相信你已经掌握了Frame布局的核心知识。在实际开发中，Frame布局和Auto Layout各有优劣，选择合适的工具才能事半功倍。希望这篇文章能帮助你在iOS开发的道路上更进一步。