Grouped UITableView - Replicate the Settings app table view - ios

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:
Expand the Utilities Menu (top right corner icon);
Select your table view (click on it);
Click on the attributes inspector (top right corner fourth icon);
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

Answer 2

For fast output, you can use some library like
https://github.com/escoz/QuickDialog
protip, in my experience, solutions like this leaves you more tangled when Changes come in.
Some times you only want to change one specific label on once specific view, thats not gona be easy in any ready-made solution.

Answer 3

Look into UITableView Sections. That is what separates the groups apart.