NSVAnimatedTabBar
示例
要运行示例项目,请克隆仓库,然后从 Example 目录首先运行 pod install
。
需求
Swift 5.0
安装
NSVAnimatedTabBar 通过 CocoaPods 提供。要安装它,只需将以下行添加到您的 Podfile
pod 'NSVAnimatedTabBar'
关于
NSVAnimatedTabBar 是一个完全可定制的动画标签栏,中心项可以用于展示更多选项。
使用方法
NSVAnimatedTabBar 是在 5 个协议之上构建的,因此您需要创建相应协议的实现才能使用具有动画效果的标签栏。几乎可以自定义一切。
实现NSVAnimatedTabControllerDelegate
以获取每个标签或中心项的子选项选择。
NSVAnimatedTabOptions
主要协议,提供所有必要信息。
tabHeight: CGFloat
标签栏高度
tabInsets: UIEdgeInsets
标签栏内边距
tabBackgroundColor: UIColor
标签栏背景颜色
selectedItemColor: UIColor
标签栏选中项颜色
unselectedItemColor: UIColor
标签栏未选中项颜色
cornerRadius: CGFloat
标签栏圆角半径
corners: [RadiusCorners]
标签栏圆角
unselectedItemColor
标签栏未选中项颜色
shadowInfo: ShadowInfo
设置为在标签栏上方显示阴影
options: [NSVTabItemOptions]
标签栏项数组
animationOptions: NSVTabAnimationOptions
标签栏动画选项
centerItemOptions: NSVCenterItemOptions
标签栏中心项选项
coverAlpha: CGFloat
中心项选中时覆盖视图的透明值
mainBackgroundColor: UIColor?
主要视图的背景颜色,对于凹凸标签栏和当 tabInsets
设置为非零值时可见。如果您希望自动具有与选中的视图控制器视图相同的颜色,请设置为 nil。
NSVTabAnimationOptions
动画协议,提供主要动画选项。
mainAnimationDuration: Double
中心项和标签栏动画持续时长
options: UIView.AnimationOptions
中心项和标签栏动画选项
usingSpringWithDamping: CGFloat
中心项和标签栏动画的阻尼值
initialSpringVelocity: CGFloat
中心项和标签栏动画的初始弹簧速度
delay: Double
中心项和标签栏动画延迟
tabMovePercentage: CGFloat?
标签栏基于其高度的更改百分比,如果想要完全隐藏它,设置为 1;如果不想执行动画,设置为 nil。
centerItemMovePercentage: CGFloat?
中心项基于其高度的更改百分比,如果不想执行动画,设置为 nil。
subOptionsAnimationtype: SubOptionsAnimationType
中心项子选项动画类型:.basic
- 第一个 gif,同时隐藏/显示所有子项。 .fading
- 第二个 gif,一个接一个地隐藏/显示,并更改每个项的 alpha 值。.movingByOne
- 第三个 gif,一个接一个地隐藏/显示,如果需要则进行缩放。
tabSelectionAnimationType: TabSelectionAnimationType
每个标签选择动画,也用于动画中心项选择/取消选择,可以是 none。
shouldAnimateScreenChanges: Bool
是否动画选中的视图控制器更改。
NSVTabItemOptions
标签栏每个项选项
title: String?
标签栏项标题,如果要只有图片,则设置为 nil
image: UIImage?
标签栏项图标,如果要只有标题,则设置为 nil
selectedImage: UIImage?
标签栏选中项图标,如果设置为 nil,将使用提供的 selectedItemColor(如果您想要对图像进行着色变化,请使用模板模式图像)
itemInsets: UIEdgeInsets
标签栏项内边距
spacing: CGFloat?
图片和标题之间的间距
font: UIFont?
标签栏项目标题字体
NSVCenterItemOptions
中心项目选项。
size: CGSize
中心项目大小
subOptionsSize: CGSize
中心项目子选项大小
insets: UIEdgeInsets
中心项目内边距
options: NSVTabItemOptions
中心项目配置选项,类似于标签栏项目。
subOptions: [NSCenterItemSubOptions]
中心项目子选项数组和
backgroundColor: UIColor
中心项目背景颜色
cornerRadius: CGFloat
中心项目圆角半径,设置为 size.width/2 可获得圆角按钮
shadowInfo: ShadowInfo?
中心项目阴影
distributionType: SubOptionsDistributionType
中心项目子选项布局选项,例如 .custom(itemsSpacing: 40, minYOffset: 50, maxYOffset: 50)
itemsSpacing
- 项目间 X 轴间距 minYOffset
- Y 轴最小位置 maxYOffset
- Y 轴最大位置,将 minYOffset
和 maxYOffset
设置为相同值,如果想要子选项在同一行。
curveType: CurveType
如果想要在中心项目下创建曲线,设置为 .bottom
NSVCenterItemSubOptions
中心项目子选项
image: UIImage
子选项图片
backgroundColor: UIColor
子选项背景颜色
cornerRadius: CGFloat
子选项圆角半径
shadowInfo: ShadowInfo
子选项阴影
查看示例应用程序,了解 NSVAnimatedTabBar 的使用。
下一步
动画,动画,动画。我会尝试为所有内容添加更多的动画(项目选择、子选项的出现等),为中心项目添加顶部曲线选项,添加选项以打开新屏幕而不是子选项等。
作者
Narek1994, [email protected]
https://www.linkedin.com/in/narek-simonyan-b3974b120/
许可
NSVAnimatedTabBar 可在 MIT 许可下获得。有关更多信息,请参阅 LICENSE 文件。