controller弹出时:半透明背景渐变展示.时间选择器从下方弹出.选择器日期滚动到当前日期.
点击确认进行将数据回调到上一控制器,点击页面空白区域退出controller.
controller消失时:背景渐变消失,时间选择器向下退出.
1.首先写一个ViewController,将DatePicker加入.
2.实现DatePicker的展示效果与功能.
3.修改viewController的背景色,使其半透明.
4.实现我们需要的转场视图动画.
5.修改ViewController的transitioningDelegate,使其使用我们重写的转场视图动画.
let cancel = UIButton(frame: CGRect(x: 0, y: 10, width: 70, height: 20)) let sure = UIButton(frame: CGRect(x: ScreenInfo.Width - 80, y: 10, width: 70, height: 20)) cancel.setTitle("取消", for: .normal) sure.setTitle("确认", for: .normal) cancel.setTitleColor(UIColor.colorWithRGBA(r: 255, g: 51, b: 102, a: 1), for: .normal) sure.setTitleColor(UIColor.colorWithRGBA(r: 255, g: 51, b: 102, a: 1), for: .normal) cancel.addTarget(self, action: #selector(self.onClickCancel), for: .touchUpInside) sure.addTarget(self, action: #selector(self.onClickSure), for: .touchUpInside) picker = UIPickerView(frame: CGRect(x: 0, y: 24, width: ScreenInfo.Width, height: 216)) picker.delegate = self picker.dataSource = self picker.backgroundColor = UIColor.clear picker.clipsToBounds = true//如果子视图的范围超出了父视图的边界,那么超出的部分就会被裁剪掉。 //创建日期选择器 self.containV.addSubview(cancel) self.containV.addSubview(sure) self.containV.addSubview(picker) self.view.addSubview(self.containV)
//MARK: - PickerViewDelegate extension EWDatePickerViewController:UIPickerViewDelegate,UIPickerViewDataSource { func numberOfComponents(in pickerView: UIPickerView) -> Int { return 3 } func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { if component == 0 { return 10 }else if component == 1 { return 12 }else { let year: Int = pickerView.selectedRow(inComponent: 0) + currentDateCom.year! let month: Int = pickerView.selectedRow(inComponent: 1) + 1 let days: Int = howManyDays(inThisYear: year, withMonth: month) return days } } private func howManyDays(inThisYear year: Int, withMonth month: Int) -> Int { if (month == 1) || (month == 3) || (month == 5) || (month == 7) || (month == 8) || (month == 10) || (month == 12) { return 31 } if (month == 4) || (month == 6) || (month == 9) || (month == 11) { return 30 } if (year % 4 == 1) || (year % 4 == 2) || (year % 4 == 3) { return 28 } if year % 400 == 0 { return 29 } if year % 100 == 0 { return 28 } return 29 } func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat { return ScreenInfo.Width / 3 } func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat { return 40 } func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { if component == 0 { return "\((currentDateCom.year!) + row)\("年")" }else if component == 1 { return "\(row + 1)\("月")" }else { return "\(row + 1)\("日")" } } func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) { if component == 1 { pickerView.reloadComponent(2) } } }
var backgroundView:UIView = { let view = UIView() view.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.4) return view }() self.view.backgroundColor = UIColor.clear self.view.insertSubview(self.backgroundView, at: 0) self.modalPresentationStyle = .custom//viewcontroller弹出后之前控制器页面不隐藏 .custom代表自定义
//EWDatePickerViewController的推出和取消动画 class EWDatePickerPresentAnimated: NSObject,UIViewControllerAnimatedTransitioning { var type: EWDatePickerPresentAnimateType = .present init(type: EWDatePickerPresentAnimateType) { self.type = type } /// 动画时间 func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return 0.3 } /// 动画效果 func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { switch type { case .present: let toVC : EWDatePickerViewController = transitionContext.viewController(forKey: .to) as! EWDatePickerViewController let toView = toVC.view let containerView = transitionContext.containerView containerView.addSubview(toView!) toVC.containV.transform = CGAffineTransform(translationX: 0, y: (toVC.containV.frame.height)) UIView.animate(withDuration: 0.25, animations: { /// 背景变色 toVC.backgroundView.alpha = 1.0 /// datepicker向上推出 toVC.containV.transform = CGAffineTransform(translationX: 0, y: -10) }) { (finished) in UIView.animate(withDuration: 0.2, animations: { /// transform初始化 toVC.containV.transform = CGAffineTransform.identity }, completion: { (finished) in transitionContext.completeTransition(true) }) } case .dismiss: let toVC : EWDatePickerViewController = transitionContext.viewController(forKey: .from) as! EWDatePickerViewController UIView.animate(withDuration: 0.25, animations: { toVC.backgroundView.alpha = 0.0 /// datepicker向下推回 toVC.containV.transform = CGAffineTransform(translationX: 0, y: (toVC.containV.frame.height)) }) { (finished) in transitionContext.completeTransition(true) } } } }
//MARK: - 转场动画delegate extension EWDatePickerViewController:UIViewControllerTransitioningDelegate{ func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? { let animated = EWDatePickerPresentAnimated(type: .present) return animated } func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { let animated = EWDatePickerPresentAnimated(type: .dismiss) return animated } }
demo地址:DatePicker.求star.
有问题欢迎探讨.