将模态视图放在视图上并使背景变灰

Question

在过去的 3 个小时里，我一直在尝试完成此操作，但我不知道如何执行此操作。有人可以帮忙吗？

所以这就是我想要做的。当我按下一个按钮时，比如说一个Sign In 按钮，我希望弹出一个模态视图，使其后面的视图变为灰色且不可点击。在这个模态视图上，我想要几个按钮和静态标签。

我已经阅读并尝试理解了一些资源，例如：Present modal view controller in half size parent controller、http://makeapppie.com/2014/08/30/the-swift-swift-tutorials-adding-modal-views-and-popovers/、How to use modal views in swift? 和其他一些资源。但是，我很难理解代码。

到目前为止，我有这段代码应该让模态视图位于它后面的视图之上：

@IBAction func signIn(sender: AnyObject) {
    self.modalTransitionStyle = UIModalTransitionStyle.CoverVertical
    // Cover Vertical is necessary for CurrentContext
    self.modalPresentationStyle = .CurrentContext
    // Display on top of    current UIView
    self.presentViewController(SignInViewController(), animated: true, completion: nil)
}

但这并没有产生我想要的效果。有人帮忙吗？

Answer 1

首先，创建灰色的空视图

func makeGrayView() -> UIView {
    var view = UIView(frame:UIScreen.mainScreen().applicationFrame)
    self.view.backgroundColor = UIColor.greyColor()
    return view
}

其次，将刚刚创建的视图设置为叠加层的背景

var backView = self.makeGrayView()
self.view.addSubview(backView)

Answer 2

你必须使用 Cusotm UIViewControllerAnimation 类来实现这一点。使用上面的代码.CreateTransparentTransition.h and .m File

#import <Foundation/Foundation.h>

@interface TransparentTransition :NSObject<UIViewControllerAnimatedTransitioning,UIViewControllerTransitioningDelegate>{   
BOOL isPresenting;
}
@end

//TransparentTransition.m

#import "TransparentTransition.h"

@implementation TransparentTransition
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{
return 0.8f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{

UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *toView = toVC.view;
UIView *fromView = fromVC.view;

UIView* containerView = [transitionContext containerView];


// Position the presented view off the top of the container view

if(isPresenting){
   [containerView addSubview:toView];
    toView.frame = CGRectMake(0, -toView.frame.size.height, toView.frame.size.width, toView.frame.size.height);
    [UIView animateWithDuration:[self transitionDuration:transitionContext]
                          delay:0
         usingSpringWithDamping:.8
          initialSpringVelocity:6.0
                        options:0
                     animations:^{
                          toView.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"black_patch.png"]];
                         CGAffineTransform scaleTrans  = CGAffineTransformMakeScale(1.0f, 1.0f);
                         CGAffineTransform lefttorightTrans  = CGAffineTransformMakeTranslation(0.f,+toView.frame.size.height);
                         toView.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);


                     }
                     completion:^(BOOL finished){
                         [transitionContext completeTransition:YES];

                     }];

}
else{

    [UIView animateWithDuration:[self transitionDuration:transitionContext]
                          delay:0
                        options:0
                     animations:^{
                         //                              toView.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"black_patch.png"]];
                         CGAffineTransform scaleTrans  = CGAffineTransformMakeScale(1.0f, 1.0f);
                         CGAffineTransform lefttorightTrans  = CGAffineTransformMakeTranslation(0,-fromView.frame.size.height);
                         fromView.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);


                     }
                     completion:^(BOOL finished){
                         [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
                     }];


    }

   }



- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{

isPresenting=YES;
return self;
}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
isPresenting=NO;
return self;
}

- (UIDynamicAnimator*)animateForTransitionContext:(id<UIViewControllerContextTransitioning>)transitionContext {
// Has to be implemented by subclasses
return nil;
}

//上面动画的使用

var transitionManager:TransparentTransition
@IBAction func signIn(sender: AnyObject) {

let detail = self.storyboard?.instantiateViewControllerWithIdentifier("detail") as! DetailViewController
    detail.modalPresentationStyle = UIModalPresentationStyle.Custom;
    detail.transitioningDelegate = transitionManager;
self.presentViewControllerdetail, animated: true, completion: nil)
}

这里还有一个很好的教程，它解释了如何制作如此酷的动画 http://www.appcoda.com/custom-view-controller-transitions-tutorial/

Answer 3

您可以使用情节提要来做到这一点。首先将一个按钮拖到您的第一个 UIViewController 上。

然后将按钮连接到这样的操作

@IBAction func presentForm() {
    self.view.backgroundColor = UIColor.lightGrayColor()
}

好的，其次，将另一个 UIViewController 拖到情节提要上，然后 Ctrl 将按钮拖到这个控制器上以创建一个转场。使用我在下面的相同设置。以模态和全屏形式呈现。

Ok 接下来是在第二个 ViewController 上创建表单。我在下面添加了一个简单的。下一步是选择第二个视图控制器上的视图。这是为了将背景视图颜色更改为清除颜色。该图像显示了层次结构中的视图和选择为清除的背景颜色。

然后将另一个视图拖到表单元素所在的位置。就像我拥有的​​标签和文本字段一样。当您构建并运行您的项目时，您将看到以下屏幕。

请注意，您必须添加自己的自动布局约束，但它们很简单。你也可以玩弄代码。就像在按钮按下时更改第一个 Viewcontroller 的 Opaque 值等。这应该足以让你开始。