Question

I want to create a view like this in my iPhone App:

I do not know exactly what is this control in iOS, that maybe I can set an icon and text in the left side and that small sign in the right side.

I have implemented a TableView, there I was able to set these stuff, like this:

    [[cell textLabel] setText:customer.name];
    [[cell textLabel] setTextColor:[UIColor blackColor]];
    [[cell imageView] setImage:[UIImage imageNamed:@"icon.png"]];
    //[[cell detailTextLabel] setText:@"Awsome weather idag"];
    cell.accessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];  

But how can I make it works like that view in the picture?

Answer 1

It is pretty simple, follow the steps below and in case of doubts check out the UITableView documentation:

1. Create a grouped table view:

Programmatically:

CGRect tableFrame = CGRectMake(0, 0, 200, 200);

UITableView *tableView = [[UITableView alloc] initWithFrame:tableFrame style:UITableViewGroupedStyle];
tableView.delegate = self;
tableView.dataSource = self;

[self.view addSubview:tableView];

Allocating a UITableViewController subclass (common case):

MyTableViewController *controller [[MyTableViewController alloc] initWithStyle: UITableViewGroupedStyle];

[self.navigationController pushViewController:controller animated:NO];

Through Interface Build:

1. Expand the Utilities Menu (top right corner icon);
2. Select your table view (click on it);
3. Click on the attributes inspector (top right corner fourth icon);
4. Under Table View, click on the style dropdown and select grouped.

2. Implement the UITableViewDataSource protocol:

Basically add this three functions to your controller.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

    // Return the number of sections.

    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    // Return the number of rows in a given section.

    return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    // Configure the cells.

    return cell;
}

3. Configuring the cells:

The default style of a UITableViewCell has an image view (UIImageView), a title label (UILabel) and an accessory view (UIView). All you need to replicate the table view in the image you provided.

So, you’re looking for something like this in tableView:cellForRowAtIndexPath::

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString * const cellIdentifierDefault = @"default";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifierAccount];

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

    if (indexPath.section == 0) {

        cell.imageView.image = [UIImage imageName:@"bluetooth_icon"];
        cell.textLabel.text = @"Bluetooth";

        // Additional setup explained later.

    }else{

        if (indexPath.row == 0) {

            cell.imageView.image = [UIImage imageName:@"general_icon"];
            cell.textLabel.text = @"General";
            cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

        }else{

            cell.imageView.image = [UIImage imageName:@"privacy_icon"];
            cell.textLabel.text = @"Privacy";
            cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

        }

    }

    return cell;
}

The property accessoryType defines what is going to appear on the right side of a cell, a list of accessory types can be found here.

In the first cell (bluetooth), you’ll need to create a custom accessory view and assign it to the cell’s accessoryView property. A very naive example of how to achieve this is given below:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString * const cellIdentifierDefault = @"default";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifierAccount];

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifierAccount];

        label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];
        label.textAlignment = NSTextAlignmentRight;

        cell.accessoryView = label;

    }else{

        label = (UILabel *) cell.accessoryView;

    }

    cell.imageView.image = [UIImage imageName:@"bluetooth_icon"];
    cell.textLabel.text = @"Bluetooth";
    label.text = @"Off";

    return cell;
}

Hope this helps, Mateus