[iOS]自定义TabBarController (Swift)

作者: 老初 | 来源:发表于2015-01-19 20:44 被阅读4250次

    转载请注明出处:http://www.jianshu.com/p/e81547c3eda7 ,本文出自老初的简书.

    有时候默认的TabBarController不能满足我们的开发需求,比如你想用彩色的图标,系统却只调用图标的轮廓,所以我们需要自己定义一下TabBar。

    方法一:修改TabBarController中的TabBar

    新建 CustomTabBarController 类继承自 UITabBarController,并在Storyboard中设置:

    Storyboard.png

    首先自定义 tabBar 的背景,在 viewDidLoad() 方法中添加:

    // 用图片
    self.tabBar.backgroundImage = UIImage(named: "TabBarBG")
    // 或 
    // 直接用颜色
    self.tabBar.barTintColor = UIColor.blackColor()
    

    然后修改每个子ViewController中的TabBarItem,在 viewDidLoad() 方法中继续添加:

    for (index, viewController) in self.viewControllers!.enumerate() {
        // 声明 TabBarItem 的Image,如果没有imageWithRenderingMode方法Image只会保留轮廓
        let image = UIImage(named: "TabBar\(index)")?.imageWithRenderingMode(.AlwaysOriginal)
        let selectedImage = UIImage(named: "TabBar\(index)Sel")?.imageWithRenderingMode(.AlwaysOriginal)
           
        // 声明新的无标题TabBarItem     
        let tabBarItem = UITabBarItem(title: nil, image: image, selectedImage: selectedImage)
        // 设置 tabBarItem 的 imageInsets 可以使图标居中显示
        tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
                
        viewController.tabBarItem = tabBarItem
    }
    

    完成!效果如下所示:

    效果展示.png

    方法二:自定义TabBar

    上述方法唯一的问题是,当你想设置item的选定背景时:

    self.tabBar.selectionIndicatorImage = UIImage(named: "TabBarBGSel")
    

    背景图不能铺满整个item,两边会有空隙(如果大家有更好的方法解决可以留言,谢谢),如图:

    效果展示.png

    这个时候需要自定义TabBar,首先声明一个UIButton用来记录当前选中的Button:

    var selectButton: UIButton!
    

    在viewDidLoad()方法的底部加入以下代码:

    // 先记录下Controller自带的tabBar的frame
    let rect = self.tabBar.frame
    // 移除Controller自带的TabBar
    self.tabBar.removeFromSuperview()
    
    // 用记录下的frame建立一个UIView
    let myView = UIView(frame: rect)
    // 设置这个View的背景色
    myView.backgroundColor = UIColor(patternImage: UIImage(named: "TabBarBG")!)
    self.view.addSubview(myView)
    
    for var i = 0; i < self.viewControllers?.count; i++ {
        
        let button = UIButton()
        
        // 根据子ViewController的个数计算Button的宽度
        let width = myView.frame.size.width / CGFloat(self.viewControllers!.count)
        let x = CGFloat(i) * width
        button.frame = CGRectMake(x, 0, width, myView.frame.size.height)
    
        // 设置Button未选中时候的图标
        let image = UIImage(named: "TabBar\(i)")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        button.setImage(image, forState: UIControlState.Normal)
    
        // 设置Button选中时候的图标,注意这里Button的状态是Selected,而不是Highlighted
        let selImage = 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)
        
        // 设置默认的选中项
        if i == 0 {
            button.selected = true
            self.selectButton = button
        }
    }
    
        /**
        自定义Button的点击事件
        
        :param: button
        */
        func onClick(button: UIButton) {
            // 将上个选中按钮设置为未选中
            self.selectButton.selected = false
            // 当前按钮设置为选中
            button.selected = true
            // 记录选中按钮
            self.selectButton = button
            
            // 通过UITabBarController的selectedIndex属性设置选中了哪个UIViewController
            self.selectedIndex = button.tag
        }
    

    最终效果如下:

    效果展示.png

    相关文章

      网友评论

      • sunlin1234:那个你写的第一种方式贴出来的代码是全部的么?demon能不能发给我看看,我这里困扰了好久了,总是搞不定
      • 40bb498a328b:棒棒哒
      • 星夜里的一首歌:楼主你好,我看了你的代码,我认为是你的背景图片的布局出了问题?我是用的纯色当背景,用代码实现自动布局,没有问题。
        老初:@星夜里的一首歌 我没有用纯色试过,感谢提醒 :smile:
      • 老初:@tq 嗯,OC思路一样
      • 2c938cc9a694:你这个是swift?如果是oc,思路也是一样的吧?

      本文标题:[iOS]自定义TabBarController (Swift)

      本文链接:https://www.haomeiwen.com/subject/gihhxttx.html