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

Manuel Escrig

Last update: Sep 1, 2022

Overview

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 [email protected]
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

You might also like...

Show the weather effects onto view written in Swift4.2

URWeatherView What is this for? Showing some kinds of the weather effect, written in Swift4.2. This code style is the Protocol Oriented Programming. T

449 Dec 28, 2022

ToastSwiftUI-master - A simple way to show a toast or a popup in SwiftUI

2 May 25, 2022

Simple and highly customizable iOS tag list view, in Swift.

TagListView Simple and highly customizable iOS tag list view, in Swift. Supports Storyboard, Auto Layout, and @IBDesignable. Usage The most convenient

2.5k Jan 5, 2023

Reel Search is a Swift UI controller that allows you to choose options from a list

REEL SEARCH Reel Search is a Swift UI controller that allows you to choose options from a list We specialize in the designing and coding of custom UI

2.5k Dec 21, 2022

A controller that uses a UIStackView and view controller composition to display content in a list

StackViewController Overview StackViewController is a Swift framework that simplifies the process of building forms and other static content using UIS

867 Dec 27, 2022

Advanced List View for SwiftUI with pagination & different states

AdvancedList This package provides a wrapper view around the SwiftUI List view which adds pagination (through my ListPagination package) and an empty,

246 Jan 3, 2023

List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model and doesn't depend on UI framework

SwiftListTreeDataSource List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model, so can

26 Nov 26, 2022

Elimination-backoff stack is an unbounded lock-free LIFO linked list, that eliminates concurrent pairs of pushes and pops with exchanges.

Elimination-backoff stack is an unbounded lock-free LIFO linked list, that eliminates concurrent pairs of pushes and pops with exchanges. It uses compare-and-set (CAS) atomic operation to provide concurrent access with obstruction freedom. In order to support even greater concurrency, in case a push/pop fails, it tries to pair it with another pop/push to eliminate the operation through exchange of values.

0 Dec 26, 2021

UIStackView replica for iOS 7.x and iOS 8.x

TZStackView A wonderful layout component called the UIStackView was introduced with iOS 9. With this component it is really easy to layout components

1.2k Oct 10, 2022

Comments

Clear Background Color not working properly.

When doing _horizontalContacts.backgroundColor = [UIColor clearColor]; , the background becomes black instead with a horizontal contacts copy visible in the background as well.

How to fix this @manuelescrig ?

opened by hyd00 2
An opportunity

Hello, I need help finishing an app. If you can help me, Id love to tell you the idea. Its a great idea and very unique. I'm 60% done with the app and its one of a kind. If your interested in hearing the app, please email me back. I emailed you because of the project examples you have on github. Thank you and hope to hear back from you.
invalid

opened by Ahmedshubber 1
Can you make possible to expand item through programming

I am very happy to work with this library ... but I really need this option be available, so we can select and expand any contact at any time programmatically

Thank you

opened by albarq 0