仿京东TabBar动画(swift)

中心思想就是继承UITabBarController,然后将系统的tabBar隐藏掉,然后创建一个View代替tabBar,然后定义好点击事件切换控制器,通过单例方法控制view的动画隐藏和显示。demo地址

调用方法

创建tabbar的时候只需要
let tabBarVC = TabBarViewController.addChildVc(controllerArr as? [Any], titles: arr as? [Any], images: defaultImageArr as? [Any], selectedImages: selectImageArr as? [Any], tabBarNaviChildVC: UINavigationController.init())       
self.window?.rootViewController = tabBarVC;
即可创建成功
动态显示隐藏是这样调用
 TabBarViewController.shareManager().hidesTabbar(yesOrNo: false, animation: true)

第一步

继承UITabBarController创建一个类TabBarViewController
1,定义一些用到的对象
let kScreenWidth:CGFloat = UIScreen.main.bounds.width
定义一个单例
static let _shareManager = TabBarViewController()   
/** 自定义的覆盖原先的tarbar的控件 */   
var tabBarView = UIView()   
/** 记录前一次选中的按钮 */ 
var selectLastBtn = TabBarButton()   
/*     * 是否隐藏tabBar     */ 
  var tabBarHidden = Bool()

第二步

 //初始化一个单例
 class func shareManager()->TabBarViewController{      return _shareManager    }  
//进入页面之后调用的方法
 override func viewDidLoad() {     
 super.viewDidLoad()     
 self.setUpTabbar()   
}   

//配置view替换tabbar 
func setUpTabbar() {     
 self.tabBar.isHidden = true       
let tabBarViewY:CGFloat = self.view.frame.size.height-49        s
elf.tabBarView = UIView.init(frame: CGRect.init(x: 0, y: tabBarViewY, width: kScreenWidth, height: 49))      
self.tabBarView.isUserInteractionEnabled = true     
self.tabBarView.backgroundColor = UIColor.white
self.tabBarView.layer.borderColor = UIColor.groupTableViewBackground.cgColor  
self.tabBarView.layer.borderWidth = 1        self.view.addSubview(self.tabBarView)    }    
//添加子控制器的方法
class func addChildVc(_ childVcs: [Any]?, titles: [Any]?, images: [Any]?, selectedImages: [Any]?, tabBarNaviChildVC: UINavigationController?) -> TabBarViewController {   
 let baseTabBar = TabBarViewController.shareManager()       
for i in 0...(childVcs?.count)! - 1 {           
let tabBarNaviChildVC:UINavigationController = UINavigationController.init(rootViewController: childVcs![i] as! UIViewController)           
baseTabBar .addChildViewController(tabBarNaviChildVC)           
baseTabBar.creatButton(normal: images?[i] as? String, selected: selectedImages?[i] as? String, tittle: titles?[i]as?String, tag: i, index: CGFloat((childVcs?.count)!))           
let button = baseTabBar.tabBarView.subviews[0];           
baseTabBar .changeViewController((button as! TabBarButton));       
}       
return baseTabBar;  
  }

// 按钮被点击时调用 

@objc func changeViewController(_ sender: TabBarButton?) {       

sender?.isEnabled = false       

if selectLastBtn != sender {           

selectLastBtn.isEnabled = true       

}        

selectLastBtn = sender!        

selectedViewController = self.viewControllers?[(sender?.tag)!]   

}

//抽出来创建按钮方法

 func creatButton(normal: String?, selected: String?, tittle: String?, tag: Int, index: CGFloat) {       

let customButton = TabBarButton(type: .custom)       

customButton.tag = tag       

let count: CGFloat = index       

let buttonW = CGFloat(tabBarView.frame.size.width / count)       

let buttonH: CGFloat = tabBarView.frame.size.height       

let rect:CGRect = CGRect(x: buttonW * CGFloat(tag), y: 0, width: buttonW, height: buttonH)       

customButton.frame = rect;       

customButton.setImage(UIImage(named: normal!), for: .normal)       

customButton.setImage(UIImage(named: selected!), for: .disabled)       

customButton.setTitle(tittle, for: .normal)       

customButton.setTitleColor(UIColor.gray, for: .normal)       

customButton.setTitleColor(UIColor.red, for: UIControlState.disabled)       

customButton.addTarget(self, action:#selector(changeViewController(_:)), for: .touchDown)        customButton.imageView?.contentMode = .center       

customButton.titleLabel?.textAlignment = NSTextAlignment.center;       

customButton.titleLabel?.font = UIFont.systemFont(ofSize: 12);       

self.tabBarView.addSubview(customButton)    }

 // 是否动画隐藏tabBar    可以使用单例方法调用

func hidesTabbar(yesOrNo:Bool,animation:Bool)  {       

self.tabBarHidden = yesOrNo;       

if yesOrNo == true {           

if tabBarView.frame.origin.y == view.frame.size.height {               

return           

}        }

else {           

if tabBarView.frame.origin.y == view.frame.size.height - 49 {               

return            }        }       

if animation == true {           

UIView.animate(withDuration: 0.3, animations: {               

if yesOrNo == true {                   

self.tabBarView.frame = CGRect(x: self.tabBarView.frame.origin.x, y: self.tabBarView.frame.origin.y + 49, width: self.tabBarView.frame.size.width, height: self.tabBarView.frame.size.height)               

} else {                   

self.tabBarView.frame = CGRect(x: self.tabBarView.frame.origin.x, y: self.tabBarView.frame.origin.y - 49, width: self.tabBarView.frame.size.width, height: self.tabBarView.frame.size.height)             

  }            })        }

else{           

UIView.animate(withDuration: 0.3, animations: {               

if yesOrNo == true {                   

self.tabBarView.frame = CGRect(x: self.tabBarView.frame.origin.x, y: self.tabBarView.frame.origin.y + 49, width: self.tabBarView.frame.size.width, height: self.tabBarView.frame.size.height)               

} else {                   

self.tabBarView.frame = CGRect(x: self.tabBarView.frame.origin.x, y: self.tabBarView.frame.origin.y - 49, width: self.tabBarView.frame.size.width, height: self.tabBarView.frame.size.height)             

  }           
})        }    }

第三步


文中的TabBarButton是继承了button,写了一个内部实现的图片在上文字在下的button。就重写了下边的两个方法

    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {       

let imageW:CGFloat = contentRect.size.width;       

let imageH:CGFloat = contentRect.size.height*0.6       

return CGRect.init(x: 0, y: 5, width: imageW, height: imageH);   

}   

override func titleRect(forContentRect contentRect: CGRect) -> CGRect {       

let titleY: CGFloat = contentRect.size.height * 0.6       

let titleW: CGFloat = contentRect.size.width       

let titleH: CGFloat = contentRect.size.height - titleY       

return CGRect(x: 0, y: titleY, width: titleW, height: titleH)    }

有点瑕疵就是在侧滑返回的时候如果返回到一半的时候放弃返回,但是这时候tabbar依然会出来。可以在控制器的生命周期中控制一下

你可能感兴趣的:(仿京东TabBar动画(swift))