Slide UIViews like in The Magazine - ios

I wonder if somebody here knows how I can slide the views in my application. When I'm in a view, I want to slide to another view like in "The Magazine". (see image)
Hope somebody can help me.
Image:
http://bildr.no/view/1361377

As far as I know, there is no "canned" transition that does a slide over. I've implemented it like this:
-(void)SlideInController:(RDSlideController *) next {
next.presentingVC = self;
next.view.frame = CGRectMake(self.view.frame.origin.x + 320, self.view.frame.origin.y, self.view.frame.size.width, self.view.frame.size.height);
[self.view.window addSubview:next.view];
[UIView animateWithDuration:slideTime animations:^{
next.view.frame = self.view.frame;
} completion:^(BOOL finished) {
self.view.window.rootViewController = next;
}];
}
-(void)SlideOut {
RDSlideController *prev = self.presentingVC;
prev.view.frame = self.view.frame;
[self.view.window insertSubview:prev.view belowSubview:self.view];
[UIView animateWithDuration:slideTime animations:^{
self.view.frame = CGRectMake(self.view.frame.origin.x + 320, self.view.frame.origin.y, self.view.frame.size.width, self.view.frame.size.height);
} completion:^(BOOL finished) {
self.view.window.rootViewController = prev;
}];
}
In this example, I made a controller class (RDSlideController) that was the superclass of my other controllers, so that they would all have the presentingVC property and access to the various slide in and out (and up and down) methods that I wrote. This should give you an idea of how to do this.

Take a look at UIPageViewController
Here is a link to the doc. Starting with iOS5, it supports the page curl transition. And in iOS6, they added the slide like you have on your screenshot.
If you need to support earlier version, you will most likely need to create your own animation (using CAAnimation).

Related

How to create a Slide-Out Navigation Panel in iOS where the side panel goes over the center panel?

I followed this great tutorial by Tammy Coron. Everything is great, and I understand how it works, but what I want to achieve is a little different. I want the central view to be "static", so to speak, and the side panels to overlap this central view.
So I should change this part:
UIView *childView = [self getLeftView];
[self.view sendSubviewToBack:childView];
[UIView animateWithDuration:SLIDE_TIMING delay:0 options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
_centerViewController.view.frame = CGRectMake(self.view.frame.size.width - PANEL_WIDTH, 0, self.view.frame.size.width, self.view.frame.size.height);
}
completion:^(BOOL finished) {
if (finished) {
_centerViewController.leftButton.tag = 0;
}
}];
to something else. But playing around with it for a while did not yield the desired result.
Does anyone have a suggestion?
Change this line
_centerViewController.view.frame = CGRectMake(self.view.frame.size.width - PANEL_WIDTH, 0, self.view.frame.size.width, self.view.frame.size.height);
to this line
childView.frame = CGRectMake(PANEL_WIDTH, 0, childView.frame.size.width, childView.frame.size.height);
Also don't sendsubViewToBack, change this line
[self.view sendSubviewToBack:childView];
to this line
[self.view bringSubViewToFront:childView];

How to apply mask to backend view?

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.
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 ;)
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)
{
}
];
}
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];
}
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];
}

Setting the frame to a UIView not working

I need a UIView to be hidden from the screen initially and then slides up. Kind of like a UIActionSheetView animation. In IB, I have set a UIView stick to the bottom border of the superview. In code, I have changed its frame to be hidden away from the screen when the app starts. And when it starts, the UIView slides up. Here's is my code. This optionsSheetView is the 'UIView' I'm referring to.
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
// Hide the UIView from the screen initially
self.optionsSheetView.frame = CGRectMake(0, self.optionsSheetView.frame.origin.y + self.optionsSheetView.frame.size.height, self.optionsSheetView.frame.size.width, self.optionsSheetView.frame.size.height);
// Sliding up animation
[UIView animateWithDuration:0.9 delay:0.5 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.optionsSheetView.frame = CGRectMake(0, 374, self.optionsSheetView.frame.size.width, self.optionsSheetView.frame.size.height);
} completion:^(BOOL finished) {
}];
}
Now here's my problem. This works just fine. But I don't like keeping hard coded values in my code. Like 374 for the optionsSheetView's y coordinate. If I put self.optionsSheetView.frame.origin.y there, it won't work. It's basically the same thing. When I replace it with its actual value which is 374, it works fine.
Why is this happening? Is there any way I can go about this without using magic numbers?
Thank you.
Try following:
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGFloat oldY = self.optionsSheetView.frame.origin.y;
// Hide the UIView from the screen initially
self.optionsSheetView.frame = CGRectMake(0, self.optionsSheetView.frame.origin.y + self.optionsSheetView.frame.size.height, self.optionsSheetView.frame.size.width, self.optionsSheetView.frame.size.height);
// Sliding up animation
[UIView animateWithDuration:0.9 delay:0.5 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.optionsSheetView.frame = CGRectMake(0, oldY, self.optionsSheetView.frame.size.width, self.optionsSheetView.frame.size.height);
} completion:^(BOOL finished) {
}];
}

Multiple UIViews in animation

I'm trying to create sort of a slide-out slide-in motion for my views when the user presses the forward or backwards button.
I made the first view slide out just fine, but the second one just won't slide in.
Here's my code:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelay:0.1];
[UIView setAnimationDuration:0.7];
UIView *currentView = [[contentScrollView subviews] objectAtIndex:0];
currentView.center = CGPointMake(contentScrollView.frame.size.width+contentScrollView.frame.size.width/2, currentView.center.y);
UIView *newView = [[contentScrollView subviews] objectAtIndex:1];
newView.center = CGPointMake(newView.center.x+newView.frame.size.width, newView.center.y);
[UIView commitAnimations];
I don't really see what the problem is, it should work. But the currentView just slides out, and the newView is still out in the -x values, hidden from the user.
I already tried changing to transformations, but that didn't do anything.
What could cause this?
Try this code (tested):
Copy and paste it to see it in action and adjust the frames for your views to suit your needs.
UIView *viewOne = [[UIView alloc] initWithFrame:(CGRect){{0, 0}, 200, 200}]; //currentView
UIView *viewTwo = [[UIView alloc] initWithFrame:(CGRect){{200, 0}, 200, 200}]; //newView
viewOne.backgroundColor = [UIColor lightGrayColor];
viewTwo.backgroundColor = [UIColor darkGrayColor];
[self addSubview:viewOne];
[self addSubview:viewTwo];
[UIView animateWithDuration:5.0f delay:0.0f options:UIViewAnimationOptionCurveEaseInOut animations:^
{
viewOne.frame = (CGRect){{300, 0}, 200, 200};
viewTwo.frame = (CGRect){{-100, 0}, 200, 200};
} completion:^(BOOL finished) {
}];
This is to show you how these two view sliding in and out.
You have to adjust the frames for your views accordingly to your needs.

How do I animate my subviews on adding them?

I have developed a font selection that utilizes UIPickerView and UIToolbar, which are both added on touching a UIButton.
But they just kind of pop in which looks sloppy.
is there a way to animate them?
here is the method that adds them (it's called on clicking the button) :
-(void)showPicker
{
[self.view addSubview:_fontPicker];
[self.view addSubview:pickerTB];
}
You can animate them in a couple of ways, but probably the easiest is to just fade them in.
Fade In
[someView setAlpha:0]
[self.view addSubview:someView];
[UIView beginAnimations:#"FadeIn" context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationBeginsFromCurrentState:YES];
[someView setAlpha:1];
[UIView commitAnimations];
Fade Out
float fadeDuration = 0.5;
[UIView beginAnimations:#"FadeOut" context:nil];
[UIView setAnimationDuration:fadeDuration ];
[UIView setAnimationBeginsFromCurrentState:YES];
[someView setAlpha:0];
[UIView setAnimationDidStopSelector:#selector(removeView)];
[UIView commitAnimations];
-(void) removeView {
[someView removeFromSuperview];
}
Something as simple as that.
Depends on what type of animation you want to use. For example, this would look like dissolve.
Anyways look into UIView animateWithDuration...
pickerTB.alpha = _fontPicker.alpha = 0;
[self.view addSubview:_fontPicker];
[self.view addSubview:pickerTB];
[UIView animateWithDuration:1 animations:^{_fontPicker.alpha = 1; pickerTB.alpha = 1}];
You could use transforms or change frame origins to make the views fly in from positions outside the screen too. In that case, inside the animations block, specify the new on screen position. You can do this in two ways, change the frame with an updated origin or apply a CGAffineTransformMakeTranslation(dx,dy)
You need to add the subview with a frame value that is where you want the animation to begin from (off-screen?) then change the frame value inside your animation block. The frame will change over the duration, causing the appearance of movement. The view must already be a subview - I don't believe adding a subview is something you can animate, it makes no sense.
-(void) showPicker{
[self.view addSubview: _fontPicker];
_fontPicker.frame = CGRectMake(0, 0, 120, 40);// somewhere offscreen, in the direction you want it to appear from
[UIView animateWithDuration:10.0
animations:^{
geopointView.frame = // its final location
}];
}
Initially set your picker view frame and tool bar frame like this one..
-(void)viewDidLoad
{
[super viewDidLoad];
pickerTB.frame = CGRectMake(0,568,320,44);
fontPicker.frame = CGRectMake(0, 568, 320, 216);
}
-(void)showPicker
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:.30];
if(isiPhone5)
{
pickerTB.frame = CGRectMake(0,288,320,44);
fontPicker.frame = CGRectMake(0, 332, 320, 216);
}else{
pickerTB.frame = CGRectMake(0,200,320,44);
fontPicker.frame = CGRectMake(0,244, 320, 216);
}
[UIView commitAnimations];
}

Resources