具体思路
在UITabBarControllerview出现之后viewDidAppear，在tabbar添加自定义的iconsView，并去掉tabbar自己的imageView和Label。点击是通过控制自定义iconsView进行动画。
首先创建动画协议和动画基类
//协议
protocol XDItemAnimationProtocol {
//其实就是将自定义iconsView中的imageview和label传过来,添加动画
func playAnimation(icon : UIImageView, textLabel : UILabel)
func deselectAnimation(icon : UIImageView, textLabel : UILabel, defaultTextColor : UIColor)
func selectedState(icon : UIImageView, textLabel : UILabel)
}
//动画父类
class XDItemAnimation: NSObject, XDItemAnimationProtocol {
var duration : CGFloat = 0.6
var textSelectedColor: UIColor = UIColor.orangeColor()
var iconSelectedColor: UIColor?
func playAnimation(icon : UIImageView, textLabel : UILabel) {
}
func deselectAnimation(icon : UIImageView, textLabel : UILabel, defaultTextColor : UIColor) {
}
func selectedState(icon: UIImageView, textLabel : UILabel) {
}
}
创建动画子类实现弹簧动画
//具体动画方法
class XDBounceAnimation : XDItemAnimation {
override func playAnimation(icon : UIImageView, textLabel : UILabel) {
playBounceAnimation(icon)
textLabel.textColor = textSelectedColor
}
override func deselectAnimation(icon : UIImageView, textLabel : UILabel, defaultTextColor : UIColor) {
textLabel.textColor = defaultTextColor
if let iconImage = icon.image {
//安原图方式创建,不添加tintColor
let renderImage = iconImage.imageWithRenderingMode(.AlwaysOriginal)
icon.image = renderImage
icon.tintColor = defaultTextColor
}
}
override func selectedState(icon : UIImageView, textLabel : UILabel) {
textLabel.textColor = textSelectedColor
if let iconImage = icon.image {
let renderImage = iconImage.imageWithRenderingMode(.AlwaysOriginal)
icon.image = renderImage
icon.tintColor = textSelectedColor
}
}
func playBounceAnimation(icon : UIImageView) {
let bounceAnimation = CAKeyfXDeAnimation(keyPath: "transform.scale")
bounceAnimation.values = [1.0 ,1.4, 0.9, 1.15, 0.95, 1.02, 1.0]
bounceAnimation.duration = NSTimeInterval(duration)
bounceAnimation.calculationMode = kCAAnimationCubic
icon.layer.addAnimation(bounceAnimation, forKey: "bounceAnimation")
if let iconImage = icon.image {
let renderImage = iconImage.imageWithRenderingMode(.AlwaysOriginal)
icon.image = renderImage
icon.tintColor = iconSelectedColor
}
}
}
创建UITabBarItem子类,并添加animation属性
class XDAnimatedTabBarItem: UITabBarItem {
//添加animation属性,方便调用动画方法
var animation: XDItemAnimation?
var textColor = UIColor.grayColor()
func playAnimation(icon: UIImageView, textLabel: UILabel){
guard let animation = animation else {
print("add animation in UITabBarItem")
return
}
animation.playAnimation(icon, textLabel: textLabel)
}
func deselectAnimation(icon: UIImageView, textLabel: UILabel) {
animation?.deselectAnimation(icon, textLabel: textLabel, defaultTextColor: textColor)
}
func selectedState(icon: UIImageView, textLabel: UILabel) {
animation?.selectedState(icon, textLabel: textLabel)
}
}
创建UITabBarController子类,创建自定义iconsView,并去掉tabbar自己的imageView和Label。最后重写点击时间,调用动画。
class AnimationTabBarController: UITabBarController {
//保存自定义iconsView,包括一个uiimageview和uilabel
var iconsView: [(icon: UIImageView, textLabel: UILabel)] = []
var iconsImageName:[String] = ["home", "order", "shopCart", "my"]
var iconsSelectedImageName:[String] = ["home_r", "order_r", "shopCart_r", "my_r"]
var shopCarIcon: UIImageView?
override func viewDidLoad() {
super.viewDidLoad()
}
//创建imageview和label的容器view
func createViewContainers() -> [String: UIView] {
var containersDict = [String: UIView]()
guard let customItems = tabBar.items as? [XDAnimatedTabBarItem] else
{
return containersDict
}
for index in 0..<customItems.count {
let viewContainer = createViewContainer(index)
containersDict["container\(index)"] = viewContainer
}
return containersDict
}
func createViewContainer(index: Int) -> UIView {
let viewWidth: CGFloat = ScreenWidth / CGFloat(tabBar.items!.count)
let viewHeight: CGFloat = tabBar.bounds.size.height
let viewContainer = UIView(frame: CGRectMake(viewWidth * CGFloat(index), 0, viewWidth, viewHeight))
viewContainer.backgroundColor = UIColor.clearColor()
viewContainer.userInteractionEnabled = true
tabBar.addSubview(viewContainer)
viewContainer.tag = index
//为容器view添加点击手势
let tap = UITapGestureRecognizer(target: self, action: "tabBarClick:")
viewContainer.addGestureRecognizer(tap)
return viewContainer
}
//在容器view中添加imageview和label
func createCustomIcons(containers : [String: UIView]) {
if let items = tabBar.items {
for (index, item) in items.enumerate() {
assert(item.image != nil, "add image icon in UITabBarItem")
guard let container = containers["container\(index)"] else
{
print("No container given")
continue
}
container.tag = index
let imageW:CGFloat = 21
let imageX:CGFloat = (ScreenWidth / CGFloat(items.count) - imageW) * 0.5
let imageY:CGFloat = 8
let imageH:CGFloat = 21
let icon = UIImageView(frame: CGRect(x: imageX, y: imageY, width: imageW, height: imageH))
icon.image = item.image
icon.tintColor = UIColor.clearColor()
// text
let textLabel = UILabel()
textLabel.frame = CGRectMake(0, 32, ScreenWidth / CGFloat(items.count), 49 - 32)
textLabel.text = item.title
textLabel.backgroundColor = UIColor.clearColor()
textLabel.font = UIFont.systemFontOfSize(10)
textLabel.textAlignment = NSTextAlignment.Center
textLabel.textColor = UIColor.grayColor()
textLabel.translatesAutoresizingMaskIntoConstraints = false
container.addSubview(icon)
container.addSubview(textLabel)
if let tabBarItem = tabBar.items {
let textLabelWidth = tabBar.frame.size.width / CGFloat(tabBarItem.count)
textLabel.bounds.size.width = textLabelWidth
}
let iconsAndLabels = (icon:icon, textLabel:textLabel)
//保存自定义的所有iconsView
iconsView.append(iconsAndLabels)
//去掉tabitem自己的图片和title
item.image = nil
item.title = ""
if index == 0 {
selectedIndex = 0
selectItem(0)
}
}
}
}
//重写点击事件
override func tabBar(tabBar: UITabBar, didSelectItem item: UITabBarItem) {
setSelectIndex(from: selectedIndex, to: item.tag)
}
//设置选中的图片和选中状态
func selectItem(Index: Int) {
let items = tabBar.items as! [XDAnimatedTabBarItem]
let selectIcon = iconsView[Index].icon
selectIcon.image = UIImage(named: iconsSelectedImageName[Index])!
items[Index].selectedState(selectIcon, textLabel: iconsView[Index].textLabel)
}
func setSelectIndex(from from: Int,to: Int) {
selectedIndex = to
let items = tabBar.items as! [XDAnimatedTabBarItem]
//取消选中时动画
let fromIV = iconsView[from].icon
fromIV.image = UIImage(named: iconsImageName[from])
items[from].deselectAnimation(fromIV, textLabel: iconsView[from].textLabel)
//选中时动画
let toIV = iconsView[to].icon
toIV.image = UIImage(named: iconsSelectedImageName[to])
items[to].playAnimation(toIV, textLabel: iconsView[to].textLabel)
}
}
最后创建TabBarController继承于AnimationTabBarController,在第一次创建view出现之后,调用创建自定义iconsView方法,替换tabbar自带的imageview和label。
import UIKit
class MainTabBarController: AnimationTabBarController{
private var fristLoadMainTabBarController: Bool = true
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
self.adImageView!.removeFromSuperview()
self.adImageView = nil
}
// MARK:- view life circle
override func viewDidLoad() {
super.viewDidLoad()
delegate = self
buildMainTabBarChildViewController()
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
//view出现后创建自定义iconsview
if fristLoadMainTabBarController {
let containers = createViewContainers()
createCustomIcons(containers)
fristLoadMainTabBarController = false
}
}
// MARK: - Method
// MARK: 初始化tabbar
private func buildMainTabBarChildViewController() {
tabBarControllerAddChildViewController(HomeViewController(), title: "首页", imageName: "home", selectedImageName: "home_r", tag: 0)
tabBarControllerAddChildViewController(SupermarketViewController(), title: "超市", imageName: "order", selectedImageName: "order_r", tag: 1)
tabBarControllerAddChildViewController(ShopCartViewController(), title: "购物车", imageName: "shopCart", selectedImageName: "shopCart", tag: 2)
tabBarControllerAddChildViewController(MineViewController(), title: "我的", imageName: "my", selectedImageName: "my_r", tag: 3)
}
private func tabBarControllerAddChildViewController(childView: UIViewController, title: String, imageName: String, selectedImageName: String, tag: Int) {
let vcItem = XDAnimatedTabBarItem(title: title, image: UIImage(named: imageName), selectedImage: UIImage(named: selectedImageName))
vcItem.tag = tag
vcItem.animation = XDBounceAnimation()
childView.tabBarItem = vcItem
let navigationVC = BaseNavigationController(rootViewController:childView)
addChildViewController(navigationVC)
}
}
层次结构.png
图层结构.png
