菜鸡学 iOS 1. 手写UITabBar

需要实现的样子如下图:

UITabBar.png

文件目录:

目录.png

主要思路:

--- 创建一个屏幕上面可以显示UI
--- 底部控制器名字叫TabBar 应该就是搞这个了
--- 每一个Item要对应一个控制器,这些控制器再去控制各个Item的内容

1.先在AppDelegate.swift里 创建一个UIWindow,并且设置Frame,指定根控制器,最后默念咒语生效。
// didFinishLaunchingWithOptions方法启动成功后执行
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // 1. 创建 UIWindow
    self.window = UIWindow.init()
    // 2. 设置 UIWindow 的Frame
    self.window = UIWindow(frame: UIScreen.main.bounds)
    // 3. 设置根试图控制器为 RootViewController()新建类文件
    self.window?.rootViewController = RootTabBarController()
    // 4. 生效
    self.window?.makeKeyAndVisible()
    return true
}
2. 创建 Extension 公共类 用于抽取一些通用的方法。
-2.1 便利构造函数扩展系统类 UIColor 简化 / 255.0这种写法 , 并且alpha默认值设置为1.0
import UIKit
// 扩展系统UIColor的类 便利构造函数简化写法
extension UIColor {
    convenience init(r: CGFloat, g: CGFloat, b: CGFloat, a: CGFloat = 1.0) {
        self.init (red: r/255.0, green: g / 255.0, blue: b / 255.0, alpha: a)
    }
}
-2.2 扩展 RootTabBarController 类 用于创建一个 设置Item的公共方法,这样到后面就可以直接传值进这个公共方法生成Item了。
import UIKit

// 扩展 RootTabBarController 类 用于创建Item
extension RootTabBarController {
// 创建Items的方法
func navigationBarItems(TabBarItemVC: UIViewController ,title: String,iconImage: String?, selectedImage: UIImage?, badgeValue :String? ) -> UINavigationController {
    // 设置 rootViewController对应的Ctr
    let Ctr = UINavigationController(rootViewController: TabBarItemVC)
    // 设置 title底部标题 | image图片 | selectedImage选中后的图片
    Ctr.tabBarItem = UITabBarItem(title: title, image: UIImage(named: iconImage!), selectedImage: selectedImage)
    // 设置提示信息
    Ctr.tabBarItem.badgeValue = badgeValue

    return Ctr
    }
}
3.创建一个RootTabBarController.swift 继承 UITabBarController,在override func viewDidLoad() {} 这个里面实现 TabBar的样式和TabBarItems相关设置。可以通过扩展类的方式,在override func viewDidLoad()里只要载入方法名即可,这样会看起来B格高点。
-3.1 扩展 RootTabBarController类 设定TabBar的样式
-3.2 扩展 RootTabBarController类 设定TabBar的Item
PS:每一个Item对应一个Controller,这个要事先创建好。
import UIKit

class RootTabBarController: UITabBarController {
// 系统回调函数
override func viewDidLoad() {
    super.viewDidLoad()
    // 1. 载入TabBar的样式
    SetupTabBarStyle()
    // 2. 载入TabBarItems
    SetupTabBarItems()
    }
}
// 扩展 RootTabBarController 方法
extension RootTabBarController {
// 1. 设定TabBar的样式 
// PS: 这里 UIColor(r:  , g:  , b:  , a:) 是我们扩展系统UIColor的便利构造函数提供的方法 (看上面2.1)
func SetupTabBarStyle() {
    // 1.1 设置整个RootTabBarController的Item颜色
    self.tabBar.tintColor = UIColor(r: 215, g: 50, b: 64)
    // 1.2 设置整个RootTabBarController的背景色
    self.tabBar.barTintColor = UIColor(r: 0, g: 0, b: 0, a: 0.4)
    }

// 2. 设定TabBar的Item
func SetupTabBarItems() {
    // 创建 首页Item 控制器名 HomeViewController()
    let HomeNav = navigationBarItems(TabBarItemVC: HomeViewController(), title: "首 页", iconImage: "tabBar_Item1", selectedImage: nil, badgeValue: "5")
    // 创建 大师Item 控制器 MasterViewController()
    let MasterNav = navigationBarItems (TabBarItemVC: MasterViewController(), title: "大师", iconImage: "tabBar_Item2", selectedImage: nil, badgeValue: nil)
    // 创建 购物Item 控制器 ShoppingViewController()
    let ShoppingNav = navigationBarItems(TabBarItemVC: ShoppingViewController(), title: "尖货", iconImage: "tabBar_Item3", selectedImage: nil, badgeValue: nil)
    // 创建 我的Item 控制器 PersonalViewController()
    let PersonalNav = navigationBarItems(TabBarItemVC: PersonalViewController(), title: "我的", iconImage: "tabBar_Item4", selectedImage: nil, badgeValue: nil)
    
    // 设置tabBar根试图
    let RootTabBarCtr = [HomeNav,MasterNav,ShoppingNav,PersonalNav]
    //加入进 viewControllers
    self.viewControllers = RootTabBarCtr
    } 
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • importUIKit classViewController:UITabBarController{ enumD...
    明哥_Young阅读 3,874评论 1 10
  • *7月8日上午 N:Block :跟一个函数块差不多,会对里面所有的内容的引用计数+1,想要解决就用__block...
    炙冰阅读 2,532评论 1 14
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,020评论 25 708
  • 英国脱欧,盐城被卷,政治事件与自然天灾永远是媒体版面的热点。脱欧之后,最直接的后果就是英磅贬值,段子一个接一个,嘲...
    二双阅读 106评论 0 0