Swift(十三)UITabBarController

更新:2018.05.24

整理了一下demo:SwiftDemo


  • 在iOS中,TabbarController是一种很常见的视图控制器,UITabBarController支持用户在一组不同的屏幕之间切换,每个屏幕都代表程序的一种不同的操作模式。
  • UITabBarController通常最为整个程序的rootViewController,而且不能添加到别的视图控制器中,UITabBarController主要用来管理用户提供的包含各种内容的子视图控制器,而每一个子视图控制器则负责管理自己的视图层级关系。
  • 当用户的应用打算提供一些相同等级、系列性的不同界面时,UITabBarController将是你最好的选择,你可以设置多个Tab,每个Tab对应一个UIViewController。当某个Tab被点击时,UITabBarController就会选中该Tab,并显示该Tab对应的视图控制器中的内容。

创建一个UITabBarController

1. 创建四个子视图控制器
这里以微信为例,首先我们新建一个项目,并且添加四个新的视图控制器类:
WeChatViewControllerAddressBookViewControllerFindViewControllerMineViewController
然后我们分别在这四个viewController中设置各自的属性,用于区分。

WeChatViewController.swift

import UIKit

class WeChatViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor.red
        let label = UILabel(frame: CGRect(x: 0, y: 200, width: UIScreen.main.bounds.width, height: 50))
        label.backgroundColor = UIColor.white
        label.font = UIFont.systemFont(ofSize: 15)
        label.textColor = UIColor.gray
        label.textAlignment = NSTextAlignment.center
        label.text = "微信"
        view.addSubview(label)
    }

}

其他的三个只是改了背景颜色、label的文本,这里就不一一贴了。

然后我们在Assets.xcassets文件夹中添加4张Tab的图片,这个是我之前在微信里扒出来的。

2. 实现UITabBarController

添加了图片,创建了4个ViewController之后,就可以创建UITabBarController了,我们可以在AppDelegate.swfit文件的didFinishLaunchingWithOptions方法中创建:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

        let wechat = WeChatViewController()
        // 未选中状态Tab图片
        wechat.tabBarItem.image = UIImage(named: "tab1")?.withRenderingMode(.alwaysOriginal)
        // 选中状态Tab图片
        wechat.tabBarItem.selectedImage = UIImage(named: "selectTab1")?.withRenderingMode(.alwaysOriginal)
        // Tab的文本
        wechat.tabBarItem.title = "微信"
        
        
        let addressBook = AddressBookViewController()
        addressBook.tabBarItem.image = UIImage(named: "tab2")?.withRenderingMode(.alwaysOriginal)
        addressBook.tabBarItem.selectedImage = UIImage(named: "selectTab2")?.withRenderingMode(.alwaysOriginal)
        addressBook.tabBarItem.title = "通讯录"
        
        let find = FindViewController()
        find.tabBarItem.image = UIImage(named: "tab3")?.withRenderingMode(.alwaysOriginal)
        find.tabBarItem.selectedImage = UIImage(named: "selectTab3")?.withRenderingMode(.alwaysOriginal)
        find.tabBarItem.title = "发现"
        
        let mine = MineViewController()
        mine.tabBarItem.image = UIImage(named: "tab4")?.withRenderingMode(.alwaysOriginal)
        find.tabBarItem.selectedImage = UIImage(named: "selectTab4")?.withRenderingMode(.alwaysOriginal)
        mine.tabBarItem.title = "我的"
        
        
        let tabBarController = UITabBarController()
        // tabBarController的主题颜色
        tabBarController.tabBar.tintColor = UIColor.init(colorLiteralRed: 9/255.0, green: 187/255.0, blue: 7/255.0, alpha: 1)
        // tabBarController的子视图控制器集合
        tabBarController.viewControllers = [wechat,addressBook,find,mine]
        // 添加到rootViewController
        window?.rootViewController = tabBarController
        
        
        return true
    }

a. 上面代码中可以看出,是在AppDelegate.swift文件中,我们创建了4个视图控制器,并分别设置他们的tabBarItem的未选中图片、选中图片和文本。

b.UIImage()的后面为什么添加withRenderingMode的实例方法呢?各位也可以试一下,不加的情况下,图片会变成蓝色,失真了,UIImageRenderingMode枚举有三个属性:

UIImageRenderingMode 说明
automatic 根据图片的使用环境和所处的绘图上下文自动调整渲染模式
alwaysOriginal 始终绘制图片原始状态,不使用Tint Color。
alwaysTemplate 始终根据Tint Color绘制图片,忽略图片的颜色信息。

c. 可以试一下没有设置tabBarController.tabbar.tintColor的情况下,选中状态会默认是蓝色。

d. 放出最后的图片看一下:

3. 改变TabBar的位置
UITabbarController的tabbar默认是放在屏幕底部的,如果项目有特殊要求,也可以修改它的位置,比如把它放到顶部去:

       let tabBarController = UITabBarController()
        // tabBarController的主题颜色
        tabBarController.tabBar.tintColor = UIColor.init(colorLiteralRed: 9/255.0, green: 187/255.0, blue: 7/255.0, alpha: 1)
        // tabBarController的子视图控制器集合
        tabBarController.viewControllers = [wechat,addressBook,find,mine]
        // 修改tabbar的位置
        tabBarController.tabBar.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44)
        // 添加到rootViewController
        window?.rootViewController = tabBarController


e. 可以看到,状态栏有遮挡了一部分tabbar,我们可以去掉状态栏:
General中有一个Hide status bar的单选框,勾选,info.plist中会新增一条Status bar is initially hidden ,然后在下面再添加一条View controller-based status bar appearance,就可以了,这个是有自动补全的,所以不用担心拼错。然后再跑一下项目看一下,没有状态栏了。

4. 修改UITabBarController的索引
在使用TabBarController时,一般打开APP会默认呈现的是第一个TabviewController,但有时我们可能需要向用户呈现的是第2个其他两个,这时,我们可以通过设置tabbarControllerselecteIndex属性来设置:

tabBarController.selectedIndex = 2

a. 跑下项目,会发现打开项目后默认呈现的是第三个viewController。(索引是从0开始数的~~~~)

5. Tab图标上方显示角标
当项目收到推送时,app的icon上面会出现小红点,并且数字会+1,在项目里,有的时候也会需要我们的tabbar上显示这样的小红点,只要设置子视图控制器的tabBarItem的badgeValue属性就可以了:

        wechat.tabBarItem.badgeValue = "10"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,952评论 4 60
  • 2016.04.12《野蛮生长》02 金钱(挣钱是种本事,花钱是门艺术) 1.钱的是非,钱的本质就是等价物品间的交...
    daithinker阅读 141评论 0 0
  • 工作原因,天天要与不少人沟通交流。最怕想法不在一个频道上,我性子急躁,三句话能说完的事恨不得一句话说完,讨...
    探路人阅读 87评论 5 3
  • 今天大盘在券商重启融券业务的大利空下小幅低开,早间在回补前期缺口2972点时候市场抄底情绪明显,指数迅速回拉起来,...
    阿凯古阅读 596评论 0 4
  • 忙工作 忙孩子 忙老公 父母变成了我最愧对的人....... 晚上刚洗好澡躺在床上,爸爸的电话打来了,爸爸很少这个...
    天上云歌阅读 337评论 1 1