How do you show line dividers for grouped table sections? - cocoa-touch

Question

I would like to imitate the grouped table of the standard Contacts app (left). Each section has gray line dividers above and below. In my grouped table (right), there is no line above each section. And even stranger, the middle section has no lines at all.
#import "GroupViewController.h"
#import "UserCollectionViewCell.h"
#import "UIView+position.h"
#import "UIColor+style.h"
#import "UserPublicViewController.h"
#import "RecipientsGroupsModel.h"
static NSString* AVATAR_CELL_ID = #"groupUserCollectionUserView";
static const CGFloat AVATAR_ITEM_SPACING = 16.0;
static const CGFloat AVATAR_LINE_SPACING = 9.0;
static const CGFloat AVATAR_MARGIN = 15.5;
static const CGFloat AVATAR_CELL_WIDTH = 45.0;
static const CGFloat AVATAR_CELL_HEIGHT = 58.0;
typedef enum {
GroupViewControllerTableSectionTitle,
GroupViewControllerTableSectionUsers,
GroupViewControllerTableSectionDelete
} GroupViewControllerTableSection;
#interface GroupViewController ()
#property(nonatomic, strong) Group* group;
#property(nonatomic, strong) UICollectionView* avatarCollectionView;
#property(nonatomic, readonly) CGFloat usersHeight;
- (void)didLongTapAvatars:(UILongPressGestureRecognizer*)gesture;
#end
#implementation GroupViewController
#pragma mark UIViewController
- (NSString*)title
{
return #"Group";
}
- (void)loadView
{
[super loadView];
self.view.backgroundColor = [UIColor backgroundColor];
}
- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationItem.rightBarButtonItem = self.editButtonItem;
}
- (void)setEditing:(BOOL)editing animated:(BOOL)animated
{
[super setEditing:editing animated:animated];
[self.tableView reloadData];
[self.avatarCollectionView reloadData];
}
#pragma mark GroupViewController ()
- (void)didLongTapAvatars:(UILongPressGestureRecognizer *)gesture
{
if (gesture.state == UIGestureRecognizerStateBegan) {
[self setEditing:!self.isEditing animated:YES];
}
}
- (CGFloat)usersHeight
{
return ceilf(
self.group.users.count
/ floorf(
(
self.view.width
- 2 * AVATAR_MARGIN
+ AVATAR_ITEM_SPACING
)
/ (
AVATAR_ITEM_SPACING
+ AVATAR_CELL_WIDTH
)
)
)
* (AVATAR_CELL_HEIGHT + AVATAR_LINE_SPACING)
+ AVATAR_LINE_SPACING;
}
#pragma mark GroupViewController
- (instancetype)initWithGroup:(Group *)group
{
if (self = [super init]) {
self.group = group;
}
return self;
}
#pragma mark UITableViewDelegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
switch (indexPath.section) {
case GroupViewControllerTableSectionTitle:
case GroupViewControllerTableSectionDelete:
return 44.0f;
break;
case GroupViewControllerTableSectionUsers:
return self.usersHeight;
break;
default:
return 0.0f;
}
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 22.0f;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
switch (section) {
case GroupViewControllerTableSectionDelete:
return 22.0f;
break;
default:
return 0.0f;
}
}
- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
// iOS 7 applies a transclucent view if you don't return your own view
return [[UIView alloc] init];
}
- (UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
return [[UIView alloc] init];
}
#pragma mark UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
if (self.isEditing) {
return GroupViewControllerTableSectionDelete + 1;
} else {
return GroupViewControllerTableSectionUsers + 1;
}
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString* identifier = [NSNumber numberWithInteger:indexPath.section].stringValue;
UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
switch (indexPath.section) {
case GroupViewControllerTableSectionTitle:
cell.textLabel.text = self.group.title;
break;
case GroupViewControllerTableSectionUsers: {
if (self.avatarCollectionView == nil) {
UICollectionViewFlowLayout* layout = [[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
layout.sectionInset = UIEdgeInsetsMake(
AVATAR_LINE_SPACING,
AVATAR_MARGIN,
AVATAR_LINE_SPACING,
AVATAR_MARGIN
);
layout.itemSize = CGSizeMake(AVATAR_CELL_WIDTH, AVATAR_CELL_HEIGHT);
layout.minimumInteritemSpacing = AVATAR_ITEM_SPACING;
layout.minimumLineSpacing = AVATAR_LINE_SPACING;
self.avatarCollectionView = [[UICollectionView alloc]
initWithFrame:CGRectMake(
0.0,
0.0,
self.view.width,
self.usersHeight
)
collectionViewLayout:layout
];
self.avatarCollectionView.backgroundColor = [UIColor clearColor];
self.avatarCollectionView.dataSource = self;
self.avatarCollectionView.delegate = self;
[self.avatarCollectionView registerClass:[UserCollectionViewCell class] forCellWithReuseIdentifier:AVATAR_CELL_ID];
[self.avatarCollectionView addGestureRecognizer:[[UILongPressGestureRecognizer alloc] initWithTarget:self action:#selector(didLongTapAvatars:)]];
}
[cell.contentView addSubview:self.avatarCollectionView];
break;
}
case GroupViewControllerTableSectionDelete:
cell.textLabel.text = #"Delete Group";
cell.textLabel.textColor = [UIColor redColor];
break;
}
}
return cell;
}
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
return NO;
}
#pragma mark UICollectionViewDataSource
- (UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UserCollectionViewCell* cell;
cell = [self.avatarCollectionView dequeueReusableCellWithReuseIdentifier:AVATAR_CELL_ID forIndexPath:indexPath];
cell.user = [self.group.users objectAtIndex:indexPath.row];
cell.isEditing = self.isEditing;
return cell;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.group.users.count;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
#pragma mark UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
User* user = [self.group.users objectAtIndex:indexPath.row];
if (self.isEditing) {
if (self.group.users.count <= 1) {
[RecipientsGroupsModel removeGroup:self.group];
[self.navigationController popViewControllerAnimated:YES];
} else {
[self.group.users removeObject:user];
[RecipientsGroupsModel updateGroup:self.group];
[self.avatarCollectionView deleteItemsAtIndexPaths:#[indexPath]];
}
} else {
[self.navigationController pushViewController:[[UserPublicViewController alloc] initWithUser:user] animated:YES];
}
}
#end

Answer 1

You can use the UITableViewDelegate methods:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;
where you can specify any height you want for header and footer of any section. Return 0 in case you do not need a header or footer.
Then use the other two methods:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;
Inside each of them, you can write the custom code to make them look as you want:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
view.backgroundColor = [UIColor grayColor];
// ...
// Other customizations, like adding the gray line, etc.
// ...
return view;