iOS: Modal ViewController avec fond transparent

J'essaye de présenter un contrôleur de vue de manière modale, avec un fond transparent. Mon objectif est de permettre à la vue des contrôleurs de présentation et de présentation d'être affichées en même temps. Le problème est que lorsque l'animation de présentation se termine, la vue du contrôleur de vue de présentation disparaît.

- (IBAction)pushModalViewControllerButtonPressed:(id)sender
{
    ModalViewController *modalVC = [[ModalViewController alloc] init];
    [self presentViewController:modalVC animated:YES completion:nil];
}

Je sais que je pourrais simplement ajouter la vue en tant que sous-vue, mais j'aimerais éviter cette solution pour une raison quelconque. Comment pourrais-je résoudre ce problème?

Ce code suivant ne fonctionne que sur l'iPad.

self.view.backgroundColor = [UIColor clearColor];
self.modalPresentationStyle = UIModalPresentationCurrentContext;
[self presentModalViewController:modalVC animated:YES];

J'irais avec l'ajout d'une vue secondaire.

Voici une très bonne discussion. Regardez les commentaires en particulier. Pas seulement la réponse.

Vue modale

Si j'étais toi, je ne le ferais pas. Je voudrais ajouter une vue secondaire et le faire. Cela me donne un meilleur contrôle sur les choses.

ÉDITER:

Comme mentionné par Paul Linsay, depuis iOS 8, tout ce qui est nécessaire est UIModalPresentationOverFullScreenle modalPresentationStyle du ViewController présenté. Cela couvrirait également les boutons navigationBar et tabBar.

Pour ceux qui essaient de faire fonctionner cela dans iOS 8, la façon «approuvée par Apple» d'afficher un contrôleur de vue modale transparent consiste à définir modalPresentationStyle sur le contrôleur ed actuel sur UIModalPresentationOverCurrentContext.

Cela peut être fait dans le code ou en définissant les propriétés de la séquence dans le storyboard.

À partir de la documentation UIViewController:

UIModalPresentationOverCurrentContext

Un style de présentation où le contenu est affiché uniquement sur le contenu du contrôleur de vue parent. Les vues sous le contenu présenté ne sont pas supprimées de la hiérarchie des vues une fois la présentation terminée. Ainsi, si le contrôleur de vue présenté ne remplit pas l'écran avec un contenu opaque, le contenu sous-jacent apparaît.

Lors de la présentation d'un contrôleur de vue dans un popover, ce style de présentation est pris en charge uniquement si le style de transition est UIModalTransitionStyleCoverVertical. Tenter d'utiliser un style de transition différent déclenche une exception. Cependant, vous pouvez utiliser d'autres styles de transition (à l'exception de la transition de boucle partielle) si le contrôleur de vue parent n'est pas dans un popover.

Disponible dans iOS 8.0 et versions ultérieures.

https://developer.apple.com/documentation/uikit/uiviewcontroller

La vidéo `` Afficher les progrès du contrôleur dans iOS 8 '' de la WWDC 2014 explique cela en détail.

Remarque:

• Assurez-vous de donner à votre contrôleur de vue présenté une couleur d'arrière-plan claire, de peur qu'il ne soit pas réellement transparent!
• Vous devez définir cela avant de présenter, c'est-à-dire que la configuration de ce paramètre dans le viewDidLoadde la présentationViewController n'aura aucun effet

Dans iOS 8.0 et supérieur, cela peut être fait en définissant la propriété modalPresentationStyle sur UIModalPresentationOverCurrentContext

//Set property **definesPresentationContext** YES to avoid presenting over presenting-viewController's navigation bar

self.definesPresentationContext = YES; //self is presenting view controller
presentedController.view.backgroundColor = [YOUR_COLOR with alpha OR clearColor]
presentedController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

[self presentViewController:presentedController animated:YES completion:nil];

Ce code fonctionne très bien sur iPhone sous iOS6 et iOS7:

presentedVC.view.backgroundColor = YOUR_COLOR; // can be with 'alpha'
presentingVC.modalPresentationStyle = UIModalPresentationCurrentContext;
[presentingVC presentViewController:presentedVC animated:YES completion:NULL];

Dans ce cas, vous manquez une animation de diapositives. Pour conserver l'animation, vous pouvez toujours utiliser l'extension "non élégante" suivante:

[presentingVC presentViewController:presentedVC animated:YES completion:^{
    [presentedVC dismissViewControllerAnimated:NO completion:^{
        presentingVC.modalPresentationStyle = UIModalPresentationCurrentContext;
        [presentingVC presentViewController:presentedVC animated:NO completion:NULL];
    }];
}];

Si notre présentationV est située à l'intérieur de UINavigationController ou UITabbarController, vous devez opérer avec ces contrôleurs comme présentantVC.

De plus, dans iOS7, vous pouvez implémenter un UIViewControllerTransitioningDelegateprotocole d' application d'animation de transition personnalisée . Bien sûr, dans ce cas, vous pouvez obtenir un fond transparent

@interface ModalViewController : UIViewController <UIViewControllerTransitioningDelegate>

Tout d'abord, avant de présenter, vous devez définir modalPresentationStyle

modalViewController.modalPresentationStyle = UIModalPresentationCustom;

Ensuite, vous devez implémenter deux méthodes de protocole

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    CustomAnimatedTransitioning *transitioning = [CustomAnimatedTransitioning new];
    transitioning.presenting = YES;
    return transitioning;
}

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    CustomAnimatedTransitioning * transitioning = [CustomAnimatedTransitioning new];
    transitioning.presenting = NO;
    return transitioning;
}

La dernière chose est de définir votre transition personnalisée en CustomAnimatedTransitioningclasse

@interface CustomAnimatedTransitioning : NSObject <UIViewControllerAnimatedTransitioning>
@property (nonatomic) BOOL presenting;
@end

@implementation CurrentContextTransitionAnimator

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext 
{
    return 0.25;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext 
{
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

    if (self.presenting) {
        // custom presenting animation
    }
    else {
        // custom dismissing animation
    }
}

J'ai eu un peu de mal avec le générateur d'interface de XCode 7 pour définir le style de présentation comme @VenuGopalTewari le suggérait. Dans cette version, il semble n'y avoir aucun mode de présentation Over Current Contextou de Over Full Screenprésentation pour la suite. Ainsi, pour que cela fonctionne, j'ai réglé le mode sur Default:

avec

De plus, j'ai défini le mode de présentation du contrôleur de vue présenté modalement sur Over Full Screen:

Créez une séquence pour présenter modalement et définissez la propriété Presentation de cette séquence sur le contexte actuel, elle fonctionnera à 100%

PresentViewController avec fond transparent - sous iOS 8 et iOS 9

MYViewController *myVC = [self.storyboard   instantiateViewControllerWithIdentifier:@"MYViewController"];
    myVC.providesPresentationContextTransitionStyle = YES;
    myVC.definesPresentationContext = YES;
    [myVC setModalPresentationStyle:UIModalPresentationOverCurrentContext];
    [self.navigationController presentViewController:myVC animated:YES completion:nil];

Et dans MYViewController, définissez la couleur d'arrière-plan noire et réduisez l'opacité

C'est un peu hacky, mais pour moi ce code fonctionne (iOS 6):

AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];

[self presentViewController:self.signInViewController animated:YES completion:^{
    [self.signInViewController dismissViewControllerAnimated:NO completion:^{
        appDelegate.window.rootViewController.modalPresentationStyle = UIModalPresentationCurrentContext;
        [self presentViewController:self.signInViewController animated:NO completion:nil];
        appDelegate.window.rootViewController.modalPresentationStyle = UIModalPresentationFullScreen;

    }];
}];

Ce code fonctionne également sur iPhone

Cette catégorie a fonctionné pour moi (iOS 7, 8 et 9)

Fichier H

@interface UIViewController (navigation)
- (void) presentTransparentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion;
@end

Dossier M

@implementation UIViewController (navigation)
- (void)presentTransparentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion
{
    if(SYSTEM_VERSION_LESS_THAN(@"8.0")) {
        [self presentIOS7TransparentController:viewControllerToPresent withCompletion:completion];

    }else{
        viewControllerToPresent.modalPresentationStyle = UIModalPresentationOverCurrentContext;
         [self presentViewController:viewControllerToPresent animated:YES completion:completion];
    }
}
-(void)presentIOS7TransparentController:(UIViewController *)viewControllerToPresent withCompletion:(void(^)(void))completion
{
    UIViewController *presentingVC = self;
    UIViewController *root = self;
    while (root.parentViewController) {
        root = root.parentViewController;
    }
    UIModalPresentationStyle orginalStyle = root.modalPresentationStyle;
    root.modalPresentationStyle = UIModalPresentationCurrentContext;
    [presentingVC presentViewController:viewControllerToPresent animated:YES completion:^{
        root.modalPresentationStyle = orginalStyle;
    }];
}
@end

La solution à cette réponse en utilisant swift serait la suivante.

let vc = MyViewController()
vc.view.backgroundColor = UIColor.clear // or whatever color.
vc.modalPresentationStyle = .overCurrentContext
present(vc, animated: true, completion: nil)

Si vous utilisez Storyboard, vous pouvez suivre cette étape:

1. Ajoutez un contrôleur de vue (V2), configurez l'interface utilisateur comme vous le souhaitez

• ajouter un UIView - définir l'arrière-plan en noir et l'opacité à 0,5
• ajoutez un autre UIView (2) - qui servira de popup (veuillez noter que l'UIView et l'UIView (2) doivent avoir le même niveau / hiérarchie. Ne faites pas de l'imageview l'enfant de la vue sinon l'opacité de l'uiview sera affecte l'UIView (2))

2. Présenter V2 Modalement

3. Cliquez sur la séquence. Dans l'inspecteur des attributs, définissez la présentation sur plein écran . Supprimez l'animation si vous le souhaitez

4. Sélectionnez V2. Dans l'inspecteur des attributs, définissez la présentation sur plein écran . La vérification définit le contexte et fournit le contexte

5. Sélectionnez le MainView de votre V2 (Pls. Vérifiez l'image). Définir backgroundColor sur Clear Color

J'ai ajouté ces trois lignes dans la méthode init dans le contrôleur de vue présenté et fonctionne comme un charme:

self.providesPresentationContextTransitionStyle = YES;
self.definesPresentationContext = YES;
[self setModalPresentationStyle:UIModalPresentationOverCurrentContext];

EDIT (fonctionnant sous iOS 9.3):

self.modalPresentationStyle = UIModalPresentationOverFullScreen;

Selon la documentation:

UIModalPresentationOverFullScreen Style de présentation de vue dans lequel la vue présentée couvre l'écran. Les vues sous le contenu présenté ne sont pas supprimées de la hiérarchie des vues une fois la présentation terminée. Ainsi, si le contrôleur de vue présenté ne remplit pas l'écran avec un contenu opaque, le contenu sous-jacent apparaît.

Disponible dans iOS 8.0 et versions ultérieures.

Une autre façon est d'utiliser une "vue conteneur". Faites juste un alpha inférieur à 1 et intégrez-le avec seque. XCode 5, cible iOS7. Testé sur iPhone.

Vue conteneur disponible depuis iOS6. Lien vers l'article de blog à ce sujet.

J'ai créé un objet pour gérer la présentation de ce que j'appelle un "modal superposé", ce qui signifie qu'il conserve la vue de l'arrière-plan et vous permet d'avoir un modal avec un fond transparent.

Il a une méthode unique et simple qui fait cela:

- (void)presentViewController:(UIViewController *)presentedViewController
       fromViewController:(UIViewController *)presentingViewController
{
    presentedViewController.modalPresentationStyle = UIModalPresentationCustom;
    presentedViewController.transitioningDelegate = self;
    presentedViewController.modalPresentationCapturesStatusBarAppearance = YES;

    [presentedViewController setNeedsStatusBarAppearanceUpdate];

    [presentingViewController presentViewController:presentedViewController
                                       animated:YES
                                     completion:nil];
}

Il est important de définir la modalPresentationCapturesStatusBarAppearancepropriété sur YESet de forcer la mise à jour de l'apparence de la barre d'état, si votre contrôleur de vue présenté a un autrepreferredStatusBarStyle .

Cet objet doit avoir un @property (assign, nonatommic) isPresenting

Vous voulez que cet objet se conformer aux UIViewControllerAnimatedTransitioninget UIViewControllerTransitioningDelegateprotocoles et mettre en œuvre les méthodes suivantes:

- (id)animationControllerForPresentedController:(UIViewController *)presented
                           presentingController:(UIViewController *)presenting
                               sourceController:(UIViewController *)source
{
    self.isPresenting = YES;

    return self;
}

- (id)animationControllerForDismissedController:(UIViewController *)dismissed
{
    self.isPresenting = NO;

    return self;
}

et:

- (NSTimeInterval)transitionDuration:(id)transitionContext
{
    return 0.25;
}

- (void)animateTransition:(id)transitionContext
{
    UIViewController* firstVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController* secondVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView* containerView = [transitionContext containerView];
    UIView* firstView = firstVC.view;
    UIView* secondView = secondVC.view;

    if (self.isPresenting) {
        [containerView addSubview:secondView];
        secondView.frame = (CGRect){
            containerView.frame.origin.x,
            containerView.frame.origin.y + containerView.frame.size.height,
            containerView.frame.size
        };

        firstView.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
        [UIView animateWithDuration:0.25 animations:^{
            secondView.frame = containerView.frame;
        } completion:^(BOOL finished) {
            [transitionContext completeTransition:YES];
        }];
        } else {
        [UIView animateWithDuration:0.25 animations:^{
            firstView.frame = (CGRect){
                containerView.frame.origin.x,
                containerView.frame.origin.y + containerView.frame.size.height,
                containerView.frame.size
        };

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

Cela fait une animation coulissante du bas imitant l'animation modale par défaut, mais vous pouvez la créer comme vous le souhaitez.

L'important est que la vue du contrôleur de vue de présentation reste à l'arrière, vous permettant de créer un effet transparent.

Cette solution fonctionne pour iOS 7+

Une manière très simple de faire cela (en utilisant Storyboards, par exemple) est:

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"SomeStoryboard" bundle:nil];
UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@"SomeStoryboardViewController"];
// the key for what you're looking to do:
vc.modalPresentationStyle = UIModalPresentationOverCurrentContext;
vc.view.alpha = 0.50f;

[self presentViewController:vc animated:YES completion:^{
    // great success
}];

Cela présentera un UIViewControllerdans un Storyboardmodal, mais avec un fond translucide.

Travailler pour iOS 7-10

if #available(iOS 8.0, *) {
    nextVC.modalPresentationStyle = .OverCurrentContext
    self.presentViewController(nextVC, animated: true, completion: nil)
} else {
    // Fallback on earlier version
    self.modalPresentationStyle = .Custom          
    nextVC.modalTransitionStyle = .CrossDissolve            
    self.presentViewController(nextVC, animated: false, completion: nil)
    }
}

Pour récapituler toutes les bonnes réponses et commentaires ici et pour avoir encore une animation tout en passant à votre nouveau, voici ViewControllerce que j'ai fait: (Prend en charge iOS 6 et plus)

Si vous utilisez un UINavigationController\, UITabBarControllerc'est la voie à suivre:

    SomeViewController *vcThatWillBeDisplayed = [self.storyboard instantiateViewControllerWithIdentifier:@"SomeVC"];

    vcThatWillBeDisplayed.view.backgroundColor = [UIColor colorWithRed: 255/255.0 green:255/255.0 blue:255/255.0 alpha:0.50];    

    self.navigationController.modalPresentationStyle = UIModalPresentationCurrentContext;
    [self presentViewController:presentedVC animated:YES completion:NULL];

Si vous faites cela, vous perdrez votre modalTransitionStyleanimation. Afin de le résoudre, vous pouvez facilement ajouter à votre SomeViewControllerclasse ceci:

-(void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    [UIView animateWithDuration:0.4 animations:^() {self.view.alpha = 1;}
       completion:^(BOOL finished){}];
}
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.alpha = 0;
}

Bien sûr, vous devez définir UIModalPresentationCurrentContext, mais l'emplacement pour définir clearColor est également très important! Vous ne pouvez pas définir l'arrière-plan dans la fonction viewDidLoad, définissez-le avant que la vue ne se charge comme dans le contrôleur de vue racine ou dans la fonction d'initialisation du contrôleur qui va présenter!

actionController.view.backgroundColor = [UIColor clearColor];
[self presentViewController:actionController animated:YES completion:nil];

ou

- (instancetype)init {

    self = [super initWithNibName:nil bundle:nil];

    if(self) {
        self.modalPresentationStyle = UIModalPresentationOverCurrentContext;
        [self.view setBackgroundColor:[UIColor clearColor]];
    }

    return self;
}

Si vous utilisez la séquence modale, assurez-vous de la définir comme cette image (vous pouvez désactiver l'animation si vous le souhaitez)

Une méthode complète testée sur iOS 7 et iOS 8.

@interface UIViewController (MBOverCurrentContextModalPresenting)

/// @warning Some method of viewControllerToPresent will called twice before iOS 8, e.g. viewWillAppear:.
- (void)MBOverCurrentContextPresentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion;

@end

@implementation UIViewController (MBOverCurrentContextModalPresenting)

- (void)MBOverCurrentContextPresentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion {
    UIViewController *presentingVC = self;

    // iOS 8 before
    if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_7_1) {
        UIViewController *root = presentingVC;
        while (root.parentViewController) {
            root = root.parentViewController;
        }

        [presentingVC presentViewController:viewControllerToPresent animated:YES completion:^{
            [viewControllerToPresent dismissViewControllerAnimated:NO completion:^{
                UIModalPresentationStyle orginalStyle = root.modalPresentationStyle;
                if (orginalStyle != UIModalPresentationCurrentContext) {
                    root.modalPresentationStyle = UIModalPresentationCurrentContext;
                }
                [presentingVC presentViewController:viewControllerToPresent animated:NO completion:completion];
                if (orginalStyle != UIModalPresentationCurrentContext) {
                    root.modalPresentationStyle = orginalStyle;
                }
            }];
        }];
        return;
    }

    UIModalPresentationStyle orginalStyle = viewControllerToPresent.modalPresentationStyle;
    if (orginalStyle != UIModalPresentationOverCurrentContext) {
        viewControllerToPresent.modalPresentationStyle = UIModalPresentationOverCurrentContext;
    }
    [presentingVC presentViewController:viewControllerToPresent animated:YES completion:completion];
    if (orginalStyle != UIModalPresentationOverCurrentContext) {
        viewControllerToPresent.modalPresentationStyle = orginalStyle;
    }
}

@end

Swift 4.2

guard let someVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "someVC") as? someVC else {
    return
}
someVC.modalPresentationStyle = .overCurrentContext

present(someVC, animated: true, completion: nil)

dans appdelegate:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [[_window rootViewController]setModalPresentationStyle:UIModalPresentationCurrentContext];
    return YES;
}

dans votre premier contrôleur de vue à partir duquel vous devez charger la vue suivante:

  NextViewController *customvc = [[NextViewController alloc]init];
    [self presentViewController:customvc animated:YES completion:^{

    }];

dans votre nextViewController qui doit être ajouté transparent:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor clearColor];
    UIView* backView = [[UIView alloc] initWithFrame:self.view.frame];
    backView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.6];
    [self.view insertSubview:backView atIndex:0];
}

L'écran de connexion est modal, ce qui signifie qu'il se trouve au-dessus de l'écran précédent. Jusqu'à présent, nous avons un arrière-plan flou, mais cela ne brouille rien; c'est juste un fond gris.

Nous devons définir correctement notre modal.

cible du lien image

• Tout d'abord, nous devons changer l'arrière-plan de la vue du contrôleur de vue en couleur claire. Cela signifie simplement qu'il doit être transparent. Par défaut, cette vue est blanche.

• Deuxièmement, nous devons sélectionner le segment qui mène à l'écran de connexion et, dans l'inspecteur d'attributs, définir la présentation sur Plus de contexte actuel. Cette option n'est disponible que si la disposition automatique et les classes de taille sont activées.

cible du lien image

Définir la navigation modalPresentationStylesurUIModalPresentationCustom

et définissez la couleur d'arrière-plan de votre contrôleur de vue présenté comme couleur claire.