I want to add a table header (not section headers) like in the contacts app for example:
exactly like that - a label beside an image above of the table.
I want the all view be scrollable so I can't place those outside of the table.
How can I do that?
UITableView has a tableHeaderView property. Set that to whatever view you want up there.
Use a new UIView as a container, add a text label and an image view to that new UIView, then set tableHeaderView to the new view.
For example, in a UITableViewController:
-(void)viewDidLoad
{
// ...
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
[headerView addSubview:imageView];
UILabel *labelView = [[UILabel alloc] initWithFrame:CGRectMake(XXX, YYY, XXX, YYY)];
[headerView addSubview:labelView];
self.tableView.tableHeaderView = headerView;
[imageView release];
[labelView release];
[headerView release];
// ...
}
You can do it pretty easy in Interface Builder. Just create a view with a table and drop another view onto the table. This will become the table header view. Add your labels and image to that view. See the pic below for the view hierarchy.
In Swift:
override func viewDidLoad() {
super.viewDidLoad()
// We set the table view header.
let cellTableViewHeader = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewHeaderCustomCellIdentifier) as! UITableViewCell
cellTableViewHeader.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewHeaderCustomCellIdentifier]!)
self.tableView.tableHeaderView = cellTableViewHeader
// We set the table view footer, just know that it will also remove extra cells from tableview.
let cellTableViewFooter = tableView.dequeueReusableCellWithIdentifier(TableViewController.tableViewFooterCustomCellIdentifier) as! UITableViewCell
cellTableViewFooter.frame = CGRectMake(0, 0, self.tableView.bounds.width, self.heightCache[TableViewController.tableViewFooterCustomCellIdentifier]!)
self.tableView.tableFooterView = cellTableViewFooter
}
You can also simply create ONLY a UIView in Interface builder and drag & drop the ImageView and UILabel (to make it look like your desired header) and then use that.
Once your UIView looks like the way you want it too, you can programmatically initialize it from the XIB and add to your UITableView. In other words, you dont have to design the ENTIRE table in IB. Just the headerView (this way the header view can be reused in other tables as well)
For example I have a custom UIView for one of my table headers. The view is managed by a xib file called "CustomHeaderView" and it is loaded into the table header using the following code in my UITableViewController subclass:
-(UIView *) customHeaderView {
if (!customHeaderView) {
[[NSBundle mainBundle] loadNibNamed:#"CustomHeaderView" owner:self options:nil];
}
return customHeaderView;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Set the CustomerHeaderView as the tables header view
self.tableView.tableHeaderView = self.customHeaderView;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,tableView.frame.size.width,30)];
headerView.backgroundColor=[[UIColor redColor]colorWithAlphaComponent:0.5f];
headerView.layer.borderColor=[UIColor blackColor].CGColor;
headerView.layer.borderWidth=1.0f;
UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 5,100,20)];
headerLabel.textAlignment = NSTextAlignmentRight;
headerLabel.text = #"LeadCode ";
//headerLabel.textColor=[UIColor whiteColor];
headerLabel.backgroundColor = [UIColor clearColor];
[headerView addSubview:headerLabel];
UILabel *headerLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, headerView.frame.size.width-120.0, headerView.frame.size.height)];
headerLabel1.textAlignment = NSTextAlignmentRight;
headerLabel1.text = #"LeadName";
headerLabel.textColor=[UIColor whiteColor];
headerLabel1.backgroundColor = [UIColor clearColor];
[headerView addSubview:headerLabel1];
return headerView;
}
Related
How to add a button on top off viewForHeaderInSection. I like to add a button above section header which can be scrollable with tableview. Any idea how to do this ?
The - rather hackish - solution I saw in a pull-to-refresh implementation is to simply add your 'extra' view to the table view as a subview - just make sure it's positionned using a negative y offset. That offset should be equal to (well, rather -1 times) the height of your view. Code:
UIView *myViewAboveHeader = // however you create it
CGRect f = myViewAboveHeader.frame;
f.origin.y = -1 * f.size.height;
myViewAboveHeader.frame = f;
[tableView addSubview:myViewAboveHeader];
Edit: it seems you don't want a header view AND a view above it. In this case, just simply add a button on top of the view you return in your table view delegate method:
- (UIView *)tableView:(UITableView *)tv viewForHeaderInSection:(NSInteger)s
{
UIView *header = ...;
UIButton *btn = // create a button somehow;
[header addSubview:btn];
return header;
}
Use this code, placing it in viewdidload:
- (void)viewDidLoad {
UIView *headerViews = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 90)];
UIButton *managePrivacyButton = [UIButton buttonWithType:UIButtonTypeCustom];
[managePrivacyButton setFrame:CGRectMake(0, 45, 320, 45)];
managePrivacyButton.titleLabel.textAlignment = UITextAlignmentLeft;
[managePrivacyButton.titleLabel setFont:[UIFont boldSystemFontOfSize:12]];
[managePrivacyButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[headerViews addSubview:managePrivacyButton];
[self.tableView setTableHeaderView:headerViews];
[super viewDidLoad];
}
This method in particular takes as a return an UIView. UIButton is a subclass of UIView. Just create a new UIButton and return it.
I have the following code which draws a separator line and text for a UITableViewCell. It looks fine but when I scroll off screen then back, the separator line is gone but the text is still fine. Any ideas?
static NSString *aProgressIdentifier = #"CustomerCell";
UITableViewCell *aCustomerCell = [iTableView dequeueReusableCellWithIdentifier:aProgressIdentifier];
if (!aCustomerCell) {
aCustomerCell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:aProgressIdentifier] autorelease];
aCustomerCell.contentView.backgroundColor = [UIColor whiteColor];
UIImageView *aLine = [[UIImageView alloc] initWithFrame:CGRectMake(0, 72, 800, 1)];
aLine.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.0];
[aCustomerCell addSubview:aLine];
[aLine release];
}
CMACustomer *aCustomerObject = aCellObject;
aCustomerCell.textLabel.text = aCustomerObject.customerFullName;
aCustomerCell.detailTextLabel.text = nil;
aCell = aCustomerCell;
Try to add the "aLine" image view as subview of the contentView and not the whole table itself. Probably when the cell is reused and then layoutSubviews is called again, the contentView overlaps (white background) your aLine. Infact consider that iOS default cells have their subviews dynamically redrawn and resized each time they are displayed on screen.
So I would try this:
[aCustomerCell.contentView addSubview:aLine];
If this doesn't work, what can you do is to remove the contentView completely and add your own custom subviews (do this inside the if(!aCustomerCell) and not outside unless you will not get the benefits of the cell re-use):
if (!aCustomerCell) {
aCustomerCell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:aProgressIdentifier] autorelease];
[cell.subviews makeObjectsPerformSelector:#selector(removeFromSuperview)];
UIImageView *aLine = [[UIImageView alloc] initWithFrame:CGRectMake(0, 72, 800, 1)];
aLine.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.0];
[aCustomerCell.contentView addSubview:aLine];
[aLine release];
}
Finally another check is verify that the cell height is > 72 (it seems a trivial check but its often source of headaches!).
The table view is using a pool of cells, so you can't be sure which one you're getting for any given index path. You can use the cell or the content view, but be sure to add only one of your custom lines per cell.
UIImageView *aLine = (UIImageView *)[cell viewWithTag:64];
if (!aLine) {
// etc.
UIImageView *aLine = [[UIImageView alloc] initWithFrame:CGRectMake(0, 72, 800, 1)];
aLine.tag = 64;
[cell addSubview:aLine];
//
}
// other formatting logic here, you can also hide/show aLine based on biz logic
try adding it to the contentView
[aCustomerCell.contentView addSubview:aLine]
I've been struggling to add a UIView above my UITableViewController. Through searches, reading and experimenting I've determined that instead of a UITableViewController I should just be using a UIViewController. I'm having a hard time making this work for a variety of reasons and I'd like to just start fresh with a better architecture.
Basically I'm looking for sample code / tutorials that could help me create the following completely programmatically (no NIBS):
- Navigation-based Layout
- UIViewController
-- UIView
--- UITableView
--- Etc.
The reason why I want a UIView above my UITableView is I want to be able to add UIViews above my table.
-UPDATE-
Adding code to make this more clear:
JMoviesListViewController.m - UITableViewController subclass
- (void)loadView
{
NSLog(#"loadView called");
UIView *baseView = [[[UIView alloc] init] autorelease];
TISwipeableTableView * aTableView = [[[TISwipeableTableView alloc] init] autorelease];
[aTableView setDelegate:self];
[aTableView setDataSource:self];
[aTableView setSwipeDelegate:self];
[aTableView setRowHeight:54];
[baseView addSubview:aTableView];
self.view = baseView;
[super loadView];
}
- (void)viewDidLoad {
listOfMovies = [[NSMutableArray alloc] init];
UIView *myProgView = (UIView *)self.progView; // progView is a method that returns a UIView
[self.view insertSubview:myProgView aboveSubview:self.tableView];
[self.navigationItem setTitle:#"Now Playing"];
movies = [[Movies alloc] init];
movies.delegate = self;
[movies getMovies:[NSURL URLWithString:apiQuery]];
[super viewDidLoad];
}
- (UIView *)progView {
if (progView == nil)
{
// create a progress view
//x,y,w,h
progView = [[UIView alloc] initWithFrame:CGRectMake(110, 110, 95, 30)];
progView.backgroundColor = [UIColor grayColor];
progView.tag = 1; // tag this view for later so we can remove it from recycled table cells
progView.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin);
progView.layer.cornerRadius = 5;
UILabel *activityLabel = [[UILabel alloc] init];
activityLabel.text = NSLocalizedString(#"Loading...", #"string1");
activityLabel.backgroundColor = [UIColor grayColor];
activityLabel.textColor = [UIColor whiteColor];
activityLabel.font = [UIFont systemFontOfSize:14];
[progView addSubview:activityLabel];
activityLabel.frame = CGRectMake(5, 2, 70, 25);
UIActivityIndicatorView *activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
[activityIndicator startAnimating];
[progView addSubview:activityIndicator];
activityIndicator.frame = CGRectMake(70, 5, 20, 20);
}
return progView;
}
To be clear, the code works fine, the problem is that the cell lines of the table are "bleeding through" the UIView spinner that is inserted with this line:
[self.view insertSubview:myProgView aboveSubview:self.tableView];
leading me to believe that myProgView is not aboveSubview:self.tableView.
Views and controllers are separate things. You can have a hierarchy of view controllers and a hierarchy of views. But they're not interleaved, as the title of posts suggests (I know, Interface Builder displays them as a single hierarchy, but views and controllers are more like two parallel hierarchies).
Anyway, you can easily have a view controller set up whatever views you want in code. Override the loadView method, create a view that you assign to self.view, then add subviews to that view.
For example:
- (void)loadView
{
UIView *view = [[[UIView alloc] init] autorelease];
UITableView *tableView = [[[UITableView alloc] init] autorelease];
tableView.dataSource = self;
tableView.delegate = self;
[view addSubview:tableView];
self.view = view;
}
Your view controller should either inherit UITableViewController or implement the UITableViewDataSource and UITableViewDelegate protocols.
You have to actually specify the layout of your different views, not just add them as subviews. Try reading a tutorial about using AutoLayout programmatically.
You also want to set up all your views in loadView. There you can set the bottom of your extra view to the top of your table view.
- (void)viewDidLoad {
[super viewDidLoad];
UIView *view = [[[UIView alloc] initwithFrame:CGRectMake(set your frame)] autorelease];
UITableView *tableView = [[[UITableView alloc] initwithFrame:CGRectMake(set your frame)] autorelease];
tableView.dataSource = self;
tableView.delegate = self;
[view addSubview:tableView];
}
if you are using **ARC** remove autorelease.
i struggled almost 1 hour but i couldn't figure it out as how to display UIactivity indicator in UItableview as i cant use IB in UItableview(its not dragging) on iphone
i used this and its working
but i want to display in viewDidload
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
//loadingView =[LoadingView loadingViewInView:[self.view.window.subviews objectAtIndex:0]];//.window.subviews
NSLog(#"dgdddddddddddddddddddd");
UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(130, 10, 25, 25)];
//UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 30.0, 320.0, 60.0)];
activityView.center=customView.center;
[activityView startAnimating];
[ customView bringSubviewToFront:activityView];
[customView addSubview:activityView];// [headerLabel release];
return [customView autorelease];
}
kindly suggest
if the view attribute of the file is linked to the UITableView , then the subview will not be added. Try replacing the view attribute with a normal view which contains a table view and try adding the indicator. Also try to make the file owner class from uitableviewcontroller to uiviewcontroller class.
I want to do something pretty simple with my UITableView: I want to add a UIActivityIndicatorView to a section's header view, and make it animate or disappear whenever I want.
I had no trouble adding the UIActivityIndicatorView to the header view using tableView:viewForHeaderInSection:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 60.0)];
// create the title
UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(15.0, 12.0, 310.0, 22.0)];
headerLabel.text = #"some random title here";
[customView addSubview:headerLabel];
[headerLabel release];
// Add a UIActivityIndicatorView in section 1
if(section == 1)
{
[activityIndicator startAnimating];
[customView addSubview:activityIndicator];
}
return [customView autorelease];
}
activityIndicator is a property of my controller's class.
I alloc it in the viewDidLoad method:
- (void)viewDidLoad
{
(...)
activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(200, 10, 25, 25)];
}
This way I can send messages to it (like -startAnimating or -stopAnimating) whenever I want.
The problem is that the activityIndicator disappears as soon as I scroll the tableView (I guess it is because the tableView:viewForHeaderInSection: method is called a second time).
How else can I add an activityIndicatorView to the section's header view and still be able to send messages to it afterwards? (with the activityIndicator not disapearing when I scroll down of course)
Thank you very much!
If you try to use the same activity indicator in multiple places then it is probably getting moved from one place to the other. I believe you need a different one for every single section header. You might want to use a MutableArray to keep track of the header views you create so you can reuse them if you find one in the array that doesn't have a superview, sort of like dequeuing and reusing cells.
This is just a guess as I haven't done this, but I'm pretty sure the issue is trying to reuse the same view in multiple places.
The problem seemed to be caused by re-creating a customView and adding the activityIndicator as a subview every time tableView:viewForHeaderInSection: is called.
Not using subviews helped me fix it:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
// Add a UIActivityIndicatorView in section 1
if(section == 1)
{
[activityIndicator startAnimating];
return activityIndicator;
}
UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 60.0)];
// create the title
UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(15.0, 12.0, 310.0, 22.0)];
headerLabel.text = #"some random title here";
[customView addSubview:headerLabel];
[headerLabel release];
return [customView autorelease];
}
(it looks quite ugly though, the activityIndicator takes the whole width of the section. I'd better create a unique customView for section 1 and add the activityIndicator as a subView once and for all).