美文网首页程序员
iOS自定义顶部导航的实现及封装

iOS自定义顶部导航的实现及封装

作者: laotoutou | 来源:发表于2016-12-13 14:40 被阅读381次

效果图如下(有设置懒加载):

自定义顶部导航栏 自定义顶部导航自定义顶部导航 组成结构组成结构

现已将它封装成了一个自定义的AllCustomNav,可根据是否有navigation导航以及是否有tabbar修改AllCustomNav的属性。
假设要在viewController中添加顶部导航:

viewController:

// 没有navigation时
AllCustomNav.YOfNav = 20  //  顶部导航y坐标下移20(状态栏高度为20)
AllCustomNav.edgOfBottom = 0

AllCustomNav:

// 导航栏 y坐标方向 起始高度
static var YOfNav: CGFloat = 64  // 默认有navigation 顶部导航栏下移64(44+20)
    
// 底部内边距 (tabbar高度为49, 可以自行更改)
static var edgOfBottom: CGFloat = 49  // 默认存在tabbar scrollView的子view底部内边距为49

viewController的子控制器需要继承自自定义的AllBasetableViewController ,这个基类中根据AllCustom的静态属性定义了子控制器view的内边距,使子 view能够正常显示在scrollView中:

AllBaseTableViewController:

override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.contentInset = UIEdgeInsetsMake(AllCustomNav.YOfNav + AllCustomNav.heightOfNav, 0, AllCustomNav.edgOfBottom, 0)
        self.tableView.scrollIndicatorInsets = self.tableView.contentInset
        self.view.backgroundColor = UIColor.white
}

同时需要注意应该在viewController中关闭自动配置内边距的属性:

self.automaticallyAdjustsScrollViewInsets = false

然后将AllCustomNav控件添加进来即可:
viewController:

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 手动设置内边距
        self.automaticallyAdjustsScrollViewInsets = false
        
        let childs = addChildVC()
        let titles = ["全部","视频","声音","图片","段子"]
        AllCustomNav.YOfNav = 20
        AllCustomNav.edgOfBottom = 0
        let customnav = AllCustomNav.init(childVC: childs, titles: titles)
        self.view.addSubview(customnav)

    }

    func addChildVC() -> [AllBaseTableViewController] {
        var childVCs = [AllBaseTableViewController]()
        childVCs.append(AllAllViewController())
        childVCs.append(AllVideoViewController())
        childVCs.append(AllVoiceViewController())
        childVCs.append(AllPictureViewController())
        childVCs.append(AllWordViewController())
        for vc in childVCs {
            self.addChildViewController(vc)
        }
        return childVCs
        
    }

AllCustomNav代码地址

相关文章

  • iOS自定义顶部导航的实现及封装

    效果图如下(有设置懒加载): 现已将它封装成了一个自定义的AllCustomNav,可根据是否有navigatio...

  • 小程序bug汇总

    2019-01-30更新 1.关于自定义顶部导航栏Android/IOS高度不一致的问题 小程序可以实现自定义顶部...

  • 封装了一个自定义导航器

    最近发现这种顶部的自定义导航器还是挺常用的, 干脆自己封装了一个. 框架优点: 封装完善, 非常易用! 控制器中只...

  • 自定义顶部导航

    一、设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为...

  • 【微信小程序】自定义顶部导航栏

    一、设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为...

  • Android自定义NavigationController -

    注意: 本文主要介绍安卓自定义顶部导航栏(iOS中成为NavigationBar);写的不尽如人意的地方,请见谅~...

  • 日常问题

    一、iOS11适配问题 1、导航栏问题自定义titleViewiOS11在自定义View上实现: 同样添加导航栏按...

  • flutter 第三天

    今天先实现自定义顶部导航栏 然后设置背景 开始 加油ing finish 这是全部代码 感谢天 感谢地...

  • 仿掘金项目顶部导航

    顶部导航之网站logo 添加导航菜单 导航栏右侧登录注册按钮 头部美化 自定义样式

  • iOS自定义导航栏-导航栏联动(二)

    iOS自定义导航栏-导航栏联动(一)iOS自定义导航栏-导航栏联动(二) 前言 最近通过对一些APP的观察发现,现...

网友评论

    本文标题:iOS自定义顶部导航的实现及封装

    本文链接:https://www.haomeiwen.com/subject/lcfbmttx.html