Add Click Handler to Avatars on Atlas (Layer Chat)

Atlas is a fully featured, high performance, 100% customizable UI kit, built by Layer to power communications interfaces in any app. If you want to learn how to integrate chat in your iOS app, take a look at Implementing Chat/Messaging in iOS apps with Layer.

In the previous post, I talked about subclassing ATLMessageCollectionViewCell to display avatars on both sides in a conversation. Let’s take that a step further and see how we can handle tap on avatars in a conversation. We will subclass the same class this time, but for the incoming messages rather than the outgoing ones.

Create a cell for incoming messages

@interface PGIncomingMessageCollectionViewCell ()
@property(nonatomic, strong) UITapGestureRecognizer *avatarTapGestureRecognizer;

@implementation PGIncomingMessageCollectionViewCell

NSString *const PGIncomingMessageCellIdentifier = @"PGIncomingMessageCellIdentifier";

- (void)lyr_incommingCommonInit {
    [super lyr_incommingCommonInit];

    self.avatarTapGestureRecognizer = [[UITapGestureRecognizer alloc] bk_initWithHandler:^(UIGestureRecognizer *sender, UIGestureRecognizerState state, CGPoint location) {
        // TODO Handle a tap on the avatar item
    [self.avatarImageView addGestureRecognizer:self.avatarTapGestureRecognizer];
    self.avatarImageView.userInteractionEnabled = YES;

    [self.avatarImageView mas_makeConstraints:^(MASConstraintMaker *make) {

- (void)layoutSubviews {
    [super layoutSubviews];
    self.avatarImageView.layer.cornerRadius = CGRectGetHeight(self.avatarImageView.frame) / 2;


Register our cell for incoming messages

In your ATLConversationViewController subclass, do the following:

- (void)viewDidLoad {
    [self registerClass:[PGIncomingMessageCollectionViewCell class] forMessageCellWithReuseIdentifier:PGIncomingMessageCellIdentifier];

- (NSString *)conversationViewController:(ATLConversationViewController *)viewController reuseIdentifierForMessage:(LYRMessage *)message {
    if ([message.sentByUserID isEqualToString:self.layerClient.authenticatedUserID]) {
        return PGOutgoingMessageCellIdentifier;
    return PGIncomingMessageCellIdentifier;

Need help setting this up or just want to chat? Shoot me an email at

Published 21 Jun 2015

I build mobile and web applications. Full Stack, Rails, React, Typescript, Kotlin, Swift
Pulkit Goyal on Twitter