Swift UI专项训练34 TabBar底部导航栏

简介:     TabBar大家应该不会陌生,也是我们经常接触的控件,与navigation类似。首先来看下它的属性:Background用来摄住TabBar的背景图片。

    TabBar大家应该不会陌生,也是我们经常接触的控件,与navigation类似。首先来看下它的属性:



Background用来摄住TabBar的背景图片。

Shadow设置阴影。

Selection用来设置TabBar选中后会出现的图片。

Style:用于设置TabBar的样式,默认的是白底,也可以设置成黑底。

Bar Tint:用于设置背景颜色

Item positioning:用于设置TabBar中item的位置。


TarBarItem就是TabBar上的按钮,现在我们来看看TarBarItem的属性:



Badge比较有意思,用于设置右上角的红圈数字,比如未读消息的数量。把它设为1看下效果:



System Item用于设置图标的样式,都是系统自带的样式,可以找到我们常用的五角星、放大镜。

当System Item设置为custom时我们就可以使用Selected Image了。

Title Position用于设置位置。


TabBar Controller包含了以个TabBar和多个UIViewController,通过底部TabBar来控制屏幕上的视图。我们可以在创建工程的时候直接创建Tabbed Application。

新工程点击运行就能看到效果:


如果要再加一个视图,那么直接拖一个View Controller进来,然后鼠标右键从tabbarcontroller视图拖到新加入的视图中去,然后松开鼠标,选择最后一个view controllers。再运行时就能看到三个视图了,接下来点击新加入的视图底部就能设置图标和标题。注意触控板模拟鼠标右键需要按住control按钮。之后我们可以设定一个第三张视图的按钮样式,效果如图:




目录
相关文章
|
2月前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
机器学习/深度学习 数据可视化 算法
基于深度学习的瓶子检测软件(UI界面+YOLOv5+训练数据集)
基于深度学习的瓶子检测软件(UI界面+YOLOv5+训练数据集)
382 0
|
5月前
|
JavaScript
Mint UI tab-container 结合 tabbar
Mint UI tab-container 结合 tabbar
105 0
|
11月前
|
JavaScript
Vue移动端框架Mint UI教程-底部导航栏(二)
Vue移动端框架Mint UI教程-底部导航栏(二)
83 0
|
存储 数据管理 数据库
CoreData 在 swift UI 中的使用
当谈到在 Swift UI 中进行本地数据持久化,Core Data 是一个强大且常用的解决方案。Core Data 是苹果提供的一种数据存储和管理框架,用于在应用程序中创建、读取、更新和删除数据。它提供了一个对象图管理器,可以将数据映射到对象,并提供了一种简化数据操作的方式。在本文中,我们将深入介绍 Core Data 在 Swift UI 中的使用。
CoreData 在 swift UI 中的使用
|
机器学习/深度学习 监控 算法
基于深度学习的跌倒检测系统(UI界面+YOLOv5+训练数据集)
基于深度学习的跌倒检测系统(UI界面+YOLOv5+训练数据集)
1461 0
|
机器学习/深度学习 数据可视化 算法
水果新鲜程度检测系统(UI界面+YOLOv5+训练数据集)
水果新鲜程度检测系统(UI界面+YOLOv5+训练数据集)
686 0
|
机器学习/深度学习 人工智能 监控
基于深度学习的人群密度检测系统(UI界面+YOLOv5+训练数据集)
基于深度学习的人群密度检测系统(UI界面+YOLOv5+训练数据集)
689 0
|
机器学习/深度学习 人工智能 算法
基于深度学习的农作物叶片病害检测系统(UI界面+YOLOv5+训练数据集)
基于深度学习的农作物叶片病害检测系统(UI界面+YOLOv5+训练数据集)
696 1
|
机器学习/深度学习 传感器 监控
基于YOLOv5的停车位检测系统(清新UI+深度学习+训练数据集)
基于YOLOv5的停车位检测系统(清新UI+深度学习+训练数据集)
740 0

相关课程

更多