额...貌似挺长时间没有总结新知识了,最近在看swift,之前swift刚出来的时候大体看了一遍,后来时间长了没看加之swift2.0做了比较大的调整,公司项目也不是用swift写的,也就没怎么看了,谁成想忘的差不多了,趁公司最近项目不忙,有抽时间看了一丢丢,感觉这知识真是看一遍有一遍的收获,最近看了一个效果感觉挺好玩的.就是带有动画效果的TabBarItem,在这里总结一下.-----以上是为了给自己一个警醒,要多总结知识,加油,小青年,未来是你的!!!
首先,效果图如下
这是一个大牛高仿的爱鲜蜂的效果,本着学习的态度跟着实现了一下这个功能,记录一下心得.功能主要是分两块,一个就是首次进入app时会有一个引导页,是用UICollectionView实现的.第二个功能就是带有动画效果的TabBarItem
首先是引导页功能的实现:
在程序打开时在AppDelegate 的
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {...}
在设置rootViewController时使用NSUserDefaults.standardUserDefaults()在应用打开运行时是否能根据字典找到value,如果value为nil说明是第一次进入app,然后进入引导页,并且给NSUserDefaults.standardUserDefaults()赋值,这样下次再打开应用的时候就能根据key找到value值了,通过这个道理来判断是否是第一次进入app,代码:
window = UIWindow(frame: ScreenBounds)
window?.makeKeyAndVisible()
第一次打开应用:
利用UICollectionView创建,1:先看cell中的内容,将imageView和Button放在collectionViewCell中,在这里需要注意,在前三页中没有"立即体验"button,
所以在自定义cell的时候需要一个函数在外面调用以改变button的隐藏与否:
func setNextBtnHidden(hidden:Bool) {
nextBtn.hidden = hidden
}
当滑动到第四页的时候,"立即体验"按钮出现点击按钮触发通知,通知controller进行界面跳转
func nextBtnClick() {
NSNotificationCenter.defaultCenter().postNotificationName(GuideViewControllerDidFinish, object: nil)
}
2:再看collectionViewController中的相关代码,collectionView需要layout:
let layout = UICollectionViewFlowLayout()
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
layout.itemSize = ScreenBounds.size
layout.scrollDirection = .Horizontal
然后设置collectionView:
collectionView = UICollectionView(frame: ScreenBounds, collectionViewLayout: layout)
collectionView?.delegate = self
collectionView?.dataSource = self
collectionView?.showsHorizontalScrollIndicator = false
collectionView?.showsVerticalScrollIndicator = false
collectionView?.pagingEnabled = true
collectionView?.bounces = false
collectionView?.registerClass(GuideCollectionViewCell.self , forCellWithReuseIdentifier: cellIdentifier)
view.addSubview(collectionView!)
注意:这一步在初始化collectionView的时候不要忘记registerCell
设置pageControl:
private var pageController = UIPageControl(frame: CGRectMake(0, ScreenHeight - 50, ScreenWidth, 20))
private func createPageControll() {
pageController.numberOfPages = imageNames.count
pageController.currentPage = 0
view.addSubview(pageController)
}
然后实现collectionView的delegate和dataSource
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageNames.count
}
返回一共有多少item
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellIdentifier, forIndexPath: indexPath) as! GuideCollectionViewCell
cell.newImage = UIImage(named: imageNames[indexPath.row])
if indexPath.row != imageNames.count - 1 {
cell.setNextBtnHidden(true)
}
return cell
}
设置自定义的cell ,并且在导航页不是最后一页的时候调用cell中设置Button Hidden的函数将Button隐藏
scrollView的代理方法:
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
if scrollView.contentOffset.x == ScreenWidth * CGFloat(imageNames.count - 1) {
let cell = collectionView?.cellForItemAtIndexPath(NSIndexPath(forRow: imageNames.count - 1, inSection: 0)) as! GuideCollectionViewCell
cell.setNextBtnHidden(false)
isHiddenNextButton = false
}
}
当滑动即将停止的时候,通过判断滑动页面的x的偏移量来设置cell中Button的隐藏或者显示
func scrollViewDidScroll(scrollView: UIScrollView) {
if scrollView.contentOffset.x != ScreenWidth * CGFloat(imageNames.count - 1) && !isHiddenNextButton && scrollView.contentOffset.x > ScreenWidth * CGFloat(imageNames.count - 2) {
let cell = collectionView?.dequeueReusableCellWithReuseIdentifier(cellIdentifier, forIndexPath: NSIndexPath(forRow: imageNames.count - 1, inSection: 0)) as! GuideCollectionViewCell
cell.setNextBtnHidden(true)
isHiddenNextButton = true
}
pageController.currentPage = Int(scrollView.contentOffset.x / ScreenWidth + 0.5)
}
当页面开始滑动时判断综合条件对cell中button进行设置,并且设置pageControl的currentPage
至此实现了启动导航页的collectionView实现的方法
接下来说一下有动画效果的TabBarItem的实现
底部的TabBarItem动画使用了三方框架RAMAnimatedTabBar,由于原来的框架 只能通过StoryBoard初始化控件,并且无法满足项目需求,所以源作者对框架进行了修改,在TabBarController初始化时,通过拦截Items,重新创建一套相同的View,并且在每个View上添加ImageView和Label,在View的点击事件中,控制动画即可.代码如下:
1.这是声明了一个选择TabBarItem时动画的协议
protocol RAMItemAnimationProtocol {
func playAnimation(icon: UIImageView, textLabel:UILabel)
func deselectAnimation(icon: UIImageView, textLabel: UILabel, defaultTextColor: UIColor)
func selectedState(icon: UIImageView, textLabel: UILabel)
}
2.遵守动画协议创建的动画类,主要是设置动画周期,item中选择的颜色
class RAMItemAnimation:NSObject, RAMItemAnimationProtocol {
var duration: CGFloat = 0.6
var textSelectedColor: UIColor = UIColor.grayColor()
var iconSelectedColor: UIColor?
func playAnimation(icon: UIImageView, textLabel: UILabel) {
}
func deselectAnimation(icon: UIImageView, textLabel: UILabel, defaultTextColor: UIColor) {
}
func selectedState(icon: UIImageView, textLabel: UILabel) {
}
}
继承自RAMItemAnimation的类,主要实现父类中的协议方法,具体设置textLabel和UIImageView的动画周期和效果
class RAMBounceAnimation: RAMItemAnimation {
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 {
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 = CAKeyframeAnimation(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,声明UITabBarItem中的func deselectAnimation(icon: UIImageView, textLabel: UILabel)和 func selectedState(icon:UIImageView, textLabel:UILabel) 方法,以便在自定义UITabBarController中使用,其中animation是继承的RAMItemAnimation,可以调用父类中的方法,也就是父类中提前已经声明好的几个动画函数
class RAMAnimatedTabBarItem: UITabBarItem {
var animation: RAMItemAnimation?
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)
}
}
class AnimationTabBarController: UITabBarController {
var iconsView:[(icon: UIImageView, textLabel: UILabel)] = []
var iconsImageName:[String] = ["v2_home", "v2_order", "shopCart", "v2_my"]
var iconsSelectedImageName:[String] = ["v2_home_r", "v2_order_r", "shopCart_r", "v2_my_r"]
override func viewDidLoad() {
super.viewDidLoad()
最后MainTabBarController继承AnimationTabBarController
调用createViewContainers也就是父类中的方法
并且给tabBarController添加视图控制器
这只是原作者项目中一个比较小的部分,原作者链接:http://www.jianshu.com/p/879f58fe3542
本Demo链接:https://github.com/iOSJason/AnimationTabBarItemSwiftDemo.git
客服电话
APP下载
官方微信
请发表评论