当前位置: > > > Swift - 标签条(UITabBar)标签页控制器(UITabBarController)用法

Swift - 标签条(UITabBar)标签页控制器(UITabBarController)用法

(本文代码已升级至Swift3)

App底部的tab标签页可以方便的把功能模块划分清楚,只需点击相应的标签页就可以展示完全独立的视图页面,同时各标签页间的视图也可以进行数据交换。

TabBarItem系统自带图标样式(System)介绍:
Custom:自定义方式,配合Selected Image来自定义图标
More:三个点的图标,表示更多意思
Favorites:星形图标
Featured:星形图标
Top Tated:星形图标
Recents:时钟图标
Contacts:一个圆形一个人头像的图标,代表联系方式
History:时钟图标
Bookmarks:书本图标
Search:放大镜图标,代表搜索的意思
Downloads:正方形,加一个向下的箭头,代表下载的意思
Most Recent:时钟图标
Most Viewed:三条杠的笔记本纸片图标

下面演示了两种创建标签页的方法。
   

1,使用storyboard设计标签页

(1)新建一个Simple View Application,然后删除原来的View Controller并拖入一个Tab Bar Controller,默认就带有两个标签页,每个标签页都在一个View Controller里。
(2)项目新建为Tabbed Application模板也可实现上面的效果。
(3)如果想要添加新的标签页,可以在storyboard里拖入更多的View Controller,每个View Controller放入一个Tab Bar Item。然后建立Tab Bar Controller和新建的View Controller之间的segue关联。即按住Ctrl键,拖动Tab Bar Controller到View Controller,在弹出的上下文菜单中选择View Controller即可。

2,使用代码实现标签条(TabBar)

import UIKit

class ViewController: UIViewController,UITabBarDelegate {
    
    //添加Tab Bar控件
    var tabBar:UITabBar!
    //Tab Bar Item的名称数组
    var tabs = ["公开课","全栈课","设置"]
    //Tab Bar上方的容器
    var contentView:UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //在底部创建Tab Bar
        tabBar = UITabBar(frame:CGRect(x:0, y:self.view.bounds.height - 50,
                   width:self.view.bounds.width, height:50))
        var items:[UITabBarItem] = []
        for tab in self.tabs {
            let tabItem = UITabBarItem()
            tabItem.title = tab
            items.append(tabItem)
        }
        //设置Tab Bar的标签页
        tabBar.setItems(items, animated: true)
        //本类实现UITabBarDelegate代理,切换标签页时能响应事件
        tabBar.delegate = self
        //代码添加到界面上来
        self.view.addSubview(tabBar);
        
        //上方的容器
        contentView = UIView(frame: CGRect(x:0, y:0, width:self.view.bounds.width,
                                           height:self.view.bounds.height-50))
        self.view.addSubview(contentView)
        let lbl = UILabel(frame:CGRect(x:100, y:200, width:100, height:20))
        //定义tag,在用户切换tab时能查询到label控件
        lbl.tag = 1
        contentView.addSubview(lbl)
    }
    
    // UITabBarDelegate协议的方法,在用户选择不同的标签页时调用
    func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        //通过tag查询到上方容器的label,并设置为当前选择的标签页的名称
        (contentView.viewWithTag(1) as! UILabel).text = item.title
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

3,使用代码实现标签页控制器(TabBarController)

         

--- ViewController.swift ---
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button = UIButton(type: .system)
        button.frame = CGRect(x:100, y:150, width:100, height:30)
        button.setTitle("开始游戏", for:.normal)
        button.addTarget(self, action:#selector(ViewController.tapped),
                         for:.touchUpInside)
        self.view.addSubview(button);
    }
    
    func tapped(){
        self.present(MainTabViewController(), animated:true, completion:nil)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

--- MainTabViewController.swift ---
import UIKit

class MainTabViewController:UITabBarController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()
        //一共包含了两个视图
        let viewMain = MainViewController()
        viewMain.title = "2048"
        let viewSetting = SettingViewController()
        viewSetting.title = "设置"
        
        //分别声明两个视图控制器
        let main = UINavigationController(rootViewController:viewMain)
        main.tabBarItem.image = UIImage(named:"first")
        //定义tab按钮添加个badge小红点值
        main.tabBarItem.badgeValue = "!"
        
        let setting = UINavigationController(rootViewController:viewSetting)
        setting.tabBarItem.image = UIImage(named:"second")
        self.viewControllers = [main,setting]
        
        //默认选中的是游戏主界面视图
        self.selectedIndex = 0
    }
}

--- MainViewController.swift ---
import UIKit

class MainViewController: UIViewController {
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        //改成主视图背景白色背景
        self.view.backgroundColor = UIColor.white
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

--- SettingViewController.swift ---
import UIKit

class SettingViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor(red:109/255, green:218/255,
                                            blue:255/255, alpha:1)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
源码下载:hangge_592.zip
评论5
  • 5楼
    2017-12-07 18:39
    66

    航哥 这个demo 在Ipad9.7模拟器运行 tabbar的图片在左 文字在右 怎么解决啊 求航哥解答

    站长回复

    iOS11的新特性就是这样,tabbar如果在iPad下显示,按钮里的图片和文字都是水平摆放的。这个没法直接调整,非要改的还只能重写UITabBar的布局相关代码。

  • 4楼
    2017-05-16 23:42
    橘子没皮

    hangge 请问一下有siwft2.3的demo吗~

    站长回复

    没有了,我文章代码现在基本上都更新成Swift3了。

  • 3楼
    2017-01-09 17:28
    哈哈哈

    当用户未登录 点击用户中心跳转至登录界面 这个怎么控制的 谢谢

    站长回复

    你在用户登录成功后,使用UserDefaults记录下状态。 每次点击用户中心时判断下这个状态,如果用户没有登录则跳转到登录界面。

  • 2楼
    2015-08-31 16:32
    大豆

    MainTabViewController 里面的 init 怎么写呀?我想传值进去

    站长回复

    可以看我写的另一篇文章“Swift - 重写UIKit框架类的init初始化方法(以UITabBarController为例)”

  • 1楼
    2015-08-29 16:41
    coder

    跳到 MainTabViewController 的时候怎么传值啊?

    站长回复

    可以传值,可以看我写的另一篇文章“Swift - 重写UIKit框架类的init初始化方法(以UITabBarController为例)”