Swift自定义iOS中的TabBarController并为其添加动画
这篇文章主要介绍了Swift自定义iOS中的TabBarController并为其添加动画的方法,即自定义TabBarController中的的TabBar并为自定义的TabBar增加动画效果,需要的朋友可以参考下
自定义TabBarController有时候默认的TabBarController不能满足我们的开发需求，比如你想用彩色的图标，系统却只调用图标的轮廓，所以我们需要自己定义一下TabBar。
方法一：修改TabBarController中的TabBar新建CustomTabBarController类继承自UITabBarController，并在Storyboard中设置：
首先自定义tabBar的背景，在viewDidLoad()方法中添加：
复制代码代码如下:
//用图片self.tabBar.backgroundImage=UIImage(named:"TabBarBG")//或//直接用颜色self.tabBar.barTintColor=UIColor.blackColor()
然后修改每个子ViewController中的TabBarItem，在viewDidLoad()方法中继续添加：
复制代码代码如下:
for(index,viewController)inself.viewControllers!.enumerate(){//声明TabBarItem的Image，如果没有imageWithRenderingMode方法Image只会保留轮廓letimage=UIImage(named:"TabBar\(index)")?.imageWithRenderingMode(.AlwaysOriginal)letselectedImage=UIImage(named:"TabBar\(index)Sel")?.imageWithRenderingMode(.AlwaysOriginal)
//声明新的无标题TabBarItemlettabBarItem=UITabBarItem(title:nil,image:image,selectedImage:selectedImage)//设置tabBarItem的imageInsets可以使图标居中显示tabBarItem.imageInsets=UIEdgeInsetsMake(6,0,-6,0)
viewController.tabBarItem=tabBarItem}
完成！效果如下所示：
方法二：自定义TabBar上述方法唯一的问题是，当你想设置item的选定背景时：
复制代码代码如下:
self.tabBar.selectionIndicatorImage=UIImage(named:"TabBarBGSel")
背景图不能铺满整个item，两边会有空隙（如果大家有更好的方法解决可以留言，谢谢），如图：
这个时候需要自定义TabBar，首先声明一个UIButton用来记录当前选中的Button：
复制代码代码如下:
varselectButton:UIButton!
在viewDidLoad()方法的底部加入以下代码：
复制代码代码如下:
//先记录下Controller自带的tabBar的frameletrect=self.tabBar.frame//移除Controller自带的TabBarself.tabBar.removeFromSuperview(www.visa158.com)
//用记录下的frame建立一个UIViewletmyView=UIView(frame:rect)//设置这个View的背景色myView.backgroundColor=UIColor(patternImage:UIImage(named:"TabBarBG")!)self.view.addSubview(myView)
forvari=0;i
letbutton=UIButton()
//根据子ViewController的个数计算Button的宽度letwidth=myView.frame.size.width/CGFloat(self.viewControllers!.count)letx=CGFloat(i)widthbutton.frame=CGRectMake(x,0,width,myView.frame.www.hunanwang.netsize.height)
//设置Button未选中时候的图标letimage=UIImage(named:"TabBar\(i)")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)button.setImage(image,forState:UIControlState.Normal)
//设置Button选中时候的图标，注意这里Button的状态是Selected，而不是HighlightedletselImage=UIImage(named:"TabBar\(i)Sel")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)button.setImage(selImage,forState:UIControlState.Selected)
//设置Button未选中和选中时候的背景图button.setBackgroundImage(UIImage(named:"TabBarBG"),forState:UIControlState.Normal)button.setBackgroundImage(UIImage(named:"TabBarBGSel"),forState:UIControlState.Selected)
//去掉UIButton自带的高光效果button.adjustsImageWhenHighlighted=false
myView.addSubview(button)
//设置UIButton的标记button.tag=i
button.addTarget(self,action:"onClick:",forControlEvents:UIControlEvents.TouchUpInside)
//设置默认的选中项ifi==0{button.selected=trueself.selectButton=button}}/自定义Button的点击事件
:param:button/funconClick(button:UIButton){//将上个选中按钮设置为未选中self.selectButton.selected=false//当前按钮设置为选中button.selected=true//记录选中按钮self.selectButton=button
//通过UITabBarController的selectedIndex属性设置选中了哪个UIViewControllerself.selectedIndex=button.tag}
最终效果如下：
给自定义TabBarController添加动画如何自定义TabBarController我们在上面已经讲过，现在为自定义的TabBar增加动画效果。
直接上代码：
复制代码代码如下:
//用来记录当前选中按钮privatevarcurrentSelectedButton=UIButton()//用来指示选中的背景privatevarselectionIndicatorImageView:UIImageView!//单个item的宽度privatevaritemWidth:CGFloat!在viewDidLoad()方法中加入以下代码：
overridefuncviewDidLoad(){super.viewDidLoad()
//记录TabBarController自带TabBar的位置letrect=self.tabBar.frame//移除TabBarController自带的TabBarself.tabBar.removeFromSuperview()
//自定义TabBar的背景letbackgroundView=UIView(frame:rect)backgroundView.backgroundColor=UIColor(patternImage:UIImage(named:"TabBarBG")!)
self.view.addSubview(backgroundView)
itemWidth=backgroundView.frame.size.width/CGFloat(self.viewControllers!.count)
selectionIndicatorImageView=UIImageView(frame:CGRectMake(0,0,itemWidth,backgroundView.frame.size.height))selectionIndicatorImageView.image=UIImage(named:"TabBarBGSel")
backgroundView.addSubview(selectionIndicatorImageView)
forvari=0;i
letbutton=CGMTabBarButton(frame:CGRectMake(itemWidthCGFloat(i),0,itemWidth,backgroundView.frame.size.height))
letimage=UIImage(named:"TabBar\(i)")!letselImage=UIImage(named:"TabBar\(i)Sel")!
button.setImage(image,forState:UIControlState.Normal)button.setImage(selImage,forState:UIControlState.Selected)
button.addTarget(self,action:"onClick:",forControlEvents:UIControlEvents.TouchUpInside)
button.tag=i
//去掉buttond的高光效果button.adjustsImageWhenHighlighted=false
backgroundView.addSubview(button)}}
添加onClick方法，动画效果也在这里面实现：
复制代码代码如下:
funconClick(button:UIButton){//将上个选中俺就设置为为选中self.currentSelectedButton.selected=false//当前按钮设置为选中button.selected=true
self.currentSelectedButton=button
letx=CGFloat(button.tag)+0.5
//为TabBarItem的背景添加动画UIView.animateWithDuration(0.4,delay:0.0,usingSpringWithDamping:0.7,initialSpringVelocity:10.0,options:UIViewAnimationOptions.CurveEaseInOut,animations:{()->Voidin
self.selectionIndicatorImageView.center.x=self.itemWidthx
},completion:nil)
self.selectedIndex=button.tag}
最终效果如下：
|
|
