返回 导航

Swift

hangge.com

Swift - 标签条（UITabBar）标签页控制器（UITabBarController）用法

作者：hangge | 2015-02-06 16:03
（本文代码已升级至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）

回到顶部