How to add multiview to a screen? - ios

I have an application of proof of simulated, which have some modules, and one of this is a screen which need be reloaded for exhibition of same data. Example: I have screen of the question and answers. Like below
Question: bla bla bla?
Item A: X
Item B: Y
Item c: Z
...
the screen remains the same, what needs to be change is the question and answer content item A, item B, etc..
And, I'm loading the informations "hardcode". I'm sure there are other better choice to make this ^^. I would like to use the same screen to load the features. How I can make this? I was looking to page controller, but it's not what I want, I would like to use a navigation controller to navigation with the screens. I have a dictionary of a list of all the questions with answers: itemA, itemB, etc. how I can load this in the "same screen" with the option of next > and < previous?

A simple one solution is create one UIView add all question and answer related views in it.
Create one UIView add all question and answer related views in it
Create next/previous UIButtons
Add and remove this view on next/previous events and reload inner view content.
Use below method for animation which looks like a navigation next/previous
In below method self.questionPaperView is a which will be animated and it contains all question and answer related views.
Note: Create a global variable for questionPaperView and for inner views. So you don't need to add questions/answers subviews every time you add/remove questionPaperView.
- (void) removeQuestionPaper {
[UIView animateWithDuration:0.35f animations:^{
[self.questionPaperView removeFromSuperview];
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
// Call data reload method here.
}];
}
- (void) addQuestionPaper {
[self.view addSubview:self.questionPaperView]
CATransition *animation = [CATransition animation];
[animation setDuration:0.5];
[animation setType:kCATransitionFade];
[animation setSubtype:kCATransitionFromRight]; // For previous use kCATransitionFromLeft
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[[theWindow layer] addAnimation:animation forKey:#"NextView"];
}

Related

UIView transitionWithView custom animation option

I have an application that first displays a login screen. Once the user logs in, this code is executed:
[UIView transitionWithView:self.view.window
duration:0.7
options:UIViewAnimationOptionTransitionNone
animations:^{
self.view.window.rootViewController = menuController;
} completion:^(BOOL finished) {
// Code to run after animation
}];
This works as expected; however, I would like to define my own custom animation option instead of the flip from left/right option.
A simple example would be sliding the new view controller onto the screen from top to bottom. How can I do this when changing the rootViewController?
Also, is there a completely different approach to animate switching the rootViewController? I am not married to this solution, it is just the closest thing I can find through Google/SO search.
Any help would be great, thanks!
Using a CATransition should be able to give you the sort of animation you're looking for. Granted, I've never actually attempted this specifically with rootViewController, but to slide the view in from top to bottom, I'd suggest trying this:
CATransition *transition = [CATransition animation];
transition.duration = 1.0;
transition.type = kCATransitionFromBottom;
transition.subtype = kCATransitionFade;
CALayer *layer = self.view.window.rootViewController.view.layer;
[layer addAnimation:transition forKey:kCATransition];
For that change to happen you must first add the ViewController and its view to the parent viewController. A simple trick could be add it "on the roof" of your window (starting Y position = -self.view.bounds.size.height). And then use
[UIView animateWithDuration:
delay:
options:
animations:^{}
completion:^(BOOL finished){
self.view.window.rootViewController = menuController;
}];
Then simply inside the animation brackets create the animation you want.

page curl transition like a book two sides (transition from right side to left side & vice versa)

Hy, i want to make a pagecurltransition like in a book, when i press one button is curlup and i want to see while the transition is beeing made the next page. And for curldown i want the transition view to be with the next page. Like when i move pages in a book. The transition works fine but the problem is that i want my instruction to be executed while the transition is beeing done. The problem is that mywebview loads the text after the transition is done.
UIViewAnimationOptions animation;
if (_webview) {
animation = UIViewAnimationOptionTransitionCurlDown;
} else {
animation = UIViewAnimationOptionTransitionCurlUp;
}
CATransition *aanimation = [CATransition animation];
[aanimation setDelegate:self];
[aanimation setDuration:1.0f];
aanimation.startProgress = 0.5;
aanimation.endProgress = 1;
[aanimation setSubtype:kCATransitionMoveIn];
[aanimation setRemovedOnCompletion:NO];
[aanimation setFillMode: #"extended"];
[aanimation setRemovedOnCompletion: NO];
[[_webview layer] addAnimation:aanimation forKey:#"WebPageCurl"];
UIWebView is tricky because it doesn't render immediately, so it isn't ready when you take the snapshot for your page animation. The best you can hope for is like Flipboard, where you flip the page and it fades in. Otherwise you have 2 choices.
1) Keep a cache of your next and previous page around always (this is what I did when I was trying to get around this problem)
2) Wait for the web views to load before playing the animation (this will cause a noticeable delay and is not advisable)
Just add UIViewAnimationOptions.AllowAnimatedContent as an extra parameter where you are giving curlup/ curlDown animation.

iOS: UITableView reload animation

I have implemented nested UITableViews such that, on selecting a particular row from parent Data list, gets child nodes data from server and reloads them in same UITableview. I have given provision to go back to parent nodes using dictionary and everything working fine. I want Navigation Style animation when I move parent data list to child data list. Could someone please help me how to do this.
I have tried using following code UIViewAnimationOptionTransitionFlipFromLeft and UIViewAnimationOptionTransitionFlipFromRight animations it flips the view - I am looking for similar but without flip - simple navigation style animation like I want to pretend I am pushing another UITableView.
[UIView transitionWithView: self.listTableView
duration: 0.35f
options: UIViewAnimationOptionTransitionFlipFromLeft
animations: ^(void) {
[self.listTableView reloadData];
} completion: ^(BOOL isFinished){
}];
Here is Logic with Code.
you need to import QuartzCore framework in.h` for using below piece of Code.
AS #import
// Method to replace a given subview with another using a specified transition type, direction, and duration
-(void)replaceSubview:(UIView *)oldView withSubview:(UIView *)newView transition:(NSString *)transition direction:(NSString *)direction duration:(NSTimeInterval)duration
{
// Set up the animation
CATransition *animation = [CATransition animation];
// Set the type and if appropriate direction of the transition,
if (transition == kCATransitionFade)
{
[animation setType:kCATransitionFade];
}
else
{
[animation setType:transition];
[animation setSubtype:direction];
}
// Set the duration and timing function of the transtion -- duration is passed in as a parameter, use ease in/ease out as the timing function
[animation setDuration:duration];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[[oldView layer] addAnimation:animation forKey:#"transitionViewAnimation"];
}
Call Above method when TableView row gets Clicked as below.
[self replaceSubview:thisTableView
withSubview:thisTableView
transition:kCATransitionPush
direction:kCATransitionFromLeft
duration:0.3];
//thisTableView is instance of UItableView.

iOS Using Partial Page Curl on UIView, NOT UIViewController

I've got a MainViewController that has many subViews. Basically, it's broken down into two panes. The panes are designed to look like clipboards. I'd like to hit a button and have the "paper" on one of the clipboards do a partial curl to reveal the page underneath.
This isn't a full Modal ViewController presentation situation.
I'm working with the following code, but the results are funky:
FlipView *flipView = [[FlipView alloc] init];
[self setFlipView:flipView];
[flipView setHidden:YES];
[flipView setFrame:[[self WhereAmI] frame]];
[[self view] addSubview:flipView];
[[self view] bringSubviewToFront:[self WhereAmI]];
[flipView setHidden:NO];
CATransition *animation = [CATransition animation];
[animation setDelegate:self];
[animation setDuration:1.0];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[animation setType:#"pageCurl"];
[animation setFillMode:kCAFillModeForwards];
[animation setEndProgress:0.9];
[animation setRemovedOnCompletion:NO];
[[self WhereAmI] setHidden:YES];
[[[self WhereAmI] layer] addAnimation:animation forKey:#"pageCurlAnimation"];
Basically, I'm trying to load my new view programmatically, slide it in behind the currently visible view and then curl up the view that's on top to reveal the view that's now underneath. I get somewhat of a partial curl animation, but the "page" that's curling up isn't opaque, which is odd. Also, when I don't set my view and label to be hidden, even though you see them curl up, you also still see them "underneath", which is also odd. Plus, I don't see the UILabel I placed in the XIB for the new view.
Any thoughts?
Thanks!
OK, so I've got a working solution, but it's not quite what I was hoping to do. I'd still love to figure out the solution to my original question, but here's what I'm doing for now:
The background image for my "base" view is an image of a spiral-bound notebook.
The background image for all other views is a screen shot of a page curl.
(By "background image", I mean a UIColor created with a patternImage.)
The code to transition views is:
- (IBAction)NavigationTabSelected:(id)sender
{
// Flipping views is driven by a SegmentedControl
int selected = [[self NavigationTabsSegmentedControl] selectedSegmentIndex];
int current = [[self ViewArray] indexOfObject:[self ActiveFlipView]];
UIView *newFlip = [[self ViewArray] objectAtIndex:selected];
BOOL up = selected > current;
[UIView animateWithDuration:1.0
animations:^{
[UIView setAnimationTransition:(up)?UIViewAnimationTransitionCurlUp:UIViewAnimationTransitionCurlDown forView:[self RightView] cache:YES];
[[self ActiveFlipView] removeFromSuperview];
[[self RightView] addSubview:newFlip];
}
completion:^(BOOL finished){
[self setActiveFlipView:newFlip];
}];
}
As you can see, tabs to the right of the current tab generate a "curl up" and tabs to the left of the current tab generate a "curl down". It's not quite what I wanted, but it serves my purpose.
Any better ideas?
have you considered loading it as a modal view?
- (void)yourFrontViewControllerMethod
{
YourBackViewController *bfvc = [[YourBackViewController alloc] init];
[bfvc setModalTransitionStyle:UIMoalTransitionStylePartialCurl];
[self presentViewController:bfvc];
[bvfc release];
}
This will give you the desired effect of a view curling up to reveal another view.
Also as a general rule of thumb we try not to create animations that way. Try using a block based method instead (eg [UIView AnimateWithDuration:....]);
Hope that helps :)

iOS Slide an UIView (Menu) from a side in another View

i want to slide in a menu from a side in a View after a buttonclick event. After another Buttonclick the menu should be slided out from the big View...
I experimented with CATransition but i can't solve this problem...
CATransition *animation = [CATransition animation];
[animation setDuration:1];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromBottom];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]] ;
[[menuView layer] addAnimation:animation forKey:#"#asdf"];
[menuView setCenter:CGPointMake([menuView center].x, [menuView center].y + 450)];
it work a bit, but i did not understand why.. :-/
If you want to implement it yourself one way you can go about it is create a custom view and add a button click event for a button in your view controller.
Also create a boolean variable to identify whether your custom view is visible or not.
On click, if menu view is not visible, then do this:
-(void)viewDidLoad
{
...
// ---------------------------------------------
// create the custom menu view off screen
// ---------------------------------------------
menuView = [[MenuView alloc] initWithFrame:CGRectMake(-320, 0, 320, 480)];
menuView.alpha = 0; // hide it so it doesn't show at the start, only show when slide in
[self.view addSubview:menuView];
...
}
-(void)toggleMenu
{
if(menuIsVisible)
{
menuIsVisible = NO;
[self hideMenu];
}
else
{
menuIsVisible = YES;
[self showMenu];
}
}
-(void)hideMenu
{
[UIView animateWithDuration:0.5 animations:^{
// note CGAffineTransforms doesn't use coordinates, they use offset
// so an offset of (0,0) would bring the menuView back to the coordinate
// when it was first instantiated, in our case, (-320, 0).
menuView.transform = CGAffineTransformMakeTranslation(0,0);
} completion:^{
// hide the menu
menuView.alpha = 0;
}];
}
-(void)showMenu
{
// show the menu
menuView.alpha = 1;
[UIView animateWithDuration:0.5 animations:^{
// note CGAffineTransforms doesn't use coordinates, they use offset
// so an offset of (320,0) from coordinate (-320,0) would slide the
// menuView out into view
menuView.transform = CGAffineTransformMakeTranslation(320,0);
}];
}
A Controller like ViewDeck will enable you to do that.
Edit:
I'm not sure what else to add to this, moderator. It's open source code that will add a menu that is controlled by a button which will slide in when clicked and slide out when clicked again, similar to what Facebook and Path have. You're also gaining the touch events with slide.
There's an example of how to use it on the github page here: https://github.com/Inferis/ViewDeck#how-to-use-it and also several examples projects available in the source code.

Resources