当前位置： 首页 > article >正文

IOS 22 自定义标题栏（Toolbar）

article 2024/11/17 23:55:29

标题栏实现效果

实现逻辑

自定义标题栏，我们可以基于系统NavigationBar定制，也可以使用控件完全自定义。本文使用控件完全自定义来实现自定义标题栏效果。

SuperToolbarView

创建一个自定义控件SuperToolbarView，可以把SuperToolbarView分成左中右三个部分；创建左中右布局，添加到SuperToolbarView中；对外提供相应的方法，将添加到左中右布局的方法暴露出去，最后将SuperToolbarView添加到界面。

1）SuperToolbarView继承自TGRelativeLayout布局

class SuperToolbarView : TGRelativeLayout{

}

2）初始化SuperToolbarView，必须要重写required init?(coder: NSCoder) {}，便于在可视化布局中使用。

class SuperToolbarView : TGRelativeLayout{
    
    init() {
        super.init(frame: CGRect.zero)
        initViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initViews()
    }
    
    func initViews(){
    }
}

3）使用懒加载创建左中右和标题布局

class SuperToolbarView : TGRelativeLayout{
    
    init() {
        super.init(frame: CGRect.zero)
        initViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initViews()
    }
    
    func initViews(){

    }
    
    lazy var leftContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_space = PADDING_MEDDLE
        r.tg_gravity = TGGravity.vert.center
        r.tg_leading.equal(12)
        r.tg_trailing.equal(centerContainer.tg_leading).offset(PADDING_MEDDLE)
        r.tg_height.equal(.fill)
        return r
    }()
    
    lazy var centerContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_width.equal(.wrap)
        r.tg_height.equal(.fill)
        r.tg_gravity = TGGravity.vert.center
        r.tg_centerX.equal(0)
        r.tg_centerY.equal(0)
        return r
    }()
    
    private lazy var rightContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_space = PADDING_MEDDLE
        r.tg_gravity = [TGGravity.vert.center,TGGravity.horz.right]
        r.tg_trailing.equal(12)
        r.tg_leading.equal(centerContainer.tg_trailing).offset(PADDING_MEDDLE)
        r.tg_height.equal(.fill)
        return r
    }()
    
    lazy var titleView: UILabel = {
        let result=UILabel()
        result.tg_width.equal(SCREEN_WIDTH - 150)
        result.tg_height.equal(.wrap)
        result.numberOfLines=1
        result.textAlignment = .center
        result.font = UIFont.systemFont(ofSize: TEXT_LARGE3)
        result.textColor = .colorOnSurface
        return result
    }()
}

4）设置SuperToolbarView宽高，并将左中右布局添加到SuperToolbarView中，默认将标题添加到中间布局。

class SuperToolbarView : TGRelativeLayout{
    
    init() {
        super.init(frame: CGRect.zero)
        initViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initViews()
    }
    
    func initViews(){
        tg_width.equal(.fill)
        
        //系统导航栏高度是44，但看着太低了，所以增大
        tg_height.equal(50)
        
        //左侧按钮容器
        addSubview(leftContainer)
        
        //标题容器
        addSubview(centerContainer)
        centerContainer.addSubview(titleView)
        
        //右侧按钮容器
        addSubview(rightContainer)
    }

    
    lazy var leftContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_space = PADDING_MEDDLE
        r.tg_gravity = TGGravity.vert.center
        r.tg_leading.equal(12)
        r.tg_trailing.equal(centerContainer.tg_leading).offset(PADDING_MEDDLE)
        r.tg_height.equal(.fill)
        return r
    }()
    
    lazy var centerContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_width.equal(.wrap)
        r.tg_height.equal(.fill)
        r.tg_gravity = TGGravity.vert.center
        r.tg_centerX.equal(0)
        r.tg_centerY.equal(0)
        return r
    }()
    
    private lazy var rightContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_space = PADDING_MEDDLE
        r.tg_gravity = [TGGravity.vert.center,TGGravity.horz.right]
        r.tg_trailing.equal(12)
        r.tg_leading.equal(centerContainer.tg_trailing).offset(PADDING_MEDDLE)
        r.tg_height.equal(.fill)
        return r
    }()
    
    lazy var titleView: UILabel = {
        let result=UILabel()
        result.tg_width.equal(SCREEN_WIDTH - 150)
        result.tg_height.equal(.wrap)
        result.numberOfLines=1
        result.textAlignment = .center
        result.font = UIFont.systemFont(ofSize: TEXT_LARGE3)
        result.textColor = .colorOnSurface
        return result
    }()
}

5）对外暴露添加内容到左中右布局的方法。

class SuperToolbarView : TGRelativeLayout{
    
    init() {
        super.init(frame: CGRect.zero)
        initViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initViews()
    }
    
    func initViews(){
        tg_width.equal(.fill)
        
        //系统导航栏高度是44，但看着太低了，所以增大
        tg_height.equal(50)
        
        //左侧按钮容器
        addSubview(leftContainer)
        
        //标题容器
        addSubview(centerContainer)
        centerContainer.addSubview(titleView)
        
        //右侧按钮容器
        addSubview(rightContainer)
    }
    
    @discardableResult
    /// 添加左侧菜单
    func addLeftItem(_ data:UIView) -> SuperToolbarView {
        leftContainer.addSubview(data)
        return self
    }
    
    /// 中间容器添加控件
    @discardableResult
    func addCenterView(_ data:UIView) -> SuperToolbarView {
        //隐藏标题
        titleView.hide()
        
        centerContainer.addSubview(data)
        return self
    }
    
    /// 添加右侧菜单
    @discardableResult
    func addRightItem(_ data:UIView) -> SuperToolbarView {
        rightContainer.addSubview(data)
        return self
    }
    
    lazy var leftContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_space = PADDING_MEDDLE
        r.tg_gravity = TGGravity.vert.center
        r.tg_leading.equal(12)
        r.tg_trailing.equal(centerContainer.tg_leading).offset(PADDING_MEDDLE)
        r.tg_height.equal(.fill)
        return r
    }()
    
    lazy var centerContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_width.equal(.wrap)
        r.tg_height.equal(.fill)
        r.tg_gravity = TGGravity.vert.center
        r.tg_centerX.equal(0)
        r.tg_centerY.equal(0)
        return r
    }()
    
    private lazy var rightContainer: TGLinearLayout = {
        let r = TGLinearLayout(.horz)
        r.tg_space = PADDING_MEDDLE
        r.tg_gravity = [TGGravity.vert.center,TGGravity.horz.right]
        r.tg_trailing.equal(12)
        r.tg_leading.equal(centerContainer.tg_trailing).offset(PADDING_MEDDLE)
        r.tg_height.equal(.fill)
        return r
    }()
    
    lazy var titleView: UILabel = {
        let result=UILabel()
        result.tg_width.equal(SCREEN_WIDTH - 150)
        result.tg_height.equal(.wrap)
        result.numberOfLines=1
        result.textAlignment = .center
        result.font = UIFont.systemFont(ofSize: TEXT_LARGE3)
        result.textColor = .colorOnSurface
        return result
    }()
}

BaseTitleController

封装BaseTitleController，将SuperToolbarView添加到界面。

class BaseTitleController : BaseLogicController{
    
    override func initLinearLayoutSafeArea() {
        super.initLinearLayoutSafeArea()
        prepareInitToolbar()
    }
    
    func prepareInitToolbar() {
        if isAddToolBar() {
            initToolbar()
        }
    }
    
    func isAddToolBar() -> Bool {
        return true
    }
    
    func initToolbar() {
        superHeaderContentContainer.addSubview(toolbarView)
        //添加返回按钮
        if navigationController?.viewControllers.count != nil && navigationController?.viewControllers.count != 1 {
            let r = addLeftImageButton(R.image.arrowLeft()!.withTintColor())
            r.tag = VALUE10
        }
    }
    
    @discardableResult
    /// 添加左侧图片按钮
    /// - Parameter data: <#data description#>
    func addLeftImageButton(_ data:UIImage) -> QMUIButton {
        let leftButton=ViewFactoryUtil.button(image: data)
        leftButton.addTarget(self, action: #selector(leftClick(_:)), for: .touchUpInside)
        toolbarView.addLeftItem(leftButton)
        return leftButton
    }
    
    /// 添加右侧图片按钮
    func addRightImageButton(_ data:UIImage) {
        let rightButton = ViewFactoryUtil.button(image: data)
        rightButton.addTarget(self, action: #selector(rightClick(_:)), for: .touchUpInside)
        toolbarView.addRightItem(rightButton)
    }
    
    @discardableResult
    /// 添加右侧按钮
    /// - Parameter data: <#data description#>
    func addRightButton(_ data:String) -> QMUIButton{
        let rightButton = ViewFactoryUtil.linkButton()
        rightButton.setTitle(data, for: .normal)
        rightButton.setTitleColor(.colorOnSurface, for: .normal)
        rightButton.addTarget(self, action: #selector(rightClick(_:)), for: .touchUpInside)
        rightButton.sizeToFit()
        toolbarView.addRightItem(rightButton)
        return rightButton
    }
    
    /// 左侧按钮点击方法
    /// - Parameter sender: <#sender description#>
    @objc func leftClick(_ sender:QMUIButton) {
        if sender.tag == VALUE10 {
            navigationController?.popViewController(animated: true)
        }
        
    }
    
    /// 右侧按钮点击方法
    /// - Parameter sender: <#sender description#>
    @objc func rightClick(_ sender:QMUIButton) {
    }
    
    lazy var toolbarView: SuperToolbarView = {
        let r = SuperToolbarView()
        return r
    }()
}

http://www.kler.cn/a/292067.html

相关文章：

  • 2024140读书笔记|《作家榜名著：生如夏花·泰戈尔经典诗选》——你从世界的生命的溪流浮泛而下，终于停泊在我的心头
  • 在Node.js中如何使用TypeScript
  • ubuntu安装 Pycharm
  • 微信小程序 https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中
  • c++原型模式（Prototype Pattern）
  • [Linux]多线程详解
  • 代码随想录 -- 二叉树 -- 翻转二叉树
  • Linux--目录与文件操作函数
  • Leetcode JAVA刷刷站（105）从前序与中序遍历序列构造二叉树
  • SpringBoot 集成 kafka，并消费历史事件
  • Hive 安装
  • 如何选到好的宠物空气净化器，用哪款宠物空气净化器比较好？
  • 【C++】list底层的模拟实现
  • 10 先序遍历创建二叉树
  • PHP一站式解决方案高级房产系统小程序源码
  • WebSocket的详细介绍（打开你对WebSocket的认识）
  • 【openwrt-21.02】T750 openwrt MT7916 WPS PBC功能实现
  • 关于cookie和session的直观讲解（二）
  • 基于 Konva 实现Web PPT 编辑器（二）
  • 二维高斯函数的两种形式
  • iOS——weak修饰符的学习补充
  • flutter和android原生 界面显示的原理是什么，有什么异同。
  • 利用Python脚本批量管理Linux服务器部署服务
  • html+css网页设计 合十文化2个页面
  • c++ 定义函数
  • 为什么要有mybatis？——mybatis