How to apply mask to backend view?

Question

I am trying to apply mask to backend view but am unable reach my expectation. I want the view should be like showing in the below image. I tried to implement in my own way but the mask view also comes up from bottom. When we click on iCloud option in iPad immediately the backend view becomes in gray color and the custom view comes up from bottom. I want same feature needs to be implemented in my application. Please help me. Thanks in advance.

Answer 1

I strongly suggest you use this nice and tidy git code

https://github.com/jmascia/KLCPopup

KLCPopup really does a very nice job in implementing modal views with animations, blur, fade, etc.

Very easy to set up and use, it's litreally just

" choose your view "

" choose where you want it "

" Add effects if you want some "

"there you go "

have fun ;)

Answer 2

Follow below steps to achieve your requirements-

1) Create a BaseView & Add a CustomView on the center of the BaseView.

2) Set the background color of BaseView as black with 50% opacity.

3) Keep the actual transform of the CustomView in a variable as

CGAffineTransform m_actualTransformOfCustomView = 
m_customView.transform;

4) Scale the CustomView to a small 0.01 , 0.01 using

self.m_customView.transform = CGAffineTransformScale(m_actualTransformOfCustomView, 0.01, 0.01);

4) Use [UIView amimateWithDuration:] api to change the transform of the custom view to original as-

[UIView animateWithDuration:0.5f
                          delay:0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^
     {
         self.m_customView.transform = CGAffineTransformScale(m_actualTransformOfCustomView, 1.0, 1.0);

     }
                     completion:^(BOOL finished)
     {

     }
];
}

Answer 3

My own way is working now properly. Here is the code snippet. Enjoy!

-(IBAction)show:(id)sender{

customView = [[UIView alloc] initWithFrame:self.view.frame]; // Mask View
customView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.3f];
[self.view addSubview:customView];

// customConfigurationView // PopUp view
CGRect frameCustmVw = customConfigurationView.frame;
frameCustmVw.origin.y = self.view.frame.size.height;
frameCustmVw.origin.x = 134;

customConfigurationView.frame = frameCustmVw;

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];

frameCustmVw.origin.y = 200;
customConfigurationView.frame = frameCustmVw;

[self.view addSubview:customConfigurationView];
[UIView commitAnimations];

[txtClientID becomeFirstResponder];

}


-(IBAction)remove:(id)sender{

[customView removeFromSuperview]; // Remove mask view

CGRect CustmFrame = customConfigurationView.frame;
CustmFrame.origin.y = 200;//self.view.frame.size.height - customConfigurationView.frame.size.height;
customConfigurationView.frame = CustmFrame;

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
CustmFrame.origin.y = self.view.frame.size.height;
customConfigurationView.frame = CustmFrame;
[UIView commitAnimations];

 }

Answer 4

oky , my answer regarding the way how settings app doing this, it is simple ... they are just presenting a navigation controller thats all, for example

just create a view controller subclass for example (i named it as TestViewController ) and set it size to freeform in attribute inspector and change its frame's width and height to your required values and add view components

it will show the view controller with width and height of 540*620 with your animation

that's all

- (IBAction)presentAction:(id)sender
 {
    TestViewController *testVc = [[TestViewController alloc]initWithNibName:@"TestViewController" bundle:nil];
    UINavigationController *aNavController = [[UINavigationController alloc] initWithRootViewController:testVc];
    aNavController.modalPresentationStyle = UIModalPresentationFormSheet;
    aNavController.modalTransitionStyle   = UIModalTransitionStyleCoverVertical;
    [self presentViewController:aNavController animated:YES completion:nil];
}