IOS/Objective-C: 导航栏自定义Segue效果与Show Segue对比
IOS/Objective-C: Custom Segue Effect on Navigation Bar Compared with Show Segue
我有两个视图控制器,我使用常规的 Show Segue(从右到左)向一个方向移动,使用自定义的 segue(从左到右)向另一个方向移动。我认为我不应该放松,因为 VC 都不从属于其他,并且使用这些 segues 意味着一个导航控制器可以管理事物。
在两个 VC 的左上角,我有一个包含个人资料照片的通用 BarButton。
使用常规的从右到左 Segue 时,栏按钮上的个人资料照片保持不变。随着屏幕的其余部分移入,这看起来很棒,但两者共有的元素,个人资料照片保留在原位。
在另一个方向(从左到右),但是,使用自定义 segue,包括导航栏在内的整个 VC 屏幕突然出现,您基本上可以看到个人资料照片从左边缘进入停留在正常的左栏按钮位置,同一张照片在片刻之前。这看起来很糟糕。
有什么方法可以强制导航栏中的公共元素在自定义转场期间保持原位,以更好地模仿系统显示转场的行为?
提前感谢您的任何建议。
这是我的自定义转场代码:
#import "customSegue.h"
#import "QuartzCore/QuartzCore.h"
@implementation customSegue
-(void)perform {
UIViewController *destinationController = (UIViewController*)[self destinationViewController];
UIViewController *sourceViewController = (UIViewController*)[self sourceViewController];
CGFloat animationDuration = .40;
transition.duration = animationDuration;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromLeft;
[sourceViewController.navigationController.view.layer addAnimation:transition
forKey:kCATransition];
UIColor *previousWindowBackgroundColor = sourceViewController.view.window.backgroundColor;
sourceViewController.view.window.backgroundColor = destinationController.view.backgroundColor;
[sourceViewController.navigationController pushViewController:destinationController animated:NO];
// switch the window color back after the transition duration from above
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(animationDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// make sure we still have a handle on the destination controller
if (destinationController) {
destinationController.view.window.backgroundColor = previousWindowBackgroundColor;
}
});
}
@end
再问好@user6631314
我认为您不会通过应用 CATransition 并将其附加到 navigationController 视图的层来获得您想要的东西。
相反,我会建议让 presentingViewController 成为 UINavigationController 的委托,并为 LTR 推送滚动你自己的逻辑(导航栏会更流畅,你不应该再担心那个黑条在我之前的回复对您有所帮助 resolve/workaround).
因此,要做到这一点,您需要将呈现视图控制器(或某些协调器视图控制器)设置为 UINavigationControllerDelegate 并实现此方法:
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController*)fromVC
toViewController:(UIViewController*)toVC
在该方法中,您需要检查该操作是否是 UINavigationControllerOperationPush
,如果是 return 符合 UIViewControllerAnimatedTransitioning
的 NSObject 的子class协议(否则 return nil 允许所有其他导航操作成为标准)。在其中 class 将是您处理自定义导航控制器推送动画覆盖的地方。
LTR 推送动画的基本逻辑是,您希望从屏幕左侧开始 toView,然后对其进行动画处理,使其在动画持续时间(代码中的 0.4)后完全显示在屏幕上 - 因此将 x 位置偏移量设置为视图宽度的负值(因此它完全在屏幕外),然后在动画期间将 x 位置设置为 0(或者您可以只 += 视图的宽度)。
这是当前自定义 segue 实现的示例(请注意导航栏也会滑过,这就是您在此处发布的问题):
以及使用自定义动画控制器的过渡:
完整代码如下:
#import "ViewController.h"
#import "LTRPushAnimator.h"
@interface ViewController () < UINavigationControllerDelegate>
@property (strong, nullable) UIView *profileView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.delegate = self;
self.navigationItem.hidesBackButton = YES;
self.profileView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Homer.jpg"]];
[profileImageView setFrame:CGRectMake(0, 0, 40, 40)];
profileImageView.layer.cornerRadius = 20.0f;
profileImageView.layer.masksToBounds = YES;
profileImageView.clipsToBounds = YES;
profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
profileImageView.layer.borderWidth = 1.0f;
[self.profileView addSubview:profileImageView];
UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:self.profileView];
self.navigationItem.leftBarButtonItem = lbi;
// Do any additional setup after loading the view, typically from a nib.
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
}
- (IBAction)pushFakeViewController:(id)sender {
UIViewController *fakeViewController = [[UIViewController alloc] init];
fakeViewController.view.backgroundColor = [UIColor redColor];
UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:self.profileView];
fakeViewController.navigationItem.leftBarButtonItem = lbi;
fakeViewController.navigationItem.hidesBackButton = YES;
[self.navigationController pushViewController:fakeViewController animated:YES];
// this is just in here to pop back to the root view controller since we removed the back button, it can be removed obviously
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self.navigationController popViewControllerAnimated:YES];
});
}
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController*)fromVC
toViewController:(UIViewController*)toVC
{
if (operation == UINavigationControllerOperationPush) {
return [[LTRPushAnimator alloc] init];
}
// otherwise standard animation
return nil;
}
@end
LTRPushAnimator.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface LTRPushAnimator : NSObject <UIViewControllerAnimatedTransitioning>
@end
NS_ASSUME_NONNULL_END
LTRPushAnimator.m
#import "LTRPushAnimator.h"
@implementation LTRPushAnimator
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
return 0.4;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
[self _animatePushByFrameWithContext:transitionContext];
}
- (void)_animatePushByFrameWithContext:(id<UIViewControllerContextTransitioning>)transitionContext {
UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
CGRect toVCFrame = toViewController.view.frame;
CGFloat viewWidth = toVCFrame.size.width;
toVCFrame.origin.x -= viewWidth;
[toViewController.view setFrame:toVCFrame];
[[transitionContext containerView] addSubview:toViewController.view];
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
CGRect finalVCFrame = toViewController.view.frame;
finalVCFrame.origin.x = 0;
[toViewController.view setFrame:finalVCFrame];
} completion:^(BOOL finished) {
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
}];
}
@end
我有两个视图控制器,我使用常规的 Show Segue(从右到左)向一个方向移动,使用自定义的 segue(从左到右)向另一个方向移动。我认为我不应该放松,因为 VC 都不从属于其他,并且使用这些 segues 意味着一个导航控制器可以管理事物。
在两个 VC 的左上角,我有一个包含个人资料照片的通用 BarButton。
使用常规的从右到左 Segue 时,栏按钮上的个人资料照片保持不变。随着屏幕的其余部分移入,这看起来很棒,但两者共有的元素,个人资料照片保留在原位。
在另一个方向(从左到右),但是,使用自定义 segue,包括导航栏在内的整个 VC 屏幕突然出现,您基本上可以看到个人资料照片从左边缘进入停留在正常的左栏按钮位置,同一张照片在片刻之前。这看起来很糟糕。
有什么方法可以强制导航栏中的公共元素在自定义转场期间保持原位,以更好地模仿系统显示转场的行为?
提前感谢您的任何建议。
这是我的自定义转场代码:
#import "customSegue.h"
#import "QuartzCore/QuartzCore.h"
@implementation customSegue
-(void)perform {
UIViewController *destinationController = (UIViewController*)[self destinationViewController];
UIViewController *sourceViewController = (UIViewController*)[self sourceViewController];
CGFloat animationDuration = .40;
transition.duration = animationDuration;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromLeft;
[sourceViewController.navigationController.view.layer addAnimation:transition
forKey:kCATransition];
UIColor *previousWindowBackgroundColor = sourceViewController.view.window.backgroundColor;
sourceViewController.view.window.backgroundColor = destinationController.view.backgroundColor;
[sourceViewController.navigationController pushViewController:destinationController animated:NO];
// switch the window color back after the transition duration from above
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(animationDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// make sure we still have a handle on the destination controller
if (destinationController) {
destinationController.view.window.backgroundColor = previousWindowBackgroundColor;
}
});
}
@end
再问好@user6631314
我认为您不会通过应用 CATransition 并将其附加到 navigationController 视图的层来获得您想要的东西。
相反,我会建议让 presentingViewController 成为 UINavigationController 的委托,并为 LTR 推送滚动你自己的逻辑(导航栏会更流畅,你不应该再担心那个黑条在我之前的回复对您有所帮助 resolve/workaround).
因此,要做到这一点,您需要将呈现视图控制器(或某些协调器视图控制器)设置为 UINavigationControllerDelegate 并实现此方法:
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController*)fromVC
toViewController:(UIViewController*)toVC
在该方法中,您需要检查该操作是否是 UINavigationControllerOperationPush
,如果是 return 符合 UIViewControllerAnimatedTransitioning
的 NSObject 的子class协议(否则 return nil 允许所有其他导航操作成为标准)。在其中 class 将是您处理自定义导航控制器推送动画覆盖的地方。
LTR 推送动画的基本逻辑是,您希望从屏幕左侧开始 toView,然后对其进行动画处理,使其在动画持续时间(代码中的 0.4)后完全显示在屏幕上 - 因此将 x 位置偏移量设置为视图宽度的负值(因此它完全在屏幕外),然后在动画期间将 x 位置设置为 0(或者您可以只 += 视图的宽度)。
这是当前自定义 segue 实现的示例(请注意导航栏也会滑过,这就是您在此处发布的问题):
以及使用自定义动画控制器的过渡:
完整代码如下:
#import "ViewController.h"
#import "LTRPushAnimator.h"
@interface ViewController () < UINavigationControllerDelegate>
@property (strong, nullable) UIView *profileView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.delegate = self;
self.navigationItem.hidesBackButton = YES;
self.profileView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Homer.jpg"]];
[profileImageView setFrame:CGRectMake(0, 0, 40, 40)];
profileImageView.layer.cornerRadius = 20.0f;
profileImageView.layer.masksToBounds = YES;
profileImageView.clipsToBounds = YES;
profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
profileImageView.layer.borderWidth = 1.0f;
[self.profileView addSubview:profileImageView];
UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:self.profileView];
self.navigationItem.leftBarButtonItem = lbi;
// Do any additional setup after loading the view, typically from a nib.
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
}
- (IBAction)pushFakeViewController:(id)sender {
UIViewController *fakeViewController = [[UIViewController alloc] init];
fakeViewController.view.backgroundColor = [UIColor redColor];
UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:self.profileView];
fakeViewController.navigationItem.leftBarButtonItem = lbi;
fakeViewController.navigationItem.hidesBackButton = YES;
[self.navigationController pushViewController:fakeViewController animated:YES];
// this is just in here to pop back to the root view controller since we removed the back button, it can be removed obviously
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self.navigationController popViewControllerAnimated:YES];
});
}
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController*)fromVC
toViewController:(UIViewController*)toVC
{
if (operation == UINavigationControllerOperationPush) {
return [[LTRPushAnimator alloc] init];
}
// otherwise standard animation
return nil;
}
@end
LTRPushAnimator.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface LTRPushAnimator : NSObject <UIViewControllerAnimatedTransitioning>
@end
NS_ASSUME_NONNULL_END
LTRPushAnimator.m
#import "LTRPushAnimator.h"
@implementation LTRPushAnimator
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
return 0.4;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
[self _animatePushByFrameWithContext:transitionContext];
}
- (void)_animatePushByFrameWithContext:(id<UIViewControllerContextTransitioning>)transitionContext {
UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
CGRect toVCFrame = toViewController.view.frame;
CGFloat viewWidth = toVCFrame.size.width;
toVCFrame.origin.x -= viewWidth;
[toViewController.view setFrame:toVCFrame];
[[transitionContext containerView] addSubview:toViewController.view];
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
CGRect finalVCFrame = toViewController.view.frame;
finalVCFrame.origin.x = 0;
[toViewController.view setFrame:finalVCFrame];
} completion:^(BOOL finished) {
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
}];
}
@end