Creating a Customized UITableView

Question

I'm trying to create an UITableView as per in these images One tableview can have multiple sections and its titles. A Tableview can have number of sections and number of rows. But, in every section only one row can selectable. And, later i can display in my UIAlertView with selected row as message and section as title. How can i achieve this?

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"GroupCell"];

    if (cell == nil)
    {
        cell = [tableView dequeueReusableCellWithIdentifier:@"GroupCell"];
    }

    if (indexPath.row == self.selectedCell)
    {
        cell.accessoryType = UITableViewCellAccessoryCheckmark;
        cell.selected = YES;
    }
    else
    {
        cell.accessoryType = UITableViewCellAccessoryNone;
        cell.selected = NO;
    }

    cell.textLabel.text = @"mytext"
    cell.textLabel.textColor = [UIColor blackColor];

    return cell;
}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    self.selectedCell = indexPath.row;

    [tableView reloadData]; // here i have to make the condition..
}

Any idea on this? Or at-least to display an UITableView like below image too is enough..

enter image description here

have a look at this link https://github.com/gcamp/GCRetractableSectionController — Prince Kumar Sharma, Jul 25 '13 at 06:22
@Herçules I have already tried that one. No use. Even it doesn't display its tableview in my ViewController. — Praveenkumar, Jul 25 '13 at 06:26
u want to select only one row from each section OR only one row from whole tableView? — Prince Kumar Sharma, Jul 25 '13 at 08:37
means if u have three section then each section will contain one row selected ? — Prince Kumar Sharma, Jul 25 '13 at 09:13
@Herçules Yes. Otherwise, at the first instance. All rows are deselected too! — Praveenkumar, Jul 25 '13 at 09:16

score 2 · Accepted Answer · answered Jul 25 '13 at 09:41

For row to be selected from each section you have to keep an array of selectedCell And for time deselected all the cells you have to manage one more array that is isFirsttimeSelection And keep a boolArray for rowCollapse.

Interface or header file implementation..

NSArray *sectionArray;
NSMutableDictionary *dictionary;

NSMutableArray *boolArray;
NSMutableArray *selectedCell;
NSMutableArray *isFirsttimeSelection;

have a look at initialization of arrays and dictionary to be used.

dictionary=[[NSMutableDictionary alloc] initWithObjectsAndKeys:[NSArray arrayWithObjects:@"Cat",@"Dog",@"Lion",@"Tiger",@"Elephant",nil],@"Animals",[NSArray arrayWithObjects:@"Swallow",@"Parrot",@"Eagle",@"Owl",nil],@"Birds",[NSArray arrayWithObjects:@"Banana",@"Mango",@"Grapes", nil],@"Fruits",nil];

sectionArray=[[NSArray alloc] initWithArray:[dictionary allKeys]];

boolArray=[[NSMutableArray alloc] init];
selectedCell=[[NSMutableArray alloc] init];
isFirsttimeSelection=[[NSMutableArray alloc] init];

for (int i=0;i<sectionArray.count;i++) {
    [boolArray addObject:[NSNumber numberWithBool:NO]];
    [isFirsttimeSelection addObject:[NSNumber numberWithInt:NO]];
    [selectedCell addObject:[NSNumber numberWithInt:0]];
}

tableView datasources and delegates to be used as:---

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return [sectionArray count];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if ([boolArray[section] boolValue]) {
        return [[dictionary valueForKey:[sectionArray objectAtIndex:section]] count];
    }
    return 0;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier=@"cellIdentifier";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    if (cell==nil) {
        cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
    }

    cell.accessoryType=((indexPath.row == [selectedCell[indexPath.section] intValue]) && ([isFirsttimeSelection[indexPath.section] intValue]==1))?UITableViewCellAccessoryCheckmark:UITableViewCellAccessoryNone;

    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    cell.textLabel.text=[[dictionary valueForKey:[sectionArray objectAtIndex:indexPath.section]] objectAtIndex:indexPath.row];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 44;
}

Header view for section

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIButton *headerView=[UIButton buttonWithType:UIButtonTypeCustom];
    [headerView setTitle:[sectionArray objectAtIndex:section] forState:UIControlStateNormal];
    headerView.tag=section;
    headerView.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    [headerView setTitleEdgeInsets:UIEdgeInsetsMake(0, 10, 0, 0)];
    [headerView.titleLabel setFont:[UIFont boldSystemFontOfSize:16.0f]];
    [headerView setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];
    [headerView setTitleShadowColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [headerView.titleLabel setShadowOffset:CGSizeMake(0, -1)];

    [headerView addTarget:self action:@selector(sectionTouched:) forControlEvents:UIControlEventTouchUpInside];

    return  headerView;
}

Action on header view clicked

- (void)sectionTouched:(UIButton *)sender
{
    [boolArray replaceObjectAtIndex:sender.tag withObject:[NSNumber numberWithBool:([boolArray[sender.tag] boolValue])?NO:YES]];

    [_tblView reloadSections:[NSIndexSet indexSetWithIndex:sender.tag] withRowAnimation:([boolArray[sender.tag] boolValue])?UITableViewRowAnimationTop:UITableViewRowAnimationBottom];
}

And at last did select

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
     selectedCell[indexPath.section] = [NSString stringWithFormat:@"%i",indexPath.row];
    isFirsttimeSelection[indexPath.section]=[NSNumber numberWithBool:YES];
    [tableView reloadData];
}

Download it.

Great! Working fine! I've modified this with my new requirement :) — Praveenkumar, Jul 25 '13 at 10:29

score 1 · Answer 2 · answered Jul 25 '13 at 06:19

1

Keep an array of NSIndexpaths to handle which row is selected ,When user select check the section index is already in the array and remove if exist and selection can be managed in cellForRowAtIndexpath checking the array contains the index make the cell selected or not with accessoryType,and reload table when a new row selected and manage it properly

answered Jul 25 '13 at 06:19

Lithu T.V

19,955
12
56
101

Where should i have to keep my `NSIndexpaths` with [this](http://ge.tt/9oo6Inm/v/0?c) – Praveenkumar Jul 25 '13 at 06:42
How will you know which all are rows are selected? – Lithu T.V Jul 25 '13 at 06:51
Should i have to add it into my array at cellForRowAtIndexPath – Praveenkumar Jul 25 '13 at 06:58
nope didselectrow get invoked when the row is selected,There save teh indexpath to array ,and in cellforrow method check the indexpath returned there exist in array and then set the accessory type – Lithu T.V Jul 25 '13 at 06:59
[In this](http://stackoverflow.com/a/17854389/940096) how can i get selected indexPaths only? – Praveenkumar Jul 26 '13 at 11:34

score 1 · Answer 3 · answered Jul 25 '13 at 06:26

1

Where as i know your number of section is fixed. So when you are selecting a row check the number of rows lies within that section and use UITableViewCellAccessoryType to nil for that rows and accessoryType checkmark for selcted row. And end of the day you have to check which rows are selected in each section and use the data of that section to it off.

Hope this helps.

answered Jul 25 '13 at 06:26

iEinstein

2,100
1
21
32

Any sample snippet related to this? – Praveenkumar Jul 25 '13 at 06:27
No sample snippet only i have given you logic to perform because that enough for you as you are a good programmer shows from your reputation ;) – iEinstein Jul 25 '13 at 06:41
Actually, i was Android developer. I'm not good one in iOS.. Recently, shifted to this platform. And, learning since when i shifted :) [Here](http://ge.tt/9oo6Inm/v/0?c) what i have done? Give me some idea with that. – Praveenkumar Jul 25 '13 at 06:43
Okkkkkk then wait i am searching it – iEinstein Jul 25 '13 at 06:44
Please check it for number of rows in section http://stackoverflow.com/questions/10043521/adding-unknown-number-of-rows-to-static-cells-uitableview – iEinstein Jul 25 '13 at 06:48
I've done adding dynamic rows. You can check it out in my code. – Praveenkumar Jul 25 '13 at 06:51
No for which section have what number of rows and to determine which cell accessory will be what please use this i think it will also useful http://iphonedevsdk.com/forum/iphone-sdk-development/47047-how-to-determine-selected-row-in-sectioned-table-view.html – iEinstein Jul 25 '13 at 06:53

user2545330 · Answer 4 · 2013-07-25T07:23:49.347

Try something like this.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        UITableViewCell * selectedCell = [self.tableView cellForRowAtIndexPath:indexPath];
        if (indexPath.section == 1)
        {
            selectedCell.accessoryType = UITableViewCellAccessoryCheckmark;
            NSNumber * selectAnswer = [self.arrayWithObjects objectAtIndex:indexPath.row];
            if (![self.selectedAnswers containsObject:selectAnswer])
            {
                [self.arrSelObj addObject:selectAnswer];
            }
        }
    }

Where self.ArrayWithObjects - your array with elements that used in method numberOfRows. self.arrSelObj - array than contains your answer's.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
     if ([self.arrSelObj containsObject:[self.arrayWithObjects objectAtIndex:indexPath.row]])
            {
                cell.accessoryType = UITableViewCellAccessoryCheckmark;
            }
}

In didDeselect:

-(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell * deselectedCell = [tableView cellForRowAtIndexPath:indexPath];    
    if (indexPath.section == 1)
    {

        deselectedCell.accessoryType = UITableViewCellAccessoryNone;

        NSNumber * deselectAnswer = [self.arrayWithObjects objectAtIndex:indexPath.row];
        [self.arrSelObj removeObject:deselectAnswer];
    }
}

Create @property (nonatomic, strong) NSMutableArray * arrSelObj; In Init self.arrSelObj = [NSMutableArray array];. Then use my code. In NumberOfRows you use array.count. and it will be your self.ArrayWithObjects. In array you can put all data from model. — user2545330, Jul 25 '13 at 07:12

score 0 · Answer 5 · answered Jul 25 '13 at 06:22

0

You have to implement nested table OR if the it's list(price...) are fix then just use the logic :) like three button when tap on perticular button then set the table frame then remaining button. :)

answered Jul 25 '13 at 06:22

Mike

737
1
6
14

No, values are will be dynamic. – Praveenkumar Jul 25 '13 at 06:25
if you want to display like new updated images then take a group table it's too easy :) – Mike Jul 25 '13 at 06:32

Creating a Customized UITableView

5 Answers5

Linked