how to create pinterest style hiding/unhiding nav/tab bar? - iphone

How do I create a hiding/unhiding nav bar like what pinterest and many other apps is doing? I know the basic idea is to use the UIScrollView delegate and detect whether I am scrolling up or down and show the nav bar based on that. So should I also adjust the navcontroller view height if the nav bar is hidden? How does this work?

I have a sample project located on github that does exactly the pinterest/piictu style 'hide the UINavigationController / UITabBarController stuff'
https://github.com/tonymillion/ExpandingView

I've tried https://github.com/tonymillion/ExpandingView and ran into a bunch of issues.
I ended up rolling my own navigation controller to get all the animations synced and used this scrollview code to figure out if I should expand or contract. iOS >=5.0
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
MyCustomNavController* navController = (MyCustomNavController*)self.parentViewController;
if( [scrollView.panGestureRecognizer translationInView:self.view].y < 0.0f ) {
[navController setExpanded:YES animated:YES];
} else if ([scrollView.panGestureRecognizer translationInView:self.view].y > 0.0f ) {
[navController setExpanded:NO animated:YES];
}
}

I would probably try to create my own root controller with scrollbar as main view and put navigation controller's view into it. You can't use scrollbar inside navbar view then but I believe you don't need it in this very case.
If this approach doesn't work I would probably create my own controller that mimic navigation controller appearance.

Related

NavigationBar hides TableView in TabBarViewController

I have a ViewController that Pushes a TabBarViewController. Inside that TabBar View Controller I have 4 tabs. Two of these tab bars are UITableViewControllers and the other two are ViewControllers. The first tab is a table view controller and is working fine, ie not being hidden by the navigation bar. The third tab, which is another TableViewController, is being partially covered by the navigation bar. The first section and first cell is being hidden underneath the navigation bar. Has anyone had this problem in the past or does anyone know a solution to this? I've tried a couple of things like resizing the frame size manually
self.tableView.frame = CGRectMake(10,10,self.view.bounds.size.width -20, self.view.bounds.size.height-20);
That did't seem to work. I tried AutoLayout as well and didn't work. I don't know what else to do. Anyone have any suggestions or ideas of how to tackle this.
Edit: I've tried the edgesForExtendedLayout but it is making my navigationbar a darker color. It animates the color change in the navigationbar, sort of like a loading bar.
Note: This is only happening in ios7. I just simulated it in iOS 6.1 and the navigationbar does not cover the table view controller at all, which is weird to me. Any one have any suggestions?
Edit #2: Noticing that this is an iOS 7 > problem i did the following but now the navigation bar has changed color to a darker color.
if([[[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:#"."][0] intValue] >= 7)
{
if ([self respondsToSelector:#selector(edgesForExtendedLayout)])
{
self.edgesForExtendedLayout = UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars = YES;
self.automaticallyAdjustsScrollViewInsets = NO;
}
}
In the viewDidLoad method of UITableViewController (assuming it's loaded with a call to the tabBarController) that is associated with the tabs use
if ([self respondsToSelector:#selector(edgesForExtendedLayout)]) {
self.edgesForExtendedLayout = UIRectEdgeNone;
self.tableView.contentInset = UIEdgeInsetsMake(0., 0., CGRectGetHeight(self.tabBarController.tabBar.frame), 0);
}
I fixed that with:
if ([self respondsToSelector:#selector(edgesForExtendedLayout)]) {
viewcontroller.edgesForExtendedLayout = UIRectEdgeNone;
viewcontroller.extendedLayoutIncludesOpaqueBars = NO;
viewcontroller.automaticallyAdjustsScrollViewInsets = NO;
}

Tabbar Controller with swipe effect

I'm trying to do a Tabbar Controller like below effect:
By swiping an viewcontroller will redirect to next tab. How can we achieve this in iOS? Is there any other controls to do like this?
Just add UISwipeGestureRecognizer to your tabBarView controller and change your tabBar index after swipe.
swipeRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
action:#selector(swipeMethod:)];
swipeRecognizer.direction = UISwipeGestureRecognizerDirectionRight | UISwipeGestureRecognizerDirectionLeft;
[self addGestureRecognizer:swipeRecognizer];
And my method to handle swipe is :
-(void)swipeMethod: (UISwipeGestureRecognizer *) sender
{
NSLog(#"Swipe!");
}
EDIT
Or you can use UIScrollView with paging enable and UIView to display your data.
Here is the tutorial you are looking for Tabbar Controller with swipte effect
There is a library for this on GitHub, it is called MGSwipeTabBarController and is designed to do exactly what you are looking for.
It is as simple as :
NSArray *viewControllers = . . . //your view controllers
MGSwipeTabBarController *swipeController = [[MGSwipeTabBarController alloc] initWithViewControllers:viewControllers];
Please Note that it is only compatible with iOS7 and + and that you'll still need to design your own tab bar that respond to scroll events using the MGSwipeTabBarControllerDelegateprotocol.
https://github.com/mglagola/MGSwipeTabBarController
https://github.com/nicklockwood/SwipeView
you can use this class to achieve your goal...
or else you have to make animation for tap on tabbar using following method,
[UIView transitionFromView:<#(UIView *)#> toView:<#(UIView *)#> duration:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> completion:<#^(BOOL finished)completion#>]
If anyone is still looking you can find another implementation here on this youtube series
https://www.youtube.com/watch?v=3Xv1mJvwXok&list=PL0dzCUj1L5JGKdVUtA5xds1zcyzsz7HLj
Edit:
So to my knowledge and according to the video, the idea is that you'll want to use two UICollectionViews in one view controller. One collection view to display the content (apps) and the other for the horizontal navigation containing the categories.
To create the green 'highlight' bar you can use a UIView and adjust the height/width of the bar using constraints - heightAnchor/widthAnchor and add that to the navigation bar.
To get the bar moving with the distance the user will swipe, there is a method you can override to capture the horizontal scrolling called scrollViewDidScroll. From here you'll want to provide a variable from your the UIView's constraint (of type NSLayoutConstraint) to be able to update the x position of the UIView
override func scrollViewDidScroll(_ scrollView: UIScrollView)
{
print(scrollView.contentOffset.x)
menuBar.myGreenBarLeftConstraint.constant = scrollView.contentOffset.x / 4
//or however many categories you have
}

Layout Multiview Rotated iPhone App with a Toolbar

I have a multiview app with a Toolbar. The Root view controller controls the toolbar, but the other views have their own view controller class. I use code like this to load the views:
-(IBAction)loadBand1Start:(id)sender{
[self clearView];
Band1Start *band1Controller = [[Band1Start alloc] initWithNibName:#"Band1Start" bundle:nil];
self.band1Start = band1Controller;
[band1Controller release];
[self.view insertSubview:band1Start.view atIndex:0];
if (UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation)) {
band1Start.view.frame=CGRectMake(0, 0, 480.0, 260.0);
} else {
band1Start.view.frame=CGRectMake(0, 0, 320.0, 400.0);
}
}
The IF statement is to make it load in the correct orientation. Without this, although it rotates ok, it always loads in Portrait, even if the phone is in landscape.
Autosize and Auto Rotate works. I used IB to build my nibs in portrait. When the phone is rotated to landscape, they do rotate and resize, however with some nibs, the rotated layout does not look right. There is overlaps etc, which is a common problem, and I know can be fixed using CGRectMake.
However, it does not matter where I put the CGRectCode, it does not execute. I have tried putting it in willRotateToInterfaceOrientation, willAnimateRotationToInterfaceOrientation, and viewWillAppear, but the rotated layout is not changed.
If I use the code below to switch views, the rotated layout is how I want it, but the toolbar does not appear:
-(IBAction)loadBand1Start:(id)sender{
[self clearView];
Band1Start *band1Controller = [[Band1Start alloc] initWithNibName:#"Band1Start" bundle:nil];
[self presentModalViewController:band1Controller animated:NO];
[band1Controller release];
}
I think this is because the view controller for the toolbar needs to be the root view controller for the toolbar to appear, but only the root view controller receives the orientation change notifications.
So if I keep my toolbar controller as the root view controller, the subview's controller does not receive the orientation notifications, so does not execute my CGRectMake code, but if I make the subview's controller the root view controller, it receives the notifications ok, but the toolbar does not appear because it's controller is not the root controller.
Am I correct about the problem here? Is there a way around it?

How to Animate Switching Buttons in Xcode?

I have a button on navigationbar called Map and List
When Map is pressed I do
- (IBAction)Map:(id)sender {
self.tabBarController.navigationItem.rightBarButtonItem =self.List;
[BNUtilitiesQuick AnimateSwitchingWithParent:SwitchViews From:theTable To:GoogleMapController.view];
}
- (IBAction)List:(id)sender {
self.tabBarController.navigationItem.rightBarButtonItem =self.Map;
[BNUtilitiesQuick AnimateSwitchingWithParent:SwitchViews From:GoogleMapController.view To:theTable];
}
Now, curiously, rather than setting self.tabBarController.navigationItem.rightBarButtonItem =self.Map; and make the button split in a jiffy, I think I would like to animate that switch.
How would I do so?
Also how would I animate pushing and poping view to navigation controller? How do I animate users switching tabBar item?
If you check out the UITabBar documentation: UITabBar
- (void)setItems:(NSArray *)items animated:(BOOL)animated
Try making an array of the new tab bar items you want, and set it to the UITabBar
// Assuming "tabBar" is a UITabBar, probably part of a UITabBarController
// Assuming "newItem" is a new UITabBarItem containing the new buttons you want
// animate in.
NSArray* newItemArray = [NSArray arrayWithObjects:newItem,nil];
[tabBar setItems:newItemArray animated:YES];
// This should work, and you can include more than just one new item for multiple
// buttons on the tab bar.
Hope that works for you!

Tab Bar controller is not accessible

I have created a tab based application for iphone. when the 1st tab presses a first view will present. this view contains a button, on pressing it another view loads.
Code is:
-(IBAction)buttonPressed: (id) sender
{
Cities *cv=[[Cities alloc] initWithNibName:#"Cities" bundle:nil];
cv.modalTransitionStyle=UIModalTransitionStyleCoverVertical;
[self presentModalViewController:cv animated:YES];
[cv release];
}
Now problem is that this view is loading in whole screen so that I am not able to access tab bar.
I have set the frame for this view and the view is loading in this frame,
-(void)viewWillAppear:(BOOL)animated
{
self.view.frame = CGRectMake(0, 0, self.view.frame.size.width, 400);
}
but in remaining part white screen is appearing means tab bar is not accessible.
I want that whatever will be load at any time tab bar should be always accessible.
Please help me out.
Add
cv.modalPresentationStyle = UIModalPresentationCurrentContext;
Have you tried using UINavigationController inside your tabbar to dig inside your UIViewControllers??
for Ref : Adding NavigationController to Tabbar
do you really need a viewController Class for what you are trying to display??
if der's no core functionality being used, i think it will be much easier with UIView.
Happy Coding :)