如何使用导航控制器实现此效果。
我只在UINavigationController
中嵌入了一个VC,它是以另一个VC的形式呈现的。到目前为止这么好但是我希望看到类似下面的东西,导航栏更短有曲线边缘,状态栏部分是透明的,露出底部视图控制器的状态栏。
到目前为止,这是我到目前为止在故事板中的内容。
到目前为止,我已经能够通过继承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
}
}
哪种方法可以正常工作并弯曲边缘。
答案 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)
}
}
}
协议并实现UIViewControllerTransitioningDelegate
和animationController: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
多数民众赞成......现在,只要按下按钮以模态方式呈现“构图”屏幕,它就会以我想要的效果进行模态动画制作。为了好玩,我添加了一些弹跳效果:)