When you open Mail on an iPhone and tap Edit, select an email and tap Move, a UITableView appears with all the folders you can put the mail in. At the top is a transparent view that shows the email you selected. When you move your finger down, the view stays in place, when you move it up, the cells are visible through the transparent view.
How did apple configure this view? I thought of two ways, but they both don't work:
The view is returned as the header view of the UITableView. Doesn't work because the view stays at the top even if the table view is moved down.
The view is static at the top, the frame of the table view starts at the bottom of the transparent view. This doesn't work because when the table view is moved up, it is visible through the transparent view.
Any ideas on how to recreate this effect?
You need to create your transparent view and then add it as a subview to the view controller so it's a sibling of the UITableView. You would do this in the viewDidLoad() method.
- (void)viewDidLoad
{
int viewHeight = 50;
// Assume myTableView is a UITableView variable
myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 44) style:UITableViewStylePlain];
myTableView.scrollIndicatorInsets = UIEdgeInsetsMake(viewHeight, 0, 0, 0);
myTableView.contentInset = UIEdgeInsetsMake(viewHeight, 0, 0, 0);
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.view.frame.size.width,viewHeight)];
// Configure your view here.
myView.backgroundColor = [UIColor colorWithRed:0.0 green:0.7 blue:0.8 alpha:0.75];
[self.view addSubview:myTableView];
[self.view addSubview:myView];
[myView release];
}
You could also setup your view using an XIB, but I'll leave that as an exercise for you.
Edit: Removed the requirement for the the UITableView delegate methods and custom header view by using the contentInset property instead.
Note: see additional comments below.
For the XIB method:
Create a new UIViewController (with XIB)
Add to it your UITableView and your UIView.
Make them both subviews of the default UIView (called View) and make sure that they are added in the correct order. UITableView should be the first in the list, your view should be second (so your view is on top of the UITableView).
In the .m file implement the minimum for UITableViewDataSource and UITableViewDelegate:
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
In Interface Builder select the UITableView list and go to 'Connection Inspector'. There drag dataSource and delegate to 'File Owner'.
Save and run. You should be done now.
Related
I have a UICollectionView which has nine cells in it. Each cell is a square, so that they're laid out in a 3 by 3 grid. This works nicely, and when the device rotates, I call performBatchUpdates:completion: to force the collectionView to layout the cells for the new orientation.
Here's what it looks like without the search bar:
I'm now trying to add a UISearchBar on top of the collectionView, like so:
I've tried adding it as a header view, but instead of appearing on top, it consumes the entire screen, and the cells are pushed off to the right. To see them, you scroll over, where there appear as they do without the search bar.
To add the search bar, I've tried two approaches. Neither works completely, and one seems like terrible practice. The first way I've tried is to add the search bar as a header view. My main view is a subclass of UICollectionViewController. Here's how I set things up:
- (void) viewDidLoad
{
// Set up some other things...
//
// Register the header view class
// which installs a search bar inside
// of itself.
//
[[self collectionView] registerClass:[PDReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:#"header"];
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
PDReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:#"header" forIndexPath:indexPath];
[header setFrame:[[[self navigationController] navigationBar] bounds]];
return header;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
if (section == 0) {
return CGSizeMake(collectionView.frame.size.width, self.navigationController.navigationBar.frame.size.height);
}
return CGSizeZero;
}
Inside of PDReusableView, I install a UISearchBar. This is what I get:
So this approach fails, because I can't wrangle a search controller or search bar into a reusable view. If I can't put it into a reusable view, it can't go into a UICollectionView.
My other option is to resize the collection view, so it doesn't occupy the entirety of the screen. The question then becomes, where do I install the search bar in the view hierarchy? The simplest place, although likely incorrect, is the app delegate, where I set up the rest of the view hierarchy. I managed to get the search bar to appear above the collection view by installing it inside of application:didFinishLaunchingWithOptions: Here's my code for that:
UICollectionView *collectionView = [[self mainMenuViewController] collectionView];
CGRect f = [collectionView frame];
CGFloat height = [[[self navigationController] navigationBar] frame].size.height;
f.size.height -= height;
f.origin.y += height;
[collectionView setFrame:f];
// Cause the cells to be laid out per the new frame
[collectionView performBatchUpdates:nil completion:nil];
[[collectionView superview] addSubview:[self searchBar]];
[[self searchBar] setFrame:[[[self navigationController] navigationBar] bounds]];
While I could proceed to add search logic to the app delegate, it would be inappropriate to do so, because I'd be maintaining a dataset, filtered search results, and a lot of other logic in the app delegate. I feel like the UICollectionViewController subclass is a much more appropriate place to put it.
Is there a way to install the UISearchBar in a UICollectionView without using Interface Builder? How?
Edit:
I'm using a vanilla UICollectionViewFlowLayout and using some of the delegate methods to set the size of cells etc.
I haven't used UICollectionView or UICollectionViewController yet, but I have used UITableView and UITableViewController, and my general rule of thumb is: never use UITableViewController if you want to do anything complicated. I suspect that UICollectionViewController is similar: a fairly brittle, limited view controller that doesn't actually save you much hassle.
So if I were in your position, I'd be looking at just subclassing UIViewController and including a UICollectionView in my view controller. Your view hierarchy might then be as simple as:
Root UIView
UISearchBar
UICollectionView
I have a UITableViewController subclass used for entering settings for my app. I add custom buttons to the table footer by adding them to a view that I return in he call to tableView:viewForFooterInSection:.
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
CGRect viewRect = self.view.bounds;
float height = _settings.isNew ? 50.0 : 110.0;
float margin = (viewRect.size.width > 480.0) ? 44.0 : 10.0;
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, viewRect.size.width, height)];
GradientButton* button = [[GradientButton alloc] initWithFrame:CGRectMake(margin, 5, viewRect.size.width - margin * 2, 44)];
[view addSubview:button];
[button addTarget:self action:#selector(testConnectionClicked:) forControlEvents:UIControlEventTouchUpInside];
[button release];
if (!_settings.isNew)
{
// I add another button
}
return [view autorelease];
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
return _settings.isNew ? 50 : 110;
}
The whole point of subclassing from UITableViewController is to avoid problems with getting the cells scrolled into view when the keyboard appears.
This works mostly as it should, however when the edit moves to the last cell it seems to try to scroll the table footer into view. This means that it actually scrolls the editing textfield out of view when on iPhone in landscape view.
I solved this by adding an extra UIView below the tableview in my tableviewcontroller instead of setting some text in the footer of my last tableview section.
if you want that footer in multiple sections, this does not fix your problem of course.
Taking a hint from #ben-packard's answer, I discovered that the UITableViewController auto-scrolling isn't at fault; it's actually UITableView's -scrollToRowAtIndexPath:atScrollPosition:animated: that's causing the view to scroll too far. I have to imagine this behavior is intentional even though it's not documented, but in any case we can fix it by subclassing UITableView and overriding that method:
- (void)scrollToRowAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated {
if (scrollPosition == UITableViewScrollPositionNone)
[self scrollRectToVisible:[self rectForRowAtIndexPath:indexPath] animated:animated];
else
[super scrollToRowAtIndexPath:indexPath atScrollPosition:scrollPosition animated:animated];
}
Did you implement tableView:heightForFooterInSection? It sounds like that could be the problem. If you implement tableView:viewForFooterInSection you must also implement tableView:heightForFooterInSection.
I suspect that the problem lies in your implementation of the scrolling on keyboard, but you didn't post any code from it.
Instead of subclassing a UITableView, why don't you do something like scrollToRowAtIndexPath:atScrollPosition:animated: when you do something that displays the keyboard? I found a similar thread here.
I found that scrolling to the rect instead (even though it is derived from the same row) seems to work:
CGRect rect = [myTableView rectForRowAtIndexPath:myIndexPath];
[myTableView scrollRectToVisible:rect animated:YES];
I'm searching for a way to have a UITableViewController with a UITableView at the top and a UIPickerView bellow (with fix position).
I've found a solution for fixing the picker with the code bellow:
- (void)viewDidLoad {
[super viewDidLoad];
_picker = [[UIPickerView alloc] initWithFrame:CGRectZero];
_picker.showsSelectionIndicator = YES;
_picker.dataSource = self;
_picker.delegate = self;
// Add the picker to the superview so that it will be fixed
[self.navigationController.view addSubview:_picker];
CGRect pickerFrame = _picker.frame;
pickerFrame.origin.y = self.tableView.frame.size.height - 29 - pickerFrame.size.height;
_picker.frame = pickerFrame;
CGRect tableViewFrame = self.tableView.frame;
tableViewFrame.size.height = 215;
self.tableView.frame = tableViewFrame;
[_picker release];
}
The problem is with the tableview, it seems resizing doesn't work so I can't see all results .
Thanks for your advice.
You should use a UIViewController subclass instead of UITableViewController to manage a table view if the view to be managed is composed of multiple subviews, one of which is a table view. You can add a UITableView subview and make your controller implement UITableViewDelegate and UITableViewDataSource protocols.
The default behavior of the UITableViewController class is to make the table view fill the screen between the navigation bar and the tab bar (if either are present).
From Table View Programming Guide for iOS:
Note: You should use a
UIViewController subclass rather than
a subclass of UITableViewController to
manage a table view if the view to be
managed is composed of multiple
subviews, one of which is a table
view. The default behavior of the
UITableViewController class is to make
the table view fill the screen between
the navigation bar and the tab bar (if
either are present).
If you decide to
use a UIViewController subclass rather
than a subclass of
UITableViewController to manage a
table view, you should perform a
couple of the tasks mentioned above to
conform to the human-interface
guidelines. To clear any selection in
the table view before it’s displayed,
implement the viewWillAppear: method
to clear the selected row (if any) by
calling deselectRowAtIndexPath:animated:.
After the table view has been
displayed, you should flash the scroll
view’s scroll indicators by sending a
flashScrollIndicators message to the
table view; you can do this in an
override of the viewDidAppear: method
of UIViewController.
When I add a subview to my UITableViewController, it seems to be underneath the tableview. I may be loading my subview incorrectly, or calling addSubview in the wrong place. The subview I'm referring to is the red area above the tabbar that also contains the "Click me" button:
You can see that the cell lines kind of overlap. Here is where I'm adding the subview in my TableViewController:
- (void)viewDidLoad {
[super viewDidLoad];
CGRect hRect = CGRectMake(0, 170, 320, 480);
HomeScreenOverlayView *homeView = [[HomeScreenOverlayView alloc] initWithFrame:hRect];
[self.tableView addSubview:homeView];
[homeView release];
}
Any ideas? Thanks!
I have had this issue myself and resolved it by not adding a view to the table, but rather adding the view to the table's superview.
UIView *viewToAdd = [[UIView alloc] initWithFrame: self.view.frame];
[self.view.superview addSubview: viewToAdd];
This is particularly useful when you want to mask the entire table (e.g. loading screens).
N.B. I will usually add this to viewWillAppear: in the view's lifecycle.
When you call addSubview, it is probably the first view added to the table view. Later, all the cells and support views will be added over your view.
The best thing to do is create an empty view and add both the table view and overlay view to it, making sure the overlay view is above the table view.
Views serve the 3 roles of drawing, interaction and layout. It is fine to have a view that only fills one of those roles.
You can use - (void)sendSubviewToBack:(UIView *)view or - (void)insertSubview:(UIView *)view atIndex:(NSInteger)index. addSubview always puts the new view in front.
EDIT: Sorry, misread the question, it looks like you want the subview to be in front.
I have a view that was created with all of the default UITableView stuff, but now I need to add a header area above where the UITableView is (so the UITableView will scroll normally, but the top 100px of the screen or so will have static header content). I don't see where I can resize the UITableView in IB, and am not sure how to do this.
Does anyone know?
You can use UITableViewDelegate methods to create a custom header view for a table and specify the height, namely tableView:viewForHeaderInSection: and tableView:heightForHeaderInSection:. You can add whatever you like to the view. Here's an example that adds a right aligned UILabel:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,tableView.frame.size.width,30)];
UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, headerView.frame.size.width-120.0, headerView.frame.size.height)];
headerLabel.textAlignment = NSTextAlignmentRight;
headerLabel.text = [titleArray objectAtIndex:section];
headerLabel.backgroundColor = [UIColor clearColor];
[headerView addSubview:headerLabel];
return headerView;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 30.0;
}
Why don't you use the UITableView provided header?. As follow:
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
return #"My Title";
}
Additionally you may resize your table view in IB by dragging the borders.
When you add a UIView or one of its subclasses onto the UITableView using IB (just drag a UIView and drop it onto the UPPER part of UITableView of yours), it automatically adds that UIView component and makes it the "tableHeader" component.
Each UITableView has one tableHeader and one tableFooter component reserved...
This way the new view would be a part of the UITable, and scroll with it or appear/disappear or whatever you do to the table. You can change its hidden property if you need conditional behavior.
On the other hand, if you want the header view stay put, as the table scrolls, then it is better to make the table smaller and put the header above it as suggested in other answers...
I finally solved this problem the right way without changing the base class. The one answer to add the view to the parent nav controller is nice but the transitions look horrible.
The fix is actually easy. The trick is to create custom setter and getter for self.tableView property. Then, in loadView, you replace the view with a fresh UIView and add the tableView to it. Then you're free to add subviews around the tableView. Here's how it's done:
In header:
#interface CustomTableViewController : UITableViewController
{
UITableView *tableView;
}
In .m:
- (UITableView*)tableView
{
return tableView;
}
- (void)setTableView:(UITableView *)newTableView
{
if ( newTableView != tableView )
{
[tableView release];
tableView = [newTableView retain];
}
}
- (void)loadView {
[super loadView];
//save current tableview, then replace view with a regular uiview
self.tableView = (UITableView*)self.view;
self.view = [[UIView alloc] initWithFrame:self.tableView.frame];
[self.view addSubview:self.tableView];
//code below adds some custom stuff above the table
UIView *customHeader = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 20)];
customHeader.backgroundColor = [UIColor redColor];
[self.view addSubview:customHeader];
[customHeader release];
self.tableView.frame = CGRectMake(0, customHeader.frame.size.height, self.view.frame.size.width, self.view.frame.size.height - customHeader.frame.size.height);
}
- (void)viewDidUnload
{
self.tableView = nil;
[super viewDidUnload];
}
Enjoy!
You will have to embed the UITableView in a UIView alongwith another view (which you are referring to as header section).
So, the UIView will have 2 subviews. The header view followed by the table view.
UIView(parent)
UIView (header)
UITableView (table)
Hope this helps.
I like the answer from noodl_es (upvoted), because it provides the functionality and behavior you want, yet you don't have to worry about resizing the UITableView: that is handled for you automatically. However, the solution is best suitable only if the header information pertains specifically to the first section of the table (or if the table has only one section). If the table has more than one section, then the header of the second section will push away the header of the first section when scrolled up, and therefore the header view will not appear to pertain to the whole table.
Found a solution at iphonedevsdk
Instead of doing this:
[tableViewController.view addSubview:viewSubclass];
do this
[tableViewController.navigationController.view addSubview:viewSubclass];
Suppose to have your UITableViewController
#interface MXMTableViewController : UITableViewController <UITableViewDelegate,UIScrollViewDelegate> {
/// your table view interface here
}
and a xib with you simple UITableView defined yet in it, you can do as Mihir says overriding the loadView method like this:
- (void)loadView {
[super loadView];
UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
self.view = mainView;
[mainView release];
// Add Header View
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 36)];
headerView.backgroundColor = [UIColor redColor];
[self.view addSubview:headerView];
// now, move your table view down. Check you nib to choose
// the right Y-axis offset
CGRect f = tableView.frame;
f.origin.y += headerView.frame.size.height/2;
tableView.frame = f;
// Add the table view to the container view
[self.view addSubview:self.tableView];
// Add footer
UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, self.tableView.frame.size.height, 320, 125)];
footerView.backgroundColor = [UIColor redColor];
[self.view addSubview:footerView];
[footerView release];
[headerView release];
}
...and that's it. You have a UITableView with fixed header and footer.
PS. You may now use your xib custom views as the header and footer's views.