不水,全是操作步骤。喜欢的双击666

 

从创建开始
 1. Create a new Xcode project
 2. Single View App
 3. Language swift
 
在创建AppDelegate同级目录下自定义的UITabBarController,这里命名MyUITabBarController
 1. 在AppDelegate的application方法里面设置代码在下面

window = UIWindow(frame: UIScreen.main.bounds)
window?.rootViewController = MyTabBarController()
window?.makeKeyAndVisible()

这里需要在Deployment Info 里面把Main InterFace里面的Main删除

在创建AppDelegate同级目录下自定义UINavigationController,这里命名为MyUINavigationController
1.    接下来我们在MyUITabBarController自定义一个方法setChildViewController它的作用是用来设置底部导航
title:String        设置底部导航文字
imageName:String        设置默认图片
selectedImageName:String        设置选中图片

func setChildViewController(_ childController: UIViewController,title:String,imageName:String,selectedImageName:String){ 
        childController.tabBarItem.image = UIImage(named: imageName)
        childController.tabBarItem.selectedImage = UIImage(named: selectedImageName)
        childController.tabBarItem.title = title
        childController.title = title
        let navVc = MyNavigationController(rootViewController:childController)
        addChild(navVc)
}

在创建AppDelegate同级目录下自定义四个UIViewController,名称分别为HomeViewController,VideoViewController,HuoshanViewController,MineViewController

然后我们在MyTabBarController文件viewDidLoad方法里面设置添加一个自定义方法addChildViewControllers代码如下

func addChildViewControllers () {
        setChildViewController(HomeViewController(), title: "首页", imageName: "home_tabbar_32x32_", selectedImageName: "home_tabbar_press_32x32_")
        setChildViewController(VideoViewController(), title: "视频", imageName: "video_tabbar_32x32_", selectedImageName: "video_tabbar_press_32x32_")
        setChildViewController(HuoshanViewController(), title: "小视频", imageName: "huoshan_tabbar_32x32_", selectedImageName: "huoshan_tabbar_press_32x32_")
        setChildViewController(MineViewController(), title: "我的", imageName: "mine_tabbar_32x32_", selectedImageName: "mine_tabbar_press_32x32_")
        
}

然后我们运行项目可以看到底部会出现导航,如果你的导航图标还是蓝色,这里需要配置Assets.xcassets,拖住选中图片在右边选择使用Render As为Original Image

 

 

接下来我们要实现底部四个导航,中间一个加号的导航

所以我们在这里需要自定义一个UITabBar,名称为MyTabBar,以下为全部代码

class MyTabBar: UITabBar {

    override init(frame: CGRect) {
        super.init(frame:frame)
        addSubview(publishButton)    //添加SubView
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private lazy var publishButton :UIButton = {
        let publishButton = UIButton(type: .custom)    //新建一个UIButton
        publishButton.setBackgroundImage(UIImage(named: "feed_publish_44x44_"), for: .normal)    //设置一个背景图片
        publishButton.setBackgroundImage(UIImage(named: "feed_publish_press_44x44_"), for: .selected)    //设置一个选中背景图片
        publishButton.sizeToFit()   // 按钮宽高和图片
        return publishButton    
        
    }()
    
    
    override func layoutSubviews() {
        super.layoutSubviews()
        let width = frame.width
        let height = frame.height
        
        publishButton.center = CGPoint(x: width*0.5, y: height * 0.5 - 12)
        
        let buttonW:CGFloat = width * 0.2
        let buttonH:CGFloat = height
        
        let buttonY:CGFloat = 0
        
        var index = 0
        
        for button in subviews {
            if !button.isKind(of: NSClassFromString("UITabBarButton")!){continue}
            let buttonX = buttonW * (index>1 ? CGFloat(index+1):CGFloat(index))
            
            button.frame = CGRect(x: buttonX, y: buttonY, width: buttonW, height: buttonH)    //摆放每个Button位置
            index+=1
            
        }

        
    }
    

}

然后我们需要在MyTabBarController的addChildViewControllers方法的最后一行添加

setValue(MyTabBar(), forKey: "tabBar")

再次运行,就会得到我们想要的结果,写这篇博客,资源文件导入的过程有点省略。在这里主要配置Assets.xcassets

 

接下来我们来配置在项目的根目录下 有.xcodeproj后缀文件下

其实就是两个命令

第一步 Pod init 

第二步 Pod install

在目录下面你们可以看到.xcworkspace后缀文件和Pods文件夹,这里你们可以打开.xcworkspace后缀文件

基本上结束了

 

用MVC改造项目,我们在Assets.xcassets同级目录下建一个Classes文件夹,在Classes目录下可以建立对应你的HomeViewController的文件夹Home,在下面建立三个文件夹Controller,View,Model,然后把HomeViewController放入Controller文件夹里面

 

我们用代码生成布局,这时候我们的Main.storyboard就可以删掉了。