MEVHorizontalContacts

An iOS UICollectionViewLayout subclass to show a list of contacts with configurable expandable items.

Features

• Customizable contacts cells
• Customizable contact items cells
• Different sizes and responsive design
• Multiple delegate methods

Demo App

Run the demo app and play with it!
Demo App

Demo Project

To run the example project, clone the repo, and run pod install from the Example directory first.

Getting Started

Requirements

Requires iOS SDK version > 7.0

Requires ARC

Installation with CocoaPods

CocoaPods is a 3rd-party dependency manager for Swift and Objective-C projects. For more information, refer to the CocoaPods Getting Started Guide. Otherwise, you can install CocoaPods with the following command:

$ gem install cocoapods

Podfile

To integrate MEVHorizontalContacts into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
pod 'MEVHorizontalContacts'

Then, run the following command:

$ pod install

Installation Manually

To integrate MEVHorizontalContacts into your Xcode project manually, just include the filest from /Pod/Classes/ folder in your App’s Xcode project.

Then, import the following file your classes:

#import "MEVHorizontalContacts.h"

Quick Guide

Usage

1. Import class

#import "MEVHorizontalContacts.h"

2. Add Datasource and Delegate protocols.

@interface ViewController () <MEVHorizontalContactsDataSource, MEVHorizontalContactsDelegate>
@property (nonatomic, strong) MEVHorizontalContacts *horizontalContacts;
@end

3. Create, initialize and add MEVHorizontalContacts view.

_horizontalContacts = [MEVHorizontalContacts new];
_horizontalContacts.backgroundColor = [UIColor whiteColor];
_horizontalContacts.dataSource = self;
_horizontalContacts.delegate = self;
[self addSubview:_horizontalContacts];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:, [horizontalContacts], " options:NSLayoutFormatAlignAllCenterX metrics:nil views:@{@"horizontalContacts" : _horizontalContacts}]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:, [horizontalContacts], " options:NSLayoutFormatAlignAllCenterY metrics:nil views:@{@"horizontalContacts" : _horizontalContacts}]];

4. Implement Datasource Methods

#pragma mark - MEVHorizontalContactsDataSource Methods

- (NSInteger)numberOfContacts;
- (NSInteger)numberOfItemsAtContactIndex:(NSInteger)index;
- (MEVHorizontalContactsCell *)contactAtIndex:(NSInteger)index;
- (MEVHorizontalContactsCell *)item:(NSInteger)item atContactIndex:(NSInteger)index;
- (UIEdgeInsets)horizontalContactsInsets;
- (NSInteger)horizontalContactsSpacing;

5. Implement Delegate Methods

#pragma mark - MEVHorizontalContactsDelegate Methods

- (void)contactSelectedAtIndex:(NSInteger)index;
- (void)item:(NSInteger)item selectedAtContactIndex:(NSInteger)index;

Example

Customization 1

- (MEVHorizontalContactsCell *)contactAtIndex:(NSInteger)index {
    MEVHorizontalContactsCell *cell = [_horizontalContacts dequeueReusableContactCellForIndex:index];
    [cell.imageView setImage:[UIImage imageNamed:[self getImageNameAtIndex:index]]];
    [cell.imageView.layer setBorderColor:[UIColor colorWithRed:34/255.0f green:167/255.0f blue:240/255.0f alpha:1].CGColor];
    [cell.imageView.layer setBorderWidth:1.0f];
    [cell.label setText:[self getUserNameAtIndex:index]];
    [cell.label setFont:[UIFont boldSystemFontOfSize:12.0f]];
    return cell;
}

- (MEVHorizontalContactsCell *)item:(NSInteger)item atContactIndex:(NSInteger)index {

    UIImage *image;
    NSString *labelText;
    switch (item) {
        case 0:
            labelText = @"Call";
            image = [UIImage imageNamed:@"actionCall"];
            break;
        case 1:
            labelText = @"Email";
            image = [UIImage imageNamed:@"actionEmail"];
            break;
        case 2:
            labelText = @"Message";
            image = [UIImage imageNamed:@"actionMessage"];
            break;
        default:
            labelText = @"Call";
            image = [UIImage imageNamed:@"actionCall"];
            break;
    }
    
    MEVHorizontalContactsCell *cell = [_horizontalContacts dequeueReusableItemCellForIndex:index];
    [cell.imageView setImage:image];
    [cell.imageView setTintColor:[UIColor colorWithRed:34/255.0f green:167/255.0f blue:240/255.0f alpha:1]];
    [cell.imageView.layer setBorderColor:[UIColor colorWithRed:34/255.0f green:167/255.0f blue:240/255.0f alpha:1].CGColor];
    [cell.imageView.layer setBorderWidth:1.0f];
    [cell.label setText:labelText];
    [cell.label setFont:[UIFont boldSystemFontOfSize:10.0f]];

    return cell;
}

Customization 2

- (MEVHorizontalContactsCell *)contactAtIndex:(NSInteger)index {
    MEVHorizontalContactsCell *cell = [_horizontalContacts dequeueReusableContactCellForIndex:index];
    [cell.imageView setImage:[UIImage imageNamed:[self getImageNameAtIndex:index]]];
    [cell.label setText:[self getUserNameAtIndex:index]];
    return cell;
}

- (MEVHorizontalContactsCell *)item:(NSInteger)item atContactIndex:(NSInteger)index {
    
    UIImage *image;
    NSString *labelText;
    switch (item) {
        case 0:
            labelText = @"Call";
            image = [UIImage imageNamed:@"actionCall"];
            break;
        case 1:
            labelText = @"Email";
            image = [UIImage imageNamed:@"actionEmail"];
            break;
        case 2:
            labelText = @"Message";
            image = [UIImage imageNamed:@"actionMessage"];
            break;
        default:
            labelText = @"Call";
            image = [UIImage imageNamed:@"actionCall"];
            break;
    }
    
    MEVHorizontalContactsCell *cell = [_horizontalContacts dequeueReusableItemCellForIndex:index];
    [cell.imageView setImage:image];
    [cell.imageView setBackgroundColor:[UIColor colorWithRed:34/255.0f green:167/255.0f blue:240/255.0f alpha:1]];
    [cell.imageView setTintColor:[UIColor whiteColor]];
    [cell.label setText:labelText];
    [cell.label setTextColor:[UIColor colorWithRed:34/255.0f green:167/255.0f blue:240/255.0f alpha:1]];
    return cell;
}

Roadmap

• CocoaPods support
• Carthage support
• Tests

Change Log

See Changelog.md

Author

• Manuel Escrig Ventura, @manuelescrig
• Email manuel@ventura.media
• Portfolio http://ventura.media

Apps using this library

• People Tracker App, www.peopletrackerapp.com

License

MEVHorizontalContacts is available under the MIT license. See the LICENSE file for more info.

Icons made by Gregor Cresnar is licensed by Creative Commons BY 3.0