Swift 带有动画效果的TabBarItem

作者: 劉光軍_MVP | 来源:发表于2016-03-07 00:25 被阅读1393次

额...貌似挺长时间没有总结新知识了,最近在看swift,之前swift刚出来的时候大体看了一遍,后来时间长了没看加之swift2.0做了比较大的调整,公司项目也不是用swift写的,也就没怎么看了,谁成想忘的差不多了,趁公司最近项目不忙,有抽时间看了一丢丢,感觉这知识真是看一遍有一遍的收获,最近看了一个效果感觉挺好玩的.就是带有动画效果的TabBarItem,在这里总结一下.-----以上是为了给自己一个警醒,要多总结知识,加油,小青年,未来是你的!!!

首先,效果图如下

PageBlurTestGif.gif

这是一个大牛高仿的爱鲜蜂的效果,本着学习的态度跟着实现了一下这个功能,记录一下心得.功能主要是分两块,一个就是首次进入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()
        
        //判断是否是第一次开启应用
        let isFirstOpen = NSUserDefaults.standardUserDefaults().objectForKey("First")
        if isFirstOpen == nil {
            //第一次打开应用
            window?.rootViewController = GuideViewController()
            
            NSUserDefaults.standardUserDefaults().setObject("First", forKey: "First")
        } else {
            //不是第一次打开应用
            loadHomeViewController()
        }

第一次打开应用:
利用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()

        // Do any additional setup after loading the view.
    }
    
    //创建承载TabBarItem的视图容器,里面是item中的titleLabel和UIImageView,将视图容器存入字典,以便在后续使用中可以分清是点了哪一个item
    
    func createViewContainers() -> [String: UIView] {
        
        var containersDict = [String: UIView]()
        //tabbar的item是继承的自定义的RAMAnimatedTabBarItem,其中包含了动画设置的函数
        guard let customItems = tabBar.items as? [RAMAnimatedTabBarItem]
            else {
                return containersDict
        }
        //根据item的个数创建视图容器,将视图容器放在字典中
        for index in 0..<customItems.count {
            let viewContainer = createViewContainer(index)
            containersDict["container\(index)"] = viewContainer
        }
        return containersDict
    }
    
    //根据index值创建每个的视图容器
    func createViewContainer(index: Int) -> UIView {
        
        let viewWidth: CGFloat = ScreenWidth / CGFloat(tabBar.items!.count)
        let viewHeight: CGFloat = tabBar.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
        
        //给容器添加手势,其实是自己重写了系统的item的功能,因为我们要在里面加入动画
        let tap = UITapGestureRecognizer(target: self, action: "tabBarClick:")
        viewContainer.addGestureRecognizer(tap)
        return viewContainer
        
    }
    
    //创建items的具体内容
    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()
                
                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.append(iconsAndLabels)
                
                item.image = nil
                item.title = ""
                
                if index == 0 {
                    selectedIndex = 0
                    selectItem(0)
                }
            }
        }
    }
    
    //重写父类的didSelectItem
    override func tabBar(tabBar: UITabBar, didSelectItem item: UITabBarItem) {
        setSelectIndex(from: selectedIndex, to: item.tag)
    }
    
    //选择item时item中内容的变化
    func selectItem(index: Int) {
        let items = tabBar.items as! [RAMAnimatedTabBarItem]
        let selectIcon = iconsView[index].icon
        selectIcon.image = UIImage(named: iconsSelectedImageName[index])!
        items[index].selectedState(selectIcon, textLabel: iconsView[index].textLabel)
    }
    
    //根据选择的index值设置item中的内容并且执行动画父类中的方法
    func setSelectIndex(from from: Int, to: Int) {
        
        selectedIndex = to
        let items = tabBar.items as! [RAMAnimatedTabBarItem]
        
        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)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

最后MainTabBarController继承AnimationTabBarController

调用createViewContainers也就是父类中的方法

并且给tabBarController添加视图控制器

//MARK: - 初始化tabbar
    private func createMainTabBarChildViewController() {
        tabBarControllerAddChildViewController(HomeViewController(), title: "首页", imageName: "v2_home", selectedImageName: "v2_home_r", tag: 0)
        tabBarControllerAddChildViewController(MarketViewController(), title: "超市", imageName: "v2_order", selectedImageName: "v2_order_r", tag: 1)
        tabBarControllerAddChildViewController(ShopViewController(), title: "商店", imageName: "shopCart", selectedImageName: "shopCart", tag: 2)
        tabBarControllerAddChildViewController(MineViewController(), title: "我的", imageName: "v2_my", selectedImageName: "v2_my_r", tag: 3)
        
    }
    
    private func tabBarControllerAddChildViewController(childView: UIViewController, title: String, imageName: String, selectedImageName: String, tag: Int) {
        
        let vcItem = RAMAnimatedTabBarItem(title: title, image: UIImage(named: imageName), selectedImage: UIImage(named: selectedImageName))
        vcItem.tag = tag
        vcItem.animation = RAMBounceAnimation()
        childView.tabBarItem = vcItem
        
        let navigationVC = BaseNavigationController(rootViewController:childView)
        addChildViewController(navigationVC)
    }
    
    func tabBarController(tabBarController: UITabBarController, shouldSelectViewController viewController: UIViewController) -> Bool {
        let childArr = tabBarController.childViewControllers as NSArray
        let index = childArr.indexOfObject(viewController)
        
        if index == 2 {
            return false
        }
        return true
    }

这只是原作者项目中一个比较小的部分,原作者链接:http://www.jianshu.com/p/879f58fe3542

本Demo链接:https://github.com/iOSJason/AnimationTabBarItemSwiftDemo.git