Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iOS Information on UITableViews etc

W

webznz

macrumors member
Original poster
Mar 8, 2011
82
0
Hobbitin
Hi there, I'm currently trying to make an application where you can do different searches off a server etc. I am wanting to make the interface of my searches look like the contact details when you add a new number then it automatically adds a new cell etc. check the image here http://img340.imageshack.us/i/img0768.png/ for what I'm talking about.

I was hoping you could point me to some good tutorials that I can read, also if you could tell me what the "title cell"? to the left of the UITableviewcell is called and how that is done/or tutorial of that as well.

I guess what I'm saying is if you have any good information or details on this sorta thing could you please let me know, In the mean time I will keep searching as best I can.
 
Okay, so what I have found out so far, is that these are made with tableViewCells that have things like lables and textfields inside the tableviewcell container in interface builder.

Still working on how to display one or many etc ill keep looking.
 
You should start with the TableView Programming Guide. There is quite a bit of Apple sample code for table views also.

I recommend that you work through that first.
 
@webznz, hard to say for sure how those three "rows" are implemented. The Add photo view extends taller than one "row." Either those three "rows" are a header for the table or for a section or they are all one row. In either case there's probably some custom drawing going on and custom management of that view to make it appear like rows.

OTOH, the author of the Contacts app probably has access to the source code for UITableView and it might be easier to just add the ability to have narrower rows like that to UITableView.

At any rate it should be possible to implement that section as one view with the subviews that you see.

It could be possible that you could implement willDisplayCell:forRowAtIndexPath: and make the row contentView narrower than the width of the table. Don't know.
 
Hrmmm, defiantly a sticky one. I will keep reading through apples Table View Programming Guide for any clues. If I find anything Ill make sure to post a resolution.

As it stands I think I am just going to make a custom TableViewCell much like 'mobile and home' cells that have a UILabel and UITextField then just group 4 or five together in a UITabelView. (I think thats about right from the research I have done thus far, I'm about 80% of the way to actually implementing them) As I'm trying to design a search field with several search options I don't want to allow the user to dynamically add new Cells like the adding phone numbers allows in add new contact, because that becomes quite cumbersome with the keyboard etc so better to display all at once.

Again thanks for the help. will keep you posted if I figure out the last question :p
 
An easier way to implement that would be to make those three rows just regular rows and put the image above them in a section by itself or in a header by itself. Obviously the background is clear behind the image view.

The in-cell text editing that's done in this table is not so easy either.
 
Okay, so heres what I have found and am trying to implement.. I am just doing something small wrong and am wondering if you guys might see what it is that I am messing up.

Over at http://developer.apple.com/library/...s.html#//apple_ref/doc/uid/TP40007451-CH7-SW1

I am working on the section called The Technique for Static Row Content which explains how to create a similar effect to what I have pointed out earlier here http://img340.imageshack.us/i/img0768.png/.

So far here is what I have done in my version.

Set up a window based application with xcode name it etc.
Inside myAppDelegate.h I have added a
Code: 
UINavigationController *navigationController;
//....
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

then inside myAppDelegate.m I have synthesized navigationController; and then added the coed to Override the normal view so its the navigation based.

Code: 
//.....
@synthesize window;
@synthesize navigationController;


#pragma mark -
#pragma mark Application lifecycle

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.
    [self.window addSubview:navigationController.view];
    [self.window makeKeyAndVisible];
    
    return YES;
}
//.....

From here I have added a new UIViewControllerSubclass called search with all files - .h/.m/.xib

I will post the code for these files below to try an minimize confusion
Search.h
Code: 
//
//  Search.h
//  instaCode1.0
//
//  Created by iMan on 29/03/11.
//  Copyright 2011 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>


@interface Search : UIViewController {
	
	UITableViewCell *cellCode;
	UITableViewCell *cellManufacture;
	UITableViewCell *cellModel;

}

@property (nonatomic, retain) IBOutlet UITableViewCell *cellCode;
@property (nonatomic, retain) IBOutlet UITableViewCell *cellManufacture;
@property (nonatomic, retain) IBOutlet UITableViewCell *cellModel;

@end

Search.m
Code: 
#import "Search.h"


@implementation Search

@synthesize cellCode;
@synthesize cellManufacture;
@synthesize cellModel;


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
	
    if (indexPath.section == 0) {
//Add two UITableViewCells to test UITables Grouping
        return cellCode;
	return cellManufacture;
    }
    // section 1
    if (indexPath.row == 0) {
        return cellModel;
    }

}
//......

So from here I have opened interface Builder mainwindo.xib added a navigationController hooked everything up so that the first page that loads is my search.xib then I have opened search.xib and added three TableViewCell objects and customized each one how I want, then I have linked them to the objects I defined in search.h I have then added a UITableView, but this is where I get lost because by UITableViewCells are not loading into the UItableView with the method (tableView:cellForRowAtIndexPath:) I have defined in search.m

Here is a screen capture of my Interface Builder Search.xib http://img121.imageshack.us/i/screenshot20110329at433.png/


If you need more detail or you think I have missed something out let me know... This one has had me stumped for the past hour... It seems so simple but its just that I must be missing something small and basic.
 
I would usually start with the navbased since it builds a tableview but whatever.

There are a series of callbacks from the tableView. Are any of them being called? There are three connections that you need to make with a table view in a nib, view, delegate, datasource. Did you make all of them?

The code you show will never return cellManufacture.
 
Okay so now that you pointed that out I realized I didn't delete my view from Interface builder and in turn did not connect my view up to the tableView and also missed the datasource and delegate.

Here are the changes I have made in response to your post, thanks for pointing that stuff out.

- deleted View and connected tableView up to the fileOwner view
- connected tableView up to delegate and datasource
- changed my tableView:cellForRowAtIndexPath: method to this -->

Code: 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
	
    if (indexPath.section == 0) {
        return cellCode;
    }
    // section 1
    if (indexPath.row == 0) {
        return cellModel;
    }
	return cellManufacture;
	
}

which I think fixes the problem of cellManufacture not that I can tell because after doing all of this the code exits as soon as it loads on the emulator.

What I am going to do now is use a navbase template just to rule out that its not me doing something wrong in my set up of my UINavigationController, and I'll let you know how I get on with it.
 
hrmm, getting the same result when I use navigation based template.
It must be in the code I am producing, I'm still fairly new to objective-C so it wouldn't be a surprise... I need to look into it more, just that I am working from an example on the apple programming guide, what could possibly go wrong...
 
WOAH! semi solution.... but not quite there. I'm still playing with it but thought I would post what I just stumbled across.

So in the navigation based template, some basic code is generated for your in your rootViewController.m

Code: 
//....
#pragma mark -
#pragma mark Table view data source

// Customize the number of sections in the table view.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}


// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 0;
}


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
    
	// Configure the cell.

    return cell;
}
//....

I was only changing tableView:cellForRowAtIndexPath: with the example from the apple guide. However I soon realised that I needed to change the other two methods, numberOfSectionsInTableView: and tableView:numberOfRowsInSection: completely stupid overview, but I caught it... so my new rootViewController.m looks like this...

Code: 
//....
#pragma mark -
#pragma mark Table view data source

// Customize the number of sections in the table view.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 2;
}


// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 2;
}


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    if (indexPath.section == 0) {
        return cellCode;
		
    }
    // section 1
    if (indexPath.row == 0) {
        return cellModel;
    }
    return cellManufacture;
	
}
//...

HOWEVER.. this code is still not quite correct as it produces this ( http://img21.imageshack.us/i/screenshot20110330at944.png/ ), look at the first section, because I have defined a return value of 2 in my tableView:numberOfRowsInSection: method it thinks that there are two TableViewCells in each section, but in this section thats not that case, so it does not round the edges of the TableViewCell.... obviously I'm going to have to rejig the code abit, Not sure how so if you have some suggestions that would be great, if not I'll continue working on it :)
 
Okay so I have moved on a little bit, Im working from one section with multiple rows which is what I was wanting to do in the beginning, however! Im wanting to make this a little more dynamic, say for instance if i select one of my UITableViewCells to input text into it I would also like a new UITableViewCell to appear at the bottom of the section with a + sign on it to add a new custom row to the search. Do you guys have any ideas or tutorials you can let me know of to do this sort of thing? if you do could you let me know :)

Also what do you think of this code? is there a better way to group several UITableViewCells into one section?

This is my code.
Code: 
// Customize the number of sections in the table view.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}


// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
	return 4;
}


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
	
    if (indexPath.section == 0) {
		if (indexPath.row == 0) {
			return cellCode;			
		}
		if (indexPath.row == 1) {
			return cellManufacture;
		}
        if (indexPath.row == 2) {
			return cellModel;
		}
    }
	return cellYear;

	
}

Any help, tips or comments are greatly appreciated :)
 
Cool thanks, Just reading up on all that now.. Will keep my progress posted.. hopefully a solution to a few of the things I'm hoping to do also :)
 
Okay so I am looking through Table View Programming guide and am wanting to implement the section An Example of Adding a Table-View Row.

I have done the first step of adding a button to the navigation controller under the viewDidLoad method in my rootViewController.m file
Code: 
- (void)viewDidLoad {
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    self.navigationItem.rightBarButtonItem = self.editButtonItem;
	//this is the addButton on the left of the navigation bar
	UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(addItem:)];
    self.navigationItem.leftBarButtonItem = addButton;
	
}

From here I am then go on to declare the addItem:sender method that I will connect to my new addButton in interface builder.
Code: 
- (void)addItem:sender {
    if (itemInputController == nil) {
        itemInputController = [[ItemInputController alloc] init];
    }
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:itemInputController];
    [[self navigationController] presentModalViewController:navigationController animated:YES];
    [navigationController release];
}

The only think that is stopping me at the moment is that i am getting an error on itemInputController, as being undeclared...

A, because I haven't declared it and
B, because I don't know what it is... so am not sure what or how to declear it. From my readings here http://developer.apple.com/library/...ageInsertDeleteRow/ManageInsertDeleteRow.html where the examples are it doesn't really tell me what it is either...

If you know what it is could you let me know what I should do :) any help would be appreciated.
 
webznz said:
The only think that is stopping me at the moment is that i am getting an error on itemInputController, as being undeclared...

A, because I haven't declared it and
B, because I don't know what it is... so am not sure what or how to declear it. From my readings here http://developer.apple.com/library/...ageInsertDeleteRow/ManageInsertDeleteRow.html where the examples are it doesn't really tell me what it is either...
Click to expand...

Sorry, but:
robbieduncan said:
And this is the problem with copying stuff. Don't copy anything that you don't understand. And that means every character, line and statement.
Click to expand...
 
webznz said:
that makes no sense, I'm not just copying it... I'm trying to learn it.
Click to expand...
Granted. But if you don't understand what you're copying, that's a problem. If you're pasting code that you don't know what purpose it serves, that's a signal to step back and try to decipher it first.

webznz said:
besides that it's an example from apple, its there to help people learn by using it.
Click to expand...
Using it, as an example. So, it is not the only solution. It is just a demonstration of a concept. So, once you understand the example code, you can then adapt it to your own situation.

As for an explanation as to what it (i.e. itemInputController) does, just below that code, you'll find this:
The modal, or overlay, view consists of a single custom text field. The user enters text for the new table-view item and then taps a Save button. This button sends a save: action message to its target: the view controller for the modal view.
Click to expand...

I'm sorry if I sound too harsh, but I just want you to be aware of the pitfalls in your approach and try to provide some (IMHO) sound advice.
 
dejo said:
I'm sorry if I sound too harsh, but I just want you to be aware of the pitfalls in your approach and try to provide some (IMHO) sound advice.
Click to expand...


Its all good, I know what you were trying to tell me.. I just wanted to let you know that I'm actually making a decent effort at learning this stuff.
 
I'm kinda thinking a UIViewController subclass.. but thats only because of the line of code that follows

Code: 
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:itemInputController];

this is implementing my itemInputController as a view inside my UINavigationController... well thats how I understand it now that I focus on the whole function.. :p
So I'm pretty sure thats correct the next thing I would probably ask, is when setting up the .nib file do I just delete the view and add like a UITableViewCell???...
hrmm okay so I'm just not sure about actually creating this part. Am I making sense?
 
Last edited:
So I was typing up this big msg then realized something.

So I made my new UIViewController subclass named it itemInputController... which is a mistake, it should have been ItemInputController. but that doesn't matter as I just had to re-jigg the code a tiny bit.

So I made my new files #import/ed the header into the .m file my addItem: method is in. Then I don't quite know the correct words for this, but I then decleared my subclass in that method with a pointer to an instance of my subclass.... hopefully that made some sense. so basically I think Im like 90% of the way there.

this is the code from apple
Code: 
- (void)addItem:sender {
    if (itemInputController == nil) {
        itemInputController = [[ItemInputController alloc] init];
    }
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:itemInputController];
    [[self navigationController] presentModalViewController:navigationController animated:YES];
    [navigationController release];
}

and this is how I have implemented it in my file, note I have changed item to Item because i named by subclass stuff with a small i.

Code: 
- (void)addItem:sender {
    if (ItemInputController == nil) {
        itemInputController *ItemInputController = [[itemInputController alloc] init];
    }
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:ItemInputController];
    [[self navigationController] presentModalViewController:navigationController animated:YES];
    [navigationController release];
}

So I think thats pretty close, I think Im on the right track but I have 1 error and 1 warning still. on this line I have an error "ItemInputController undecleared" could you please help me understand how i am meant to declare it.
Code: 
 if (ItemInputController == nil) {

and then I have a warning on this line of code saying "unused variable ItemInputController"
Code: 
itemInputController *ItemInputController = [[itemInputController alloc] init];
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back