程序员

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

2016-12-13  本文已影响381人  laotoutou

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

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

现已将它封装成了一个自定义的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代码地址

上一篇 下一篇

猜你喜欢

热点阅读