I have two viewControllers for iPad just like facebook sidepanel. There is LeftViewController which toggles when I click a button on center viewController. It slides on the top of CenterViewController. But it covers only 50% of centerViewController.
I should be able to add new views to left viewController and can push.
What is the best approach to achieve this.
Please check this link
Sliding Drawers
[SideMenus]
This contains different drawers and few in swift too. may be this link would be helpful to you.
you can add slide-in side bar in view.see below my code.
assign the property in .h file
UIView*menuDrawer;
#property(readonly,nonatomic)UISwipeGestureRecognizer*recognizer_open,*recognizer_close;
#property(readonly,nonatomic) int menuDrawerX,menuDrawerWidth;
//customize slide menu
Add this code in viewdidload
int statusBarHeight=[UIApplication sharedApplication].statusBarFrame.size.height-20;
menuDrawerWidth=self.view.frame.size.width*0.65;//you can adjust width
menuDrawerX=self.view.frame.origin.x-menuDrawerWidth;
menuDrawer=[[UIView alloc]initWithFrame:CGRectMake(menuDrawerX, self.view.frame.origin.y+statusBarHeight, menuDrawerWidth,self.view.frame.size.height-statusBarHeight)];
menuDrawer.backgroundColor=[UIColor
whiteColor];
recognizer_close=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:#selector(handleSwipes:)];
recognizer_open=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:#selector(handleSwipes:)];
recognizer_close.direction=UISwipeGestureRecognizerDirectionLeft;
recognizer_open.direction=UISwipeGestureRecognizerDirectionRight;
[self.view addGestureRecognizer:recognizer_close];
[self.view addGestureRecognizer:recognizer_open];
[self.view addSubview:menuDrawer];
add this method
-(void)handleSwipes:(UISwipeGestureRecognizer*)sender
{
[self drawerAnimation];
}
call this method,if you are assigning a button also can set selector of a button
-(void)drawerAnimation
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:-5];
CGFloat new_x = 0;
if (menuDrawer.frame.origin.x < self.view.frame.origin.x) {
new_x=menuDrawer.frame.origin.x + menuDrawerWidth;
}
else
{
new_x=menuDrawer.frame.origin.x - menuDrawerWidth;
}
menuDrawer.frame=CGRectMake(new_x, menuDrawer.frame.origin.y, menuDrawer.frame.size.width, menuDrawer.frame.size.height);
[UIView commitAnimations];
}
it will work fine,you can add UITableView or other controls in these slide-in side bar menu.
you can adjust height and width via statusBarHeight and menuDrawerWidth.
Related
so I have a very simple button that when clicked goes to fullscreen and when clicked again goes back to the same position it was initially in. For some reason it works perfectly without the animation. When I uncomment the animation part when I initially click the button it does nothing, the second time I click it slightly enlarges. The third time I click it animates slowly but back to it's smaller original size... Why is it animating the opposite way?
- (IBAction)viewImage1:(id)sender {
UIButton *btn = (UIButton*) sender;
if (btn.tag == 0)
{
CGRect r = [[UIScreen mainScreen] bounds];
/*[UIView animateWithDuration:0.5f delay:0.0f options:0 animations:^{*/
[sender setFrame: r];
/*}completion:nil];*/
btn.tag = 1;
}
else
{
btn.tag = 0;
[sender setFrame:CGRectMake(0,0,370,200)];
}
}
There are two solutions to your problem either of which will work:
Disable Autolayout. (discouraged)
You can do that in Interface Builder by opening the File Inspector
in the right pane and unchecking the respective check box.
However, if you want to use Autolayout for constraining other UI elements in your view (which is quite a good idea in most cases) this approach won't work which is why I would recommend the second solution:
Keep Autolayout enabled, create an outlet for your button in your view controller and set
self.myButton.translatesAutoresizingMaskIntoConstraints = YES;
in your view controller's viewDidLoad method.
You could also add layout constraints to your button and animate those. (This excellent Stackoverflow post explains how it's done.)
The reason for this tricky behavior is that once you enable Autolayout a view's frame is no longer relevant to the actual layout that appears on screen, only the view's layout constraints matter. Setting its translatesAutoresizingMaskIntoConstraints property to YES causes the system to automatically create layout constraints for your view that will "emulate" the frame you set, in a manner of speaking.
It is easier to do this with auto layout and constraints. Create an IBOutlet for the height constraint of your button call it something like btnHeight. Do the same for the width constraint call it something like btnWidth. Then create an IBAction like so:
- (IBAction)buttonPress:(UIButton *)sender {
UIButton *btn = (UIButton *) sender;
CGRect r = [[UIScreen mainScreen] bounds];
if (CGRectEqualToRect(btn.frame, CGRectMake(0.0, 0.0, 370, 200))) {
[UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
self.btnHeight.constant = r.size.height;
self.btnWidth.constant = r.size.width;
[self.view layoutIfNeeded];
} completion:^(BOOL finished){
}];
}else{
[UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
self.btnHeight.constant = 200.0;
self.btnWidth.constant = 370.0;
[self.view layoutIfNeeded];
} completion:^(BOOL finished){
}];
}
}
In my experience animating the frame of a UIButton does not work well, a, the only method, I'm aware of, is to use CGAffineTransformScale which will rasterize the title of the button and scale it as well.
I have an app which has two subviews.I wanna double tap the video view(the top one) to make it fullscreen to display video.(By fullscreen, I mean it should be in landscape mode) So how should I do in the method -(void)handleTapGesture::(UITapGestureRecognizer*)recognizer?
I guess, first of all, I should hide status bar and navigation bar; then rotate the video view to make it landscape left/right programmatically.
BTW, for some reason, I have to make my app only support portrait mode.Forgive my terrible English, if you don't understand my question clearly, plz leave a comment, thanks.
Update:
I've hided status bar and navigation bar both, but when I make the video view fullscreen, it seems navigation bar and status bar are still there and my video view cannot move up to the top of the screen!
[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationSlide];
[self.navigationController.navigationBar setHidden:YES];
[UIView beginAnimations : #"video full screen" context:nil];
[UIView setAnimationDuration:0.3];
[UIView setAnimationBeginsFromCurrentState:YES];
self.videoView.frame = self.view.bounds;
moviewGLView.frame = CGRectMake(0, 0, self.videoView.frame.size.width, self.videoView.frame.size.width*3/4);
moviewGLView.center = self.videoView.center;
videoDefault.center = self.videoView.center;
[UIView commitAnimations];
add this code in your ViewDidLoad() method
UITapGestureRecognizer *tapOnTopView = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(makeTopViewFullScreen)];
tapOnTopView.numberOfTapsRequired = 1;
[topView addGestureRecognizer:tapOnTopView];
add the following function
-(void)makeTopViewFullScreen
{
[UIView animateWithDuration:0.3
animation:^
{
topViewHeightConstraint = self.view.frame.size.height;
bottomViewHeightConstraint = 0;
[self layoutIfNeeded];
}
completion:^
{
//your code to rotate the topView
}
}
note that the topViewHeightConstraint and bottomViewHeightConstraint should be outlets connected in IB.
Hope that helps, let me know if you need more help.
I would prefer first download the project from below link and then continue with question (only 36kb)
Download Link
At start what I have is like below.
When I click My Office button, I am calling action actionSeenButton which will print NSLog(#"actionSeenButton");
- (IBAction)actionSeenButton:(id)sender {
NSLog(#"actionSeenButton");
}
This works perfect.
When I click, Show hidden button, I am sliding view by 100 and showing the image and buttons that I have at the top, as shown in below image
Code used is
- (IBAction)showHiddenButton:(id)sender {
CGAffineTransform translation = CGAffineTransformIdentity;
translation = CGAffineTransformMakeTranslation(0, 100);
[UIView beginAnimations:nil context:nil];
self.view.transform = translation;
[UIView commitAnimations];
}
When I click this button, I am calling action actionHiddenButton which will print NSLog(#"actionHiddenButton");
- (IBAction)actionHiddenButton:(id)sender {
NSLog(#"actionHiddenButton");
}
BUT the problem is, when I click the new button that I see, action is not getting called.
Any idea why this is happening?
Note
When I move the top hidden button from y=-70 to y=170, action is getting called.
Sample project can be downloaded from here
What I wanted to implement is, showing three buttons (as menu) on the top in one line by moving view down.
verify that your button is not behind the frame of another view. even if the button is visable, if there is something covering it up it wont work. i don't have access to xcode at the moment but my guess is your view "stack" is prohibiting you from interacting with the button. a button is esentually a uiview and you can do all the same animations to buttons and labels that you can with views. your best bet is to leave the view in the background alone and just move your buttons. since your "hidden" button isn't part of your main "view" hiarchy thats where your problem is.
upon further investigation, your problem is related to auto-layout and making sure your button object stays in the view hierarchy. if you turn off auto-layout you will see where the problem is. when you animate the main view down the "hidden" button is off of the view and there for inactive. the easiest solution is to just animate the buttons. the next best solution closest to what you have is to add another view onto your "main view" and then put the buttons into that view. also why do you have that background image twice? why not just set the background color of your view to that same yellow?
I downloaded your project and it seems the translation you're making for self.view. So the actionHiddenButton is not in the frame.Its better to have the controls you want to animate in the separate view.
If you want to see the problem, after your view get transformed set clipsToBounds to YES. Like
self.view.transform = translation;
self.view.clipsToBounds = YES;
Yipeee!!! Below is how I did.
.h
Added new variable.
#property (retain, nonatomic) NSString *hideStatus;
.m
-(void) viewDidAppear:(BOOL)animated {
NSLog(#"viewDidAppear");
CGAffineTransform translation = CGAffineTransformIdentity;
translation = CGAffineTransformMakeTranslation(0, -100);
self.view.transform = translation;
self.view.clipsToBounds = YES;
[UIView commitAnimations];
self.view.frame = CGRectMake(0,-80,320,560);
hideStatus = #"hidden";
}
- (IBAction)showHiddenButton:(id)sender {
NSLog(#"hideStatus===%#", hideStatus);
CGAffineTransform translation = CGAffineTransformIdentity;
if ([hideStatus isEqualToString:#"hidden"]) {
translation = CGAffineTransformMakeTranslation(0, 0);
hideStatus = #"shown";
} else {
translation = CGAffineTransformMakeTranslation(0, -100);
hideStatus = #"hidden";
}
[UIView beginAnimations:nil context:nil];
self.view.transform = translation;
self.view.clipsToBounds = YES;
[UIView commitAnimations];
}
Attached is the sample project. You can download from here.
I wonder for an iOS app, what is the best way to implement a slide-out panel with a button and slider inside it?
That is, the app will have a small "i" icon at the bottom right corner of the screen that kind of look like:
When that icon is touched, a panel of size about 1/4 of the screen will slide out from the bottom, showing a button, a slider, or possibly some other widgets.
What is the best way to implement it -- using Interface Builder or is it better purely by code, and the object to use for the panel (UIView or any existing widget that has this slide out / slide in function?).
Assuming you are going to use this in multiple locations within your app you would probably want to make it as a reusable component. I would suggest making the slide out screen its own view controller where you could create its view using IB if you need. When the user hits the 'i' you would alloc the slide out view controller, add its view as a subview to your current view controller and animate it in. If you need to communicate between the slide out and your current view controller you could just create a custom delegate protocol on your slide out. I recognize this is making some assumptions but would likely be a clean solution for you.
Creating this by Interface Builder is a pain (anyways, that tool sucks). You should definitely create that in code. It will also be easier to maintain if you can concentrate on the code and don't have to mess with setting mysterious properties in IB only for the view to be displayed at all...
You can try implementing it like this:
#interface SlideOutMenu: UIView {
UIImageView *imgView;
UITapGestureRecognizer *tap;
}
- (id)initWithImage:(UIImage *)img;
#end
#implementation SlideOutMenu
- (id)initWithImage:(UIImage *)img
{
if ((self = [self initWithFrame:CGRectMake(0, someY, 44, 44)]))
{
imgView = [[UIImageView alloc] initWithImage:img];
[self addSubview:imgView];
[imgView release];
tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(_tapped)];
[self addGestureRecognizer:tap];
[tap release];
}
return self;
}
- (void)_tapped
{
if (self.frame.origin.x > 1.0) // 1.0: some tolerance b/c of floating point numbers
{
[UIView animateWithDuration:0.3 animations:^{
self.frame = CGRectMake(0, self.frame.origin.y, self.frame.size.width, self.frame.size.height);
}];
}
else
{
[UIView animateWithDuration:0.3 animations:^{
self.frame = CGRectMake(120.0, self.frame.origin.y, self.frame.size.width, self.frame.size.height);
}];
}
}
#end
We have a custom view with a UIPickerView plus toolbar (216 + 44). At init time (viewDidLoad) this custom view is pushed below the screen using the following piece of code.
CGPoint newOrigin;
newOrigin.x = pickerViewOutlet.frame.size.width/2;
newOrigin.y = self.view.frame.size.height + ((pickerViewOutlet.frame.size.height)/2);
NSLog(#"%f,%f",self.view.frame.size.height,(pickerViewOutlet.frame.size.height)/2);
pickerViewOutlet.center = CGPointMake(newOrigin.x, newOrigin.y);
When a button is clicked this view is pulled up using the following piece of code.
[self.view bringSubviewToFront:pickerViewOutlet];
NSLog(#"tabbar %f",self.tabBarController.tabBar.frame.size.height);
CGPoint showOrigin;
showOrigin.x = pickerViewOutlet.frame.size.width/2;
showOrigin.y = pickerViewOutlet.center.y - pickerViewOutlet.frame.size.height;
//self.tabBarController.tabBar.frame.size.height ;
NSLog(#"showpicker %f,%f",pickerViewOutlet.center.y,pickerViewOutlet.frame.size.height);
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:0.5];
pickerViewOutlet.center=CGPointMake(showOrigin.x, showOrigin.y);
[UIView commitAnimations];
[pickerCtrlOutlet reloadAllComponents];
This works fine. However this does not work (part of the view is below the tab bar) in the presence of a bottom tab bar controller on the page even though the code is modified as
showOrigin.y = pickerViewOutlet.center.y - pickerViewOutlet.frame.size.height - self.tabBarController.tabBar.frame.size.height ;
However if the above code is modified to
showOrigin.y = pickerViewOutlet.center.y - pickerViewOutlet.frame.size.height - self.tabBarController.tabBar.frame.size.height - 90;
it works perfectly where the view is right above the tab bar.
As far as I know, in viewDidLoad the self.view is not yet added to the superview and thus the frame is not set to the correct sizes.
For example, you can design a UIView in InterfaceBuilder and it will have 320x460. When you add it to the superview it will actually become smaller because of the bottom tab bar. The auto-resizing mechanism helps in this matter.
So, I think you are positioning the picker view using the wrong values in viewDidLoad and then when you use a new position relative to its old one, it will still be wrong.
Here is how I would write this:
[self.view bringSubviewToFront:pickerViewOutlet];
NSLog(#"tabbar %f",self.tabBarController.tabBar.frame.size.height);
CGPoint showOrigin;
showOrigin.x = pickerViewOutlet.frame.size.width/2;
//Notice this line -----------
showOrigin.y = self.view.frame.size.height - pickerViewOutlet.frame.size.height / 2;
//self.tabBarController.tabBar.frame.size.height ;
NSLog(#"showpicker %f,%f",pickerViewOutlet.center.y,pickerViewOutlet.frame.size.height);
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:0.5];
pickerViewOutlet.center=CGPointMake(showOrigin.x, showOrigin.y);
[UIView commitAnimations];
[pickerCtrlOutlet reloadAllComponents];
Notice showOrigin.y = self.view.frame.size.height - ...
And (for extra points :) you can set the autoresizing masks for the picker view to Flexible Top (or, lock the bottom coordinate). If you do this, even if you position the picker view in viewDidLoad and then the self.view resizes, the pickerview will also change it's position.