Information on UITableViews etc

Discussion in 'iOS Programming' started by webznz, Mar 27, 2011.

  1. webznz macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #1
    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.
     
  2. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #2
    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.
     
  3. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #3
    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.
     
  4. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
  5. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #5
    With regards to this picture http://img340.imageshack.us/i/img0768.png/, can anyone tell me how the 'first, last and company' tableViewCells are displayed within the rounded rectangle... if thats in-fact what it is...
     
  6. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #6
    I believe they are placeholders for UITextFields.
     
  7. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #7
    @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.
     
  8. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #8
    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
     
  9. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #9
    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.
     
  10. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #10
    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.
     
  11. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #11
    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.
     
  12. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #12
    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.
     
  13. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #13
    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...
     
  14. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #14
    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 :)
     
  15. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #15
    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 :)
     
  16. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #16
    Look at Apple's TableView Animations and Gestures sample code.
     
  17. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #17
    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 :)
     
  18. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #18
    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.
     
  19. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #19
    Sorry, but:
     
  20. webznz, Mar 30, 2011
    Last edited: Mar 30, 2011

    webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #20
    that makes no sense, I'm not just copying it... I'm trying to learn it.

    besides that it's an example from apple, its there to help people learn by using it.
     
  21. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #21
    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.

    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:
    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.
     
  22. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #22

    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.
     
  23. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #23
    Understood.

    So, any ideas what itemInputController is now?
     
  24. webznz, Mar 30, 2011
    Last edited: Mar 30, 2011

    webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #24
    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?
     
  25. webznz thread starter macrumors member

    Joined:
    Mar 8, 2011
    Location:
    Hobbitin
    #25
    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];
     

Share This Page