iOS开发之布局篇

安全区概念

安全区指的是view放置在整个屏幕的可视部分。安全区域是iOS11新提出的。如图所示：

红色区域即是安全区域部分。对于iPhone13，14头部安全区的高度为47，底部安全区的高度为43。

代码实现安全区

//
//  BaseCommonController.swift
//  通用页面布局 比如水平布局，垂直布局，滚动布局，表格布局等
//
//  Created by mac on 2022/11/12.
//

import UIKit
import TangramKit

class BaseCommonController: BaseController {

    // 根容器
    var rootContainer: TGBaseLayout!
    
    
    /// 头部容器
    var superHeaderContainer:TGBaseLayout!
    var superHeaderContentContainer:TGBaseLayout!
    
    /// 底部容器
    var superFooterContainer:TGBaseLayout!
    var superFooterContentContainer:TGBaseLayout!
    
    /// 容器
    var container:TGBaseLayout!
    
    
    /// 初始化页面的垂直布局
    func initLinearLayout()  {
        rootContainer = TGLinearLayout(.vert)
        rootContainer.tg_size(width: .fill, height: .fill)
        rootContainer.backgroundColor = .clear
        view.addSubview(rootContainer)
    }
    
    /// 安全区内的RelativeLayout
    func initRelativeLayoutSafeArea() {
        initLinearLayout()
        
        // header
        initHeaderContainer()
        
        // content
        container = TGRelativeLayout()
        container.tg_size(width: .fill, height: .fill)
        container.backgroundColor = .red
        rootContainer.addSubview(container)
        
        // footer
        initFooterContainer()
        
        
    }
    /// 安全区内的LinearLayout
    func initLinearLayoutSafeArea() {
        initLinearLayout()
        // header
        initHeaderContainer()
        // content
        container = TGLinearLayout(.vert)
        container.tg_size(width: .fill, height: .fill)
        container.backgroundColor = .clear
        rootContainer.addSubview(container)
        // footer
        initFooterContainer()
    }
    /// 头部容器 安全区外，一般用来设置头部到安全区外背景颜色
    func initHeaderContainer() {
        superHeaderContainer = TGLinearLayout(.vert)
        superHeaderContainer.tg_size(width: .fill, height: .wrap)
        superHeaderContainer.backgroundColor = .green
        
        // 头部内容容器，安全区
        superHeaderContentContainer = TGLinearLayout(.vert)
        superHeaderContentContainer.tg_height.equal(.wrap)
        superHeaderContentContainer.tg_leading.equal(TGLayoutPos.tg_safeAreaMargin)
        superHeaderContentContainer.tg_trailing.equal(TGLayoutPos.tg_safeAreaMargin)
        superHeaderContentContainer.tg_top.equal(TGLayoutPos.tg_safeAreaMargin)
        superHeaderContentContainer.backgroundColor = .brown
        
        superHeaderContainer.addSubview(superHeaderContentContainer)
        rootContainer.addSubview(superHeaderContainer)
    }
    /// 底部容器 安全区外，一般用来设置低部到安全区外背景颜色
    func initFooterContainer() {
        superFooterContainer = TGLinearLayout(.vert)
        superFooterContainer.tg_size(width: .fill, height: .wrap)
        superFooterContainer.backgroundColor = .green
        
        // 低部内容容器，安全区
        superFooterContentContainer = TGLinearLayout(.vert)
        superFooterContentContainer.tg_height.equal(.wrap)
        superFooterContentContainer.tg_leading.equal(TGLayoutPos.tg_safeAreaMargin)
        superFooterContentContainer.tg_trailing.equal(TGLayoutPos.tg_safeAreaMargin)
        superFooterContentContainer.tg_bottom.equal(TGLayoutPos.tg_safeAreaMargin)
        superFooterContentContainer.backgroundColor = .brown
        
        superFooterContainer.addSubview(superFooterContentContainer)
        rootContainer.addSubview(superFooterContainer)
    }

}