短UINavigationBar,带有弯曲边缘和透明状态栏

时间:2017-12-14 00:05:09

标签: ios swift uinavigationcontroller uinavigationbar uistatusbar

如何使用导航控制器实现此效果。

我只在UINavigationController中嵌入了一个VC,它是以另一个VC的形式呈现的。到目前为止这么好但是我希望看到类似下面的东西,导航栏更短有曲线边缘,状态栏部分是透明的,露出底部视图控制器的状态栏。

enter image description here

到目前为止,这是我到目前为止在故事板中的内容。

enter image description here

到目前为止,我已经能够通过继承UINavigationController来实现导航栏的圆边。但是我不知道如何让navBar从顶部缩短:

class ComposeNavigController: UINavigationController {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        self.definesPresentationContext = true
        self.providesPresentationContextTransitionStyle = true
        self.modalPresentationCapturesStatusBarAppearance = false
        self.modalPresentationStyle = .overFullScreen


    }

    override func viewDidLoad() {
        super.viewDidLoad()
            view.clipsToBounds = true
            view.layer.cornerRadius = 16.0
            view.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
            view.layer.shadowOffset = .zero
            view.layer.shadowColor = UIColor.black.cgColor
            view.layer.shadowRadius = 16.0
            view.layer.shadowOpacity = 0.5
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath
    }

}

哪种方法可以正常工作并弯曲边缘。

enter image description here

1 个答案:

答案 0 :(得分:2)

好的,所以这是我在问题中除了<div class="content-div-style"> <ion-list class="list-style"> <ion-item> <ion-grid no-padding> <ion-row *ngFor="let keyValue of caseDetailsJsonKeyValues"> <ion-col col-6 text-wrap> <ion-label class="key-font-style">{{ keyValue }}</ion-label> </ion-col> <ion-col col-6 text-wrap> <ion-label class="value-font-style">{{ faCaseDetails.case_details[keyValue] }}</ion-label> </ion-col> </ion-row> </ion-grid> </ion-item> </ion-list> </div> 子类之外我必须做的事情。我必须使用UINavigationController代表来实现我想要的目标。

我创建了两个子类UIViewControllerAnimatedTransitioning,并且符合上述协议。

第一个用于NSObject转换 -

present

import UIKit class ComposePresentTransitionController: NSObject, UIViewControllerAnimatedTransitioning { func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return 0.6 } func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { let fromViewController = transitionContext.viewController(forKey: .from)! let toViewController = transitionContext.viewController(forKey: .to)! let containerView = transitionContext.containerView let screenBounds = UIScreen.main.bounds let topOffset: CGFloat = UIApplication.shared.statusBarFrame.height var finalFrame = transitionContext.finalFrame(for: toViewController) finalFrame.origin.y += topOffset finalFrame.size.height -= topOffset toViewController.view.frame = CGRect(x: 0.0, y: screenBounds.size.height, width: finalFrame.size.width, height: finalFrame.size.height) containerView.addSubview(toViewController.view) UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 1.0, options: .curveEaseOut, animations: { toViewController.view.frame = finalFrame fromViewController.view.alpha = 0.3 }) { (finished) in transitionContext.completeTransition(finished) } UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0.0, options: .curveEaseOut, animations: { }) { (finished) in } } } 转换的第二个 -

dismiss

然后,从将要呈现此视图控制器的视图控制器需要符合import UIKit class ComposeDismissTransitionController: NSObject, UIViewControllerAnimatedTransitioning { func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return 0.3 } func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { let fromViewController = transitionContext.viewController(forKey: .from)! let toViewController = transitionContext.viewController(forKey: .to)! let screenBounds = UIScreen.main.bounds var finalFrame = fromViewController.view.frame finalFrame.origin.y = screenBounds.size.height UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0.0, options: .curveEaseIn, animations: { fromViewController.view.frame = finalFrame toViewController.view.alpha = 1.0 }) { (finished) in fromViewController.view.removeFromSuperview() transitionContext.completeTransition(finished) } } } 协议并实现UIViewControllerTransitioningDelegateanimationController:forPresented方法,如此 -

animationController:forDismissed

完成后,extension PresentingVC: UIViewControllerTransitioningDelegate { func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? { return ComposePresentTransitionController() } func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { return ComposeDismissTransitionController() } } 需要将PresentingVC设置为UIViewControllerTransitioningDelegate,这已在self -

中完成
prepareForSegue

如果你是像我这样的神圣仇恨者,那么你也可以通过代码中的override func prepare(for segue: UIStoryboardSegue, sender: Any?) { super.prepare(for: segue, sender: sender) segue.destination.transitioningDelegate = self } 按钮完成这项任务。

IBAction

多数民众赞成......现在,只要按下按钮以模态方式呈现“构图”屏幕,它就会以我想要的效果进行模态动画制作。为了好玩,我添加了一些弹跳效果:)

enter image description here