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

时间:2022-05-30 20:59:42

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

 
TabBarItem系统自带图标样式(System)介绍:
Custom:自定义方式,配合Selected Image来自定义图标
More:三个点的图标,表示更多意思
Favorites:星形图标
Featured:星形图标
Top Tated:星形图标
Recents:时钟图标
Contacts:一个圆形一个人头像的图标,代表联系方式
History:时钟图标
Bookmarks:书本图标
Search:放大镜图标,代表搜索的意思
Downloads:正方形,加一个向下的箭头,代表下载的意思
Most Recent:时钟图标
Most Viewed:三条杠的笔记本纸片图标
 
下面演示了两种创建标签页的方法。
 Swift - 标签条(UITabBar)标签页控制器(UITabBarController)用法  Swift - 标签条(UITabBar)标签页控制器(UITabBarController)用法
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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()
        // Do any additional setup after loading the view, typically from a nib.
         
        //在底部创建Tab Bar
        tabBar = UITabBar(frame:
            CGRectMake(0,CGRectGetHeight(self.view.bounds)-64,CGRectGetWidth(self.view.bounds),44))
        var items:[UITabBarItem] = []
        for tab in self.tabs {
            var 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:
            CGRectMake(0,0,CGRectGetWidth(self.view.bounds),CGRectGetHeight(self.view.bounds)-44))
        self.view.addSubview(contentView)
        var lbl = UILabel(frame:CGRectMake(100,200,100,20))
        //定义tag,在用户切换tab时能查询到label控件
        lbl.tag = 1
        contentView.addSubview(lbl)
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
     
    // UITabBarDelegate协议的方法,在用户选择不同的标签页时调用
    func tabBar(tabBar: UITabBar!, didSelectItem item: UITabBarItem!) {
        //通过tag查询到上方容器的label,并设置为当前选择的标签页的名称
        (contentView.viewWithTag(1) as UILabel).text = item.title
    }
}

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

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

--- ViewController.swift ---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import UIKit
 
class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
         
        let button:UIButton = UIButton(type: UIButtonType.System)
        button.frame=CGRectMake(100, 150, 100, 30)
        button.setTitle("开始游戏", forState:UIControlState.Normal)
        button.addTarget(self,action:Selector("tapped"),forControlEvents:UIControlEvents.TouchUpInside)
        self.view.addSubview(button);
    }
     
    func tapped(){
        self.presentViewController(MainTabViewController(), animated:true, completion:nil)
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

--- MainTabViewController.swift ---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import UIKit
 
class MainTabViewController:UITabBarController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()
        //一共包含了两个视图
        let viewMain = MainViewController()
        viewMain.title = "2048"
        let viewSetting = SettingViewController()
        viewSetting.title = "设置"
         
        //分别声明两个视图控制器
        var main = UINavigationController(rootViewController:viewMain)
        main.tabBarItem.image = UIImage(named:"first")
        var setting = UINavigationController(rootViewController:viewSetting)
        setting.tabBarItem.image = UIImage(named:"second")
        self.viewControllers = [main,setting]
         
        //默认选中的是游戏主界面视图
        self.selectedIndex = 0
    }
}

--- MainViewController.swift ---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import UIKit
 
class MainViewController: UIViewController {
 
    override func viewDidLoad() {
      
        super.viewDidLoad()
        //改成主视图背景白色背景
        self.view.backgroundColor = UIColor.whiteColor()
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

--- SettingViewController.swift ---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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()
        // Dispose of any resources that can be recreated.
    }
}

源码下载:Swift - 标签条(UITabBar)标签页控制器(UITabBarController)用法TabBarControllerTest.zip