App底部的tab标签页可以方便的把功能模块划分清楚,只需点击相应的标签页就可以展示完全独立的视图页面,同时各标签页间的视图也可以进行数据交换。
TabBarItem系统自带图标样式(System)介绍:
Custom:自定义方式,配合Selected Image来自定义图标
More:三个点的图标,表示更多意思
Favorites:星形图标
Featured:星形图标
Top Tated:星形图标
Recents:时钟图标
Contacts:一个圆形一个人头像的图标,代表联系方式
History:时钟图标
Bookmarks:书本图标
Search:放大镜图标,代表搜索的意思
Downloads:正方形,加一个向下的箭头,代表下载的意思
Most Recent:时钟图标
Most Viewed:三条杠的笔记本纸片图标
效果:
Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-28 at 17.30.02.png
1、使用storyboard设计标签页
image.png
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,UITabBarDelegate {
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);
}
@objc func tapped(){
self.present(MainTabViewController(), animated:true, completion:nil)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
MainTabViewController
import UIKit
class MainTabViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
//一共包含了两个视图
let viewMain = PlayerViewController()
viewMain.title = "游戏"
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
}
}
PlayerViewController
import UIKit
class PlayerViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .blue
}
}
SettingViewController
import UIKit
class SettingViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .red
}
}
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_592.html