iPhone UITableView PlainStyle with custom background image - done "entirely" in code - iphone

I have been all over the place, seems the UITableView with a static background issue is well documented, but no one with a straight forward solution?
Im building my TableViews entirely in code, like this:
UIViewController *tableViewController = [[TableViewController alloc] init];
navigationController = [[UINavigationController alloc]
initWithRootViewController:tableViewController];
[tableViewController release];
[window addSubview:navigationController.view];
The window is my main UIWindow build for me in the app delegate. From here on I need to build a few different TableViews (controlled by the navigationController), some with fetchedResultsControllers, custom cells and so on. I prefer to do this completely in code, not using nib's as this would result in either having customization spread between code and IB or having to build and maintain 6+ different Nibs.
I simply can't find a working example where a tableViewController Class sets it's own background image. If I do this inside one of my TableViews (extending UITableViewController):
self.tableView.backgroundColor = backgroundColor;
I, of course, get the tableView's background colored (which incidentally colors the cell's as well, think the cell's inherits their color from the tableView?) but I wish to have a static background image that my cells slide up and down on top of. Not a "background image" that slides up and down with the users gestures.
Exactly what the GroupedStyle tableView offers, but in a PlainStyle tableView:) .. and done using code, not IB.
I guess I have to clear the background color of the table view, then set the Cells color when configuring them so they don't turn out transparent. And then somehow "sneak" a background image below the tableView view from inside the tableView instance?
How will I go about this, the best solution would to be able to do this in viewDidLoad or any other function inside my TableViewController, to keep all my customization in one place.
Hope someone can help me, Im all 'googled out' :) Thanks!

You need to set up your controller as a UIViewController, not a UITableViewController. Then add the tableview programmatically above a background imageView.
#interface SomeController : UIViewController <UITableViewDataSource, UITableViewDelegate> {
...
UITableView *tableView;
...
}
#property (nonatomic, retain) UITableView *tableView;
#end
#implementation SomeController
#synthesize tableView;
...
- (void)loadView {
[super loadView];
UIImageView *v = [[[UIImageView alloc] initWithFrame:self.view.bounds] autorelease];
[v setImage:[UIImage imageNamed:#"table_background.png"]];
[self.view addSubview:v];
self.tableView = [[[UITableView alloc] initWithFrame:self.view.bounds] autorelease];
[self.tableView setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:self.tableView];
}
...
#end

All of this jumping through hoops is unnecessary if you're targeting > iOS 3.2, where you can use the new backgroundView property to set a UIImageView directly, e.g.:
// In your UITableViewController subclass
- (void)viewDidLoad
{
[super viewDidLoad];
UIImageView *view = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background.png"]];
self.tableView.backgroundView = view;
}

Ok, now it is running:)
My tableView was not populated with my cells, so breakPointing through the thing I found out
that even though I had implemented the TableViewDataSource and TableViewDelegate, this was only in the main view, I needed to set the delegate and datasource of the tableview to = self.
For others seeking an answer to this here is the method as it ended up with Coneybeares help:
- (void)loadView {
[super loadView];
UIImageView *imageView = [[[UIImageView alloc] initWithFrame:self.view.bounds] autorelease];
[imageView setImage:[UIImage imageNamed:#"carbon_background.png"]];
[self.view addSubview:imageView];
[self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds] autorelease];
[self.tableView setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:self.tableView];
self.tableView.delegate = self;
self.tableView.dataSource = self;
}

Thanks Coneybeare.
It doesn't crash anymore and the background image turns up just perfect (along with my navigationController in the top)
However, still no visible tableView? just the background image and the navigationControllerBar:
This is my implementation:
- (void)loadView {
[super loadView];
UIImageView *imageView = [[[UIImageView alloc] initWithFrame:self.view.bounds] autorelease];
[imageView setImage:[UIImage imageNamed:#"carbon_background.png"]];
[self.view addSubview:imageView];
[self.tableView = [[UIView alloc] initWithFrame:self.view.bounds] autorelease];
[self.tableView setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:self.tableView];
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)theTableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)theTableView numberOfRowsInSection:(NSInteger)section {
return 3;
}
- (UITableViewCell *)tableView:(UITableView *)theTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [theTableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
}
cell.textLabel.text = #"Hello, World";
return cell;
}
//commit edit, didSelectRow, memory … etc.
The forum wasn't up for an entire .m file in one go.
Please tell me if I left something out that could help indicate an error.
I thought maybe it was the order of the layers and tried this without any luck:
[self.view sendSubviewToBack:imageView];
Hope I missed something obvious.
Thanks for your time:)

Some tips:
If using a UISplitViewController:
splitViewController.view.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
If using a UINavigationController:
navigationController.view.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
If using both a UISplitViewController and a UINavigationController:
navigationController.view.backgroundColor = [UIColor clearColor];
splitViewController.view.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
Be sure to set the background color of any UIView you want to see through that is on top of the UINavigationController or UISplitViewController to [UIColor clearColor].

Related

How to programmatically create UIView -> UIViewController -> UITableView

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.

Creating a UITableViewController programmatically

This is what I tried. Nothing appears on the screen and none of the UITableView methods that you are supposed to implement are getting called.
-(void)loadView
{
UIView *view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
self.view = view;
[view release];
}
- (void)viewDidLoad
{
[super viewDidLoad];
UITableViewController *TVC = [[[UITableViewController alloc]
initWithStyle:UITableViewStylePlain] autorelease];
CGRect cgRct = CGRectMake(0, 10, 320, 100);
UIView *newView = [[UIView alloc] initWithFrame:cgRct];
TVC.view = newView;
[newView release];
[self.view addSubview:TVC.view];
}
I've looked for good examples and tutorials on doing this programmatically but there are none.
What I am trying to achieve is a Table that doenst take up my who screen. Maybe 3/4 of my screen would be good.
Many Thanks
Code
The problem is that you're creating a UITableViewController, which is a UIViewController, and will expect to be on the nav stack. What you want to do is create a UITableView, which is a UIView. You are also not setting the table's delegate and data source, which you will need to do to get calbacks.
Your viewDidLoad should look something like this
- (void)viewDidLoad
{
[super viewDidLoad];
UITableView *table = [[[UITableView alloc] initWithStyle:UITableViewStylePlain] autorelease];
table.dataSource = self;
table.delegate = self;
table.frame = CGRectMake(0, 10, 320, 100);
[self.view addSubview:table];
}
(Note that if you're going to need access to the table outside of the callbacks, you should save it in an ivar rather than declaring it locally, and should retain it. Let me know if you need a few more lines of code to show you what I mean)
Make sure you set the delegate of TVC, with
TVC.delegate = self;
That's the reason why none of those methods are getting called. Also, make sure your class implements the UITableViewDelegate protocol by changing your interface declaration to
#interface YourViewController : UIViewController <UITableViewDelegate> {
//declare variables here
}
Also, equally important, don't set TVC.view, as this already happens when you initialize the view controller. You're just setting it to a blank view, which is why you're not seeing anything.
iOS7 seems to like this way of init'ing the tableview:
//make tableview
UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0, 81, 200, 200) style:UITableViewStylePlain];
table.dataSource = self;
table.delegate = self;
[self.dataView addSubview:table];
try that out. Hope it helps someone.
UIView *newView = [[UIView alloc] initWithFrame:cgRct];
TVC.view = newView;
I'll give you a hint. Here you are setting the view of the UITableViewController to an EMPTY VIEW...

Background image for MoreNavigationController

I'd like to place an image behind the tableView in my UITabBarController moreNavigationController. I have tried inserting a subview like so when first setting up the TabBar:
UIImageView* imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background3.png"]];
[self.tabBarController.moreNavigationController.topViewController.view insertSubview:imageView atIndex:0];
But this places the image over the top, presumably because the tableView isn't there at the time. Is there a better time when I can call this in order to have it work properly, or an easier approach?
With some assistance from this question, I figured out how to do this. Basically, the viewController in the moreNavigationController is a single TableView, so adding a background image won't work. What I need to do was to create a new view, add the background image, and then add the moreNavigationController view on top of that. I did this by overriding viewDidLoad in a subclass of UITabBarController, but I expect it could be done elsewhere as well.
- (void)viewDidLoad {
[super viewDidLoad];
UINavigationController *moreController = self.moreNavigationController;
if ([moreController.topViewController.view isKindOfClass:[UITableView class]]) {
UIView* newView = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,367)];
UIImageView* imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background3.png"]];
imageView.opaque = NO;
imageView.alpha = 0.4;
[newView addSubview:imageView];
moreController.topViewController.view.backgroundColor = [UIColor clearColor];
moreController.topViewController.view.frame = CGRectMake(0,0,320,367);
[newView addSubview:moreController.topViewController.view];
moreController.topViewController.view = newView;
}
}
You could probably be smarter with the frame sizes, etc, but this works for me. Hopefully it helps someone else too.
Now you can acess backgroundView property from UITableView subclasses .
UIViewController *moreViewController = tabBarController.moreNavigationController.topViewController;
img = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"BG_MORE+1.png"]];
//Got some crashs in initialization !! Need to check .
if ([moreViewController.view isKindOfClass:[UITableView class]]) {
UITableView *moreTableView = (UITableView*)moreViewController.view;
[moreTableView setBackgroundView:img];
}
Besides all the dotty mess here, you can use UIView's bringSubviewToFront: and sendSubviewToBack: to organize your subviews. Basically this should help, although if you have more subviews you will need to play around with it a little bit:
[self.tabBarController.moreNavigationController.topViewController.view addSubview:imageView];
[self.tabBarController.moreNavigationController.topViewController.view pushSubviewToBack:imageView];
//or [self.tabBarController.moreNavigationController.topViewController.view bringSubviewToFront:tableView];

UIViewController shows two UITableView

I have a weird problem.
I'm subclassing UIViewController and adding a tableView property in which I load a UITableView.
Now I'm adding this UITableView to the parent's subviews.
Works fine but I get TWO TableViews. One standard styled TableView and one the way I wanted it to be on top of the standard one. Both contain the correct data though.
#interface RootViewController : UIViewController <ABPersonViewControllerDelegate, UITableViewDelegate, UITableViewDataSource> {
UITableView *tableView;
ToolbarController *toolbar;
...
}
#property(nonatomic, retain) UITableView *tableView;
#property(nonatomic, retain) ToolbarController *toolbar;
...
#end
#implementation RootViewController
- (void)viewDidLoad {
[super viewDidLoad];
CGRect mainViewBounds = self.parentViewController.view.bounds;
CGFloat toolbarHeight = 44;
toolbar = [[ToolbarController alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(mainViewBounds), toolbarHeight) parentView:self];
tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, toolbarHeight, CGRectGetWidth(mainViewBounds), CGRectGetHeight(mainViewBounds) - toolbarHeight) style:UITableViewStylePlain];
tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
tableView.rowHeight = 60.0;
[tableView tableView].delegate = self;
[tableView tableView].dataSource = self;
tableView.backgroundColor = [UIColor clearColor];
[self.parentViewController.view addSubview:tableView];
[self.parentViewController.view addSubview:toolbar];
}
#end
------UPDATED------
I just wrongly pasted one part
[tableView tableView].delegate = self;
[tableView tableView].dataSource = self;
is actually in code
tableView.delegate = self;
tableView.dataSource = self;
-------UPDATE 2--------
If I don't create my own UITableView by
tableView = [[UITableView alloc] ...]
then there is one automatically set for me.
This would be fine for me... I don't need to init one, but I can't change the frame on the standard one.
tableView.frame = CGRectMake(0, toolbarHeight, CGRectGetWidth(mainViewBounds), CGRectGetHeight(mainViewBounds) - toolbarHeight);
Setting frame has no effect whatsoever...
i Had the same issue you probably be converting the UITableViewController to UIViewController and Your RootViewController might have the uitableview.
Make the Property of _tableview in your RootviewController with IBOutlet. And link it with the tableview in your XIB .
Don't alloc _tableview in RootviewController and Don't addsubview it .
Instead of this,
[tableView tableView].delegate = self;
[tableView tableView].dataSource = self;
Have you tried just using:
tableView.delegate = self;
tableView.dataSource = self;
I don't know why it would be that, but it's the only thing that's standing out. Also make sure you haven't got another UITableView set up in IB.
It might also have something to do with toolbarController.
I'm assuming it's a custom class, so make sure you're not creating a UITableView in that.
I ran into same issue...
Instead of adding tableview to the view controller directly ([self.parentViewController.view addSubview:tableView];), use following way..
UIView *totalView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
[totalView addSubview:tableView];
self.view=totalView;
Hope this fixes it (for #kris too!)

Why are tableview cells hardly visible when setting tableview background image?

I can't get the searchResultsTableView cells to be fully visible when loading with a background image. The cells look quite weak and don't stand out from the background imageview, even when selected. Any suggestions?
- (void)searchDisplayController:(UISearchDisplayController *)controller willShowSearchResultsTableView:(UITableView *)tableView {
for (UIView *view in controller.searchResultsTableView.subviews) {
//if ([view isKindOfClass:[UIImageView class]]) {
[view removeFromSuperview];
//}
}
UIImage *patternImage = [UIImage imageNamed:#"background_newer.png"];
UIImageView * backgroundImageView = [[UIImageView alloc] initWithImage:patternImage];
//backgroundImageView.opaque = NO;
backgroundImageView.alpha = 0.9;
controller.searchResultsTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
controller.searchResultsTableView.backgroundColor = [UIColor clearColor];
[controller.searchResultsTableView addSubview:backgroundImageView];
[controller.searchResultsTableView sendSubviewToBack:backgroundImageView];
controller.searchResultsTableView.rowHeight = 25;
[patternImage release];
[backgroundImageView release];
}
I am not doing anything else than allocating a new UITableViewCell for use (in searchResultsTableView) inside this delegate method:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { .... }
Thanks for any corrections!
(I am on iPhone simulator 3.1.2)
#Jessedc
Thanks for your advice. Haven't tried out your code yet.
I solved this headache (before I saw your reply) by setting hidden=YES on the main tableview behind the searchResultsTableView whenever the searchResultsTableView loads, and hidden=NO when the search is over. The main tableview is set with backgroundColor=[UIColor clearColor] on top of an imageview (loaded with the same image as in my original searchResultsTableView code up there).
This new layout is as previously desired :-).
Are trying to display a static background image with the table text scrolling over the top?
I think you may have your code a little mixed up (possibly).
Customising a table is usually done in a viewWillAppear method. so this code should go there:
UIImage *patternImage = [UIImage imageNamed:#"background_newer.png"];
UIImageView * backgroundImageView = [[UIImageView alloc] initWithImage:patternImage];
//backgroundImageView.opaque = NO;
backgroundImageView.alpha = 0.9;
controller.searchResultsTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
controller.searchResultsTableView.backgroundColor = [UIColor clearColor];
[controller.searchResultsTableView addSubview:backgroundImageView];
[controller.searchResultsTableView sendSubviewToBack:backgroundImageView];
controller.searchResultsTableView.rowHeight = 25;
[patternImage release];
[backgroundImageView release];
Next, in your delegate method searchDisplayController:willShowSearchResultsTableView you are not referring to the tableview object passed in, but you are calling it through the top level (unnecessary perhaps?)
Have a go at moving your table setup code into the viewWillAppear.
Let me know if this helps, or if you can provide more information/code.
It seems to me like you're setting the background of your tableview the hard way. I don't know if it's 100% the problem, but you should set your UITableView background like this:
controller.searchResultsTableView.backgroundColor = [[[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"background_newer.png"]]autorelease];