Modal View Transparant background - stop lower layer hiding?

Question

I have a brief for a share page which involves clicking on a share button and a modal view appearing over the top with some share functionality.

My issues is that i'd like the background of the modal view to be semi transparent and therefore show the view beneath. I've set the background properties of the modal layer and as the modal appears the layer beneath is briefly visible - and looks exactly as I require - but as soon as the cover transition is complete the background view is hidden - is there any way around this?

(Using IOS7 by the way)

Cheers

Update - @Tommaso Resti has kindly helped me try and figure this issue out - to explain what I've done so far - my main storyboard contains an unlinked uiview with the identifier 'ShareScreenView' - which I would like to add to my mainView as a transparent modal when clicking on a button. I have linked the button as an IBAction and added the following to my method -

- (IBAction)shareBtn:(id)sender {


    NSLog(@"clicked");



    /* Create your view off the screen (bottom) */

    /* NEW EDIT */
    UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"Main_iPhone"
                                                         bundle: nil];
    UIViewController *myModalController = [mainStoryboard instantiateViewControllerWithIdentifier:@"ShareScreenView"];

    [myModalController.view setFrame:CGRectMake(0, 568, 320, 568)];
 // [myModalController.view setFrame: CGRectMake(0, [[UIScreen mainScreen].bounds.size.height], [[UIScreen mainScreen].bounds.size.width], [[UIScreen mainScreen].bounds.size.height])];


 /* Animate it from the bottom */
 [UIView animateWithDuration:.5 animations:^{
    CGAffineTransform move = CGAffineTransformMakeTranslation(0, -[UIScreen mainScreen].bounds.size.height);
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    myModalController.view.transform = move;   /* UPDATED HERE */
     NSLog(@"Atrying");
 } completion:^(BOOL finished) {
    NSLog(@"Adid try");
    if(finished) {
        NSLog(@"Animation completed");
    }
 }];

}

But I get an error on the line -

[myModalController.view setFrame: CGRectMake(0, [[UIScreen mainScreen].bounds.size.height], [[UIScreen mainScreen].bounds.size.width], [[UIScreen mainScreen].bounds.size.height])];

which simply states 'expected identifier' with an arrow pointing at height (see screen shot below)

enter image description here

so I tried adding the properties as follows -

 [myModalController.view setFrame:CGRectMake(0, 568, 320, 568)];

now there are no errors - but nothing happens and no errors..

Tommaso Resti · Accepted Answer · 2013-11-15T13:45:08.527

3

i suggest to use your own method:

something like this:

/* Create your view off the screen (bottom) */

/* NEW EDIT */
UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard"
                                                     bundle: nil];
UIViewController *myModalController = [mainStoryboard instantiateViewControllerWithIdentifier:@"MyModalController"];
[myModalController.view setFrame: CGRectMake(0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
[self.view addSubview: myModalController.view]; /* UPDATED HERE! */


/* Animate it from the bottom */
[UIView animateWithDuration:.5 animations:^{
    CGAffineTransform move = CGAffineTransformMakeTranslation(0, -[UIScreen mainScreen].bounds.size.height);
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    myModalController.view.transform = move;   /* UPDATED HERE */
} completion:^(BOOL finished) {
    if(finished) {
        NSLog(@"Animation completed");
    }
}];

than remove with this animation:

/* Reset animation */
[UIView animateWithDuration:.5 animations:^{
    CGAffineTransform reset = CGAffineTransformIdentity;
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    myModalController.view.transform = reset;  /* UPDATED HERE */
} completion:^(BOOL finished) {
    if(finished) {
        NSLog(@"Reset completed");
        [myModalController.view removeFromSuperview];
    }
}];

--- EDITED --- Sorry, i forgot to add ".view " after myViewController. i never try my code... my fault ;)

The example is updated!

edited Nov 15 '13 at 13:45

answered Nov 15 '13 at 10:11

Tommaso Resti

5,800
4
18
34

cool cheers - can I use this method with storyboard? I've never used Nibs as yet! – Dancer Nov 15 '13 at 10:23
sure! Use UIViewController *myModalController = [storyboard instantiateViewControllerWithIdentifier:@"MyModalController"]; instead of UIViewController myModalController = [[UIViewController allor] initWithNibName:@"MyModalController" bundle:[NSBundle mainBundle]]; – Tommaso Resti Nov 15 '13 at 10:25
cool cheers - one issue - I get an error stating 'property transform not found on UIViewController on this line - myModalController.transform = move; – Dancer Nov 15 '13 at 10:38
so close - but yet so far! I get an error - Storyboard () doesn't contain a view controller with identifier 'shopVCSelectionViewController'' shopVCSelectionViewController is the class of the VC I wish to use as a modal - how do i assign an identifier!? – Dancer Nov 15 '13 at 11:03
1

you need to set an ID inside the Interface Builder. follow this example http://stackoverflow.com/questions/13867565/what-is-a-storyboard-id-and-how-can-i-use-this – Tommaso Resti Nov 15 '13 at 11:07
cool yeah added that - but still errors on these lines im afraid!.. UIViewController *myModalController = [UIStoryboard instantiateViewControllerWithIdentifier:@"ShareScreen"]; gets the error - 'no known class or method for instantiateViewControllerWithIdentifier' and... [myModalController.view setFrame: CGRectMake(0, [[UIScreen mainScreen].bounds.size.height], [[UIScreen mainScreen].bounds.size.width], [[UIScreen mainScreen].bounds.size.height])]; has the error ' expected identifier' cheers for your help - so close! – Dancer Nov 15 '13 at 11:19
Dancer, you can't call [UIStoryboard instantiateViewControllerWithIdentifier:@"ShareScreen"]! UIStoryboard is a class name! you need to refer to an objet. example updated! – Tommaso Resti Nov 15 '13 at 11:32
@TommasonResti - Cheers, Your a legend! That sorts the top error - but i still get an expected identifier issue for the .bounds.size.height line - which i'm trying to suss.. – Dancer Nov 15 '13 at 11:43
1

Hi dancer, i was out for lunch. ok bug found, code edited. Just remove '[' and ']' from [[UIScreen mainScreen].bounds.size.height] like this -> [UIScreen mainScreen].bounds.size.height – Tommaso Resti Nov 15 '13 at 13:36
cheers for all your help @Tommaso - Above works fine - so ive given you a tick - but i have an issue where my button clicks in the modal view are no longer firing - i get an error EXC_BAD_ACCESS (code=1, ..... I will add this to a separate bug though.. – Dancer Nov 15 '13 at 14:15
http://stackoverflow.com/questions/20003441/thread1exc-bad-access-error-programatic-modal-view follow on bug! Cheers for all your help Tommaso – Dancer Nov 15 '13 at 14:36

score 0 · Answer 2 · answered Nov 15 '13 at 10:16

0

You can create a View, which you slide in from the bottom and then make the view semi transparent.

answered Nov 15 '13 at 10:16

iCode

1,456
1
15
26

score 0 · Answer 3 · answered Nov 15 '13 at 10:30

0

You can use View Container to create your own ModalViewController and do animation just like @Tommaso Resti says

answered Nov 15 '13 at 10:30

johnMa

3,291
24
37

Modal View Transparant background - stop lower layer hiding?

3 Answers3

Linked