I have a quite regular UIViewController that is a part of a UINavigationController-hierarchy, which naturally makes the view have a UINavigationBar at the top. As we all know, iOS7's navigation bars are very different from previous versions.
If I drag a UITableView into my view in Storyboard, then the 'frame' for the table view is covering the entire view (I.E [tableView setFrame:self.view.frame];). Even behind the NavigationBar.
This makes so that if I scroll, the content will be faintly visible through the bar.
Contrary to most people, I actually like this.
In my current view controller, I would like to create the UITableView programmatically and place it as a subview here. However, I am unable to achieve the same effect this way.
I have tried
UITableView *table = [[UITableView alloc] initWithFrame:self.view.frame];
[self.view addSubview: table];
This makes the 'top scrolling point' stay behind the navigation bar. Imagine a single cell in a tableView, and it's faintly visible through the top bar. If I scroll down, it pops right up behind it. That's the default 'top position'.
I have also tried
CGRect frame = CGRectMake(0, 'nav.y+nav.height', self...width, self...height-y);
UITableView *table = [[UITableView alloc] initWithFrame:frame];
[self.view addSubview: table];
to simply place the table view in the rect below the UINavigationBar, but then I won't get the scrolling transparency effect behind the bar.
I also tried the first example along with this:
[tableView setContentOffset:CGPointMake(0, 'below navbar')];
which makes it stay exactly where I want it to stay, but as soon as I touch it (scroll and release), it scrolls back up behind the navigation bar, and stays there.
What's the programmatic solution to achieve this effect? Do I have to set the offset every time I scroll too far up, or is there a simpler solution? Along with this iOS7-style, I'd imagine they would add something like [tableView setVisibleFrame:] or something..?
Add the table in storyboard like normal but make sure you have it connected to an outlet (we will call it _tableView for now).
Then in your view controller's -viewDidLoad set the top inset to be the status bar plus the navigation bar:
`self.tableView.contentInset = UIEdgeInsetsMake( (self.navigationController.navigationBar.frame.origin.y + self.navigationController.navigationBar.frame.size.height), 0, 0, 0);'
This will make sure that all of the cells will be visible but will also fill the area behind the navigation bar with white so the bar doesn't end up gray.
Related
I have a table view laid out between a navigation bar and a tab bar and want to achieve scrolling only for the table view section (so in other words, in my iOS Simulator, I would want the two bars to always be seen, and I should be able to scroll my table view between them).
Having tried out various suggestions from SO posts, afraid am still getting something wrong. Can you advise please how do I fix this issue - I've been struggling with it for the last 1 day!
In the table view controller's viewDidLoad, I use the following code. Earlier, I also tried initializing a scroll view separately but understand that table view is a sub-class of scroll view, so ditched that path...
- (void)viewDidLoad
{
[super viewDidLoad];
// To remove extra separators from the table view to prevent blank rows from showing.
self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
// ***** Scroll view implementation *****
[[self tableView] setFrame:CGRectMake(0, self.navigationController.navigationBar.frame.size.height, self.view.frame.size.width, self.view.frame.size.height - self.navigationController.navigationBar.frame.size.height - self.tabBarController.tabBar.frame.size.height)];
[[self tableView] setContentSize:CGSizeMake(self.view.frame.size.width, 2000)];
[self setEdgesForExtendedLayout:UIRectEdgeNone];
self.automaticallyAdjustsScrollViewInsets = YES;
}
In fact, to test this further, I have created a scroll view in a separate tab (in this tabbarcontroller app) where I only have a navigation bar and a tab bar so far (no table view). Its viewDidLoad looks like this - somehow, no luck there as well... the scroll bar starts from the top of the screen (rather than from the bottom of the navigation bar) and goes till the bottom of the screen (rather than till the top of the tab bar). So clearly I'm doing something conceptually wrong here... appreciate if you can help out please!!! The numbers put in here are experimental to test this out but I've ensured that the content size is larger than the scroll view frame...
- (void)viewDidLoad
{
[super viewDidLoad];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 300)];
[scrollView setContentSize:CGSizeMake(self.view.frame.size.width, 1500)];
[self.view addSubview:scrollView];
[self setEdgesForExtendedLayout:UIRectEdgeNone];
self.automaticallyAdjustsScrollViewInsets = NO;
[scrollView setScrollEnabled:YES];
}
Finally, when I debug my app in the simulator, what is odd is that for the table view tab, the scroll bar does appear momentarily to start from below the navigation bar. But as soon as I touch the track pad to scroll, it disappears and a more prominent scroll bar appears and starts from the top of screen to the bottom of the screen as I mention initially above!
I think I found the underlying error in my ways. More than an implementation bug, it was me missing out on a very basic issue...
In summary, the iOS Simulator would typically always have higher resolution / number of pixels than the computer screen, and no matter what, the simulator would always outsize the computer screen unless manually resized. So the scroll bar would usually be always present. This SO post helped me understand it.
On the other hand, the UIScrollView was automatically already implemented in my table view, given that UITableView is a subclass of UIScrollView - I didnt have to do anything. I was scrolling the simulator with a 'light' double-touch, which was taking me to the scroll bar due to the issue mentioned above. If I 'hard-clicked' and then scrolled, then voila! The required UIScrollView did work properly as expected! This is probably what misled me to mention these statements in the question...!
Finally, when I debug my app in the simulator, what is odd is that for the table view tab, the scroll bar does appear momentarily to start from below the navigation bar. But as soon as I touch the track pad to scroll, it disappears and a more prominent scroll bar appears and starts from the top of screen to the bottom of the screen as I mention initially above!
I have a navigation setup where at the top there is a UITabBarController. I then have a tab, which is instantiated by creating a UIViewController placed into a UINavigationController like so:
UIViewController *testVC = [UIViewController new]; // Has UITableView as subview
UINavigationController *testNavVC = [[UINavigationController alloc] initWithRootViewController:testVC];
[self setViewControllers:#[testNavVC]];
The problem that arrises is with the UITableView inside the testVC UIViewController. The table displays properly at the top and is correctly situated underneath the UINavController's nav bar. When you scroll the table view to the bottom, however, the final rows in the table view will be cut off at the bottom of the screen. I found out that I can set the bottom content inset to 100(value will differ based on row height) to correctly display the content. I don't feel like I should need to do that though, and am looking for a better solution.
How can I properly add a UITableView that is nested in this way?
As a side note this all works correctly when using a UITableViewController rather than a UIViewController with the added UITableView. In my case I am needing to use the latter option.
You can try to adjust UITableView bottom inset without hardcoding, by using bottomLayoutGuide property:
tableView.contentInset = UIEdgeInsetsMake(0.0, 0.0, self.bottomLayoutGuide.length, 0.0);
It indicates lowest vertical extent for content, and can be used from iOS 7.
As an alternative you can create bottom NSLayoutConstraint for UITableView with this value.
All of my code was done programmatically and the problem ended up being that I setup the UITableView with the views frame. I switched it over to use autolayout instead and it worked great!
Hey guys here is my dilemma. I am trying to create a tab bar that spans top to bottom anchored at the left side instead of left to right anchored at the bottom. I created a toolbar item that places the bar exactly where I want it but I want the tab bar to be the same, with the same functionality except of course with the hairline in place, and the bar items lining up top to bottom.
This is my code for the tool bar, I know the tab bar will be coded similarly, I just hit a slump.
UIToolbar *toolBarLeft = [[UIToolbar alloc] init];
toolBarLeft.frame = CGRectMake(0, 20, 50, 568);
toolBarLeft.layer.borderColor = [UIColor lightGrayColor].CGColor;
toolBarLeft.layer.borderWidth = 0.5f;
[self.view addSubview:toolBarLeft];
I appreciate the help guys!
The gist of what you need to do is this:
Subclass UITabBarController.
Make sure the default tabBar property's hidden property gets set to YES (so its hidden) and stays that way.
Add any custom view you want to use as the tabbar to this subclass's view property (just as you'd add a view as a subview to a UIViewController).
The subview you add in step 3 should respond to touches and have a delegate property. The UITabBarController subclass should delegate the view so it can respond to different tabs being selected (as well as many other things).
As long as the navigation is logical and easy to understand, your app won't be rejected simply for modifying how a tab bar works.
ADDENDUM:
For step 3, given you want tabs stacked vertically, I'd actually recommend a UITableView subclass where the value returned from tableView:heightForRowAtIndexPath: is calculated something like this:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {
CGFloat totalHeight = tableView.frame.size.height;
CGFloat totalTabs = (CGFloat)[tableView numberOfRowsInSection:0];
return totalHeight/totalTabs;
}
And scrolling is disabled.
Because now when tableView:didSelectRowAtIndexPath: is fired, we can tell the tab bar controller: tabBarController.selectedIndex = indexPath.row;
I started building a TableView in my app by using a TableViewController in a storyboard. When you do this, you have a very cool effect when you scroll down your list : the cells moving behind the nav bar get blurred.
Some time later, I had to move from this TableViewController to a ViewController with a TableView inside (I had to add other views at the bottom of the table).
In order to avoid having the first cells hidden by the navigation bar (being over it), I added constraints to the Top and Bottom Layout Guides, and to the left and right edges of the view.
This works fine, but I lost the cool blurred scrolling effect : the cells seem to be disappearing before going behind the navigation bar.
I've seen workarounds with people not using constraints and putting magic numbers in interface builder. I cannot do this, first because I dislike it, and second because I have to be iOS 6 compatible.
What did I miss to be able to benefit again from the blurred navigation bar effect ?
You have to manually adjust the contentInset of the table view and make sure the table view frame origin is 0, 0.
In this way the table view will be below the navigation bar, but there will be some margin between the content and the scroll view edges (the content gets shifted down).
I advise you to use the topLayoutGuide property of the view controller to set the right contentInsets, instead of hard coding 64 (status bar + navigation bar).
There's also bottomLayoutGuide, which you should use in case of UITapBars.
Here is some sample code (viewDidLoad should be fine):
// Set edge insets
CGFloat topLayoutGuide = self.topLayoutGuide.length;
tableView.contentInset = UIEdgeInsetsMake(topLayoutGuide, 0, 0, 0);
By the way, this properties of UIViewController might help you (you should not need to change their default values, but I don't know what your view hierarchy is):
automaticallyAdjustsScrollViewInsets
edgesForExtendedLayout
extendedLayoutIncludesOpaqueBars
The tableView needs to be full screen. That is underneath the top and bottom bars. Note don't use the top and bottom layout guides as they are used for positioning relative to the bars not underneath.
Then you need to manually set the content inset of the tableview. This sets the initial scroll position to under the top bar.
Something like:
CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame].size;
CGFloat h=MIN(statusBarSize.width, statusBarSize.height);
UIEdgeInsets e = UIEdgeInsetsMake(self.navigationController.navigationBar.bounds.size.height + h,
0.0f,
0.0f,
0.0f);
self.tableView.contentInset = e;
Not you get this functionality for free when using a tableView controller and the "Automatically Adjust content inset" settings
You probably have the coordinates of your tableView not set to (0, 0) to map to those of the viewController.view.frame or viewController.view.bounds. If you have done that, try setting
self.navigationController.navigationBar.translucent = YES;
UIViewController property edgesForExtendedLayout does the trick. If you are using storyboards just make sure Extended Edges Under Top Bars is on (and it is by default).
If you are creating your view controller programmatically try this:
- (void)viewDidLoad
{
[super viewDidLoad];
self.edgesForExtendedLayout = UIRectEdgeAll;
}
And of course, your table view needs to have proper autoresizing mask/layout constraints
edgesForExtendedLayout is not what you want here, as this will limit the table view underneath the navigation bar. In iOS 7, the view controllers uses fullscreen by default, and the property controlling where the tableview content starts is automaticallyAdjustsScrollViewInsets. This should be YES by default, so check if it is somehow set to NO, or try setting it explicitly.
Check this answer for a good explanation on how this works:
https://stackoverflow.com/a/19585104/1485715
I don't know if this makes sense at all. I have UIScrollView from interface builder hooked it up as an outlet on top of my UIScrollView I have a UIImage view which holds an image called Scroll Background it is an extra half in screen real estate - my app is landscape and the image is an about half the screen taller. The image is hooked up as an outlet too. I have a button on a toolbar that brings up the keyboard when the button is pressed I'd like to programmatically scroll to the bottom of the UIImage view and when it is resigned I'd like to programmatically scroll to the top. I don't want the user to be able to scroll just for the app to scroll programmatically.
I can't seem to get this method to work and I'm not sure why :/
- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated
scrollRectToVisible:animated: is a non-intuative method to use in my opinion. In order to accomplish what you are after you should be able to set userInteractionEnabled to NO on the UIScrollView that will prevent users from scrolling.
Then in order to scroll the view programmatically you can call scrollRectToVisible but you need to give it a CGRect that is representative of the area you want to show. So in your case to scroll to the top:
CGRect visibleFrame = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds) , CGRectGetHeight(self.view.bounds));
[self.myScrollView scrollRectToVisible:visibleFrame animated:YES];
Hope this helps!