-- added new options for date labels above messages

-- better encapsulation of JSBubbleMessageCell
-- new UIColor category for default iOS Messages colors
-- other tweaks and refactoring

JSMessagesTableViewController/JSBubbleMessageCell.h

@@ -36,12 +36,17 @@
 #import <UIKit/UIKit.h>
 #import "JSBubbleView.h"
 
-@interface JSBubbleMessageCell : UITableViewCell
+#define DATE_LABEL_HEIGHT 12.0f
 
-@property (strong, nonatomic) JSBubbleView *bubbleView;
+@interface JSBubbleMessageCell : UITableViewCell
 
 #pragma mark - Initialization
 - (id)initWithBubbleStyle:(JSBubbleMessageStyle)style
+                  hasDate:(BOOL)hasDate
           reuseIdentifier:(NSString *)reuseIdentifier;
 
+#pragma mark - Message Cell
+- (void)setMessage:(NSString *)msg;
+- (void)setDate:(NSDate *)date;
+
 @end

JSMessagesTableViewController/JSBubbleMessageCell.m

@@ -34,11 +34,16 @@
 //
 
 #import "JSBubbleMessageCell.h"
+#import "UIColor+JSMessagesView.h"
 
 @interface JSBubbleMessageCell()
 
+@property (strong, nonatomic) JSBubbleView *bubbleView;
+@property (strong, nonatomic) UILabel *dateLabel;
+
 - (void)setup;
-- (void)configureBubbleWithStyle:(JSBubbleMessageStyle)style;
+- (void)configureDateLabel;
+- (void)configureWithStyle:(JSBubbleMessageStyle)style date:(BOOL)hasDate;
 
 @end
 
@@ -62,12 +67,37 @@
     self.detailTextLabel.hidden = YES;
 }
 
-- (void)configureBubbleWithStyle:(JSBubbleMessageStyle)style
+- (void)configureDateLabel
 {
+    self.dateLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0f,
+                                                               4.0f,
+                                                               [UIScreen mainScreen].bounds.size.width,
+                                                               14.5f)];
+    self.dateLabel.autoresizingMask =  UIViewAutoresizingNone;
+    self.dateLabel.backgroundColor = [UIColor clearColor];
+    self.dateLabel.textAlignment = NSTextAlignmentCenter;
+    self.dateLabel.textColor = [UIColor messagesDateLabelColor];
+    self.dateLabel.shadowColor = [UIColor whiteColor];
+    self.dateLabel.shadowOffset = CGSizeMake(0.0f, 1.0f);
+    self.dateLabel.font = [UIFont boldSystemFontOfSize:11.5f];
+    
+    [self.contentView addSubview:self.dateLabel];
+    [self.contentView bringSubviewToFront:self.dateLabel];
+}
+
+- (void)configureWithStyle:(JSBubbleMessageStyle)style date:(BOOL)hasDate
+{
+    CGFloat bubbleY = 0.0f;
+    
+    if(hasDate) {
+        [self configureDateLabel];
+        bubbleY = 14.0f;
+    }
+    
     CGRect frame = CGRectMake(0.0f,
-                              0.0f,
+                              bubbleY,
                               self.contentView.frame.size.width,
-                              self.contentView.frame.size.height);
+                              self.contentView.frame.size.height - self.dateLabel.frame.size.height);
     
     self.bubbleView = [[JSBubbleView alloc] initWithFrame:frame
                                               bubbleStyle:style];
@@ -78,12 +108,12 @@
     [self.contentView sendSubviewToBack:self.bubbleView];
 }
 
-- (id)initWithBubbleStyle:(JSBubbleMessageStyle)style reuseIdentifier:(NSString *)reuseIdentifier
+- (id)initWithBubbleStyle:(JSBubbleMessageStyle)style hasDate:(BOOL)hasDate reuseIdentifier:(NSString *)reuseIdentifier
 {
     self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
     if(self) {
         [self setup];
-        [self configureBubbleWithStyle:style];
+        [self configureWithStyle:style date:hasDate];
     }
     return self;
 }
@@ -96,4 +126,17 @@
     [self.bubbleView setBackgroundColor:color];
 }
 
+#pragma mark - Message Cell
+- (void)setMessage:(NSString *)msg
+{
+    self.bubbleView.text = msg;
+}
+
+- (void)setDate:(NSDate *)date
+{
+    self.dateLabel.text = [NSDateFormatter localizedStringFromDate:date
+                                                         dateStyle:NSDateFormatterMediumStyle
+                                                         timeStyle:NSDateFormatterShortStyle];
+}
+
 @end

JSMessagesTableViewController/JSBubbleView.h

@@ -37,8 +37,8 @@
 
 typedef enum {
 	JSBubbleMessageStyleIncoming = 0,
-    JSBubbleMessageStyleOutgoing = 1,
-	JSBubbleMessageStyleOutgoingGreen = 2
+    JSBubbleMessageStyleOutgoing,
+	JSBubbleMessageStyleOutgoingGreen
 } JSBubbleMessageStyle;
 
 

JSMessagesTableViewController/JSMessagesViewController.h

@@ -35,11 +35,23 @@
 
 #import <UIKit/UIKit.h>
 #import "JSBubbleMessageCell.h"
-#import "JSMessageSoundEffect.h"
+#import "JSBubbleView.h"
 #import "JSMessageInputView.h"
+#import "JSMessageSoundEffect.h"
+
+typedef enum {
+    JSMessagesViewDateLabelPolicyAll = 0,
+    JSMessagesViewDateLabelPolicyAlternating,
+    JSMessagesViewDateLabelPolicyEveryThree,
+    JSMessagesViewDateLabelPolicyEveryFive,
+    JSMessagesViewDateLabelPolicyCustom
+} JSMessagesViewDateLabelPolicy;
+
+
 
 @interface JSMessagesViewController : UIViewController <UITableViewDataSource, UITableViewDelegate, UITextViewDelegate>
 
+@property (assign, nonatomic) JSMessagesViewDateLabelPolicy dateLabelPolicy;
 @property (strong, nonatomic) UITableView *tableView;
 @property (strong, nonatomic) JSMessageInputView *inputView;
 @property (assign, nonatomic) CGFloat previousTextViewContentHeight;
@@ -52,6 +64,8 @@
 #pragma mark - Messages view controller
 - (JSBubbleMessageStyle)messageStyleForRowAtIndexPath:(NSIndexPath *)indexPath;
 - (NSString *)textForRowAtIndexPath:(NSIndexPath *)indexPath;
+- (NSDate *)dateForRowAtIndexPath:(NSIndexPath *)indexPath;
+- (BOOL)shouldHaveDateForRowAtIndexPath:(NSIndexPath *)indexPath;
 - (void)finishSend;
 - (void)setBackgroundColor:(UIColor *)color;
 - (void)scrollToBottomAnimated:(BOOL)animated;

JSMessagesTableViewController/JSMessagesViewController.m

@@ -36,6 +36,7 @@
 #import "JSMessagesViewController.h"
 #import "NSString+JSMessagesView.h"
 #import "UIView+AnimationOptionsForCurve.h"
+#import "UIColor+JSMessagesView.h"
 
 #define INPUT_HEIGHT 40.0f
 
@@ -61,8 +62,7 @@
 	self.tableView.delegate = self;
 	[self.view addSubview:self.tableView];
 	
-    UIColor *color = [UIColor colorWithRed:0.859f green:0.886f blue:0.929f alpha:1.0f];
-    [self setBackgroundColor:color];
+    [self setBackgroundColor:[UIColor messagesBackgroundColor]];
     
     CGRect inputFrame = CGRectMake(0.0f, size.height - INPUT_HEIGHT, size.width, INPUT_HEIGHT);
     self.inputView = [[JSMessageInputView alloc] initWithFrame:inputFrame];
@@ -81,6 +81,7 @@
 {
     [super viewDidLoad];
     [self setup];
+    self.dateLabelPolicy = JSMessagesViewDateLabelPolicyEveryThree;
 }
 
 - (void)viewWillAppear:(BOOL)animated
@@ -156,17 +157,22 @@
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     JSBubbleMessageStyle style = [self messageStyleForRowAtIndexPath:indexPath];
+    BOOL hasDate = [self shouldHaveDateForRowAtIndexPath:indexPath];
     
-    NSString *CellID = [NSString stringWithFormat:@"MessageCell%d", style];
+    NSString *CellID = [NSString stringWithFormat:@"MessageCell_%d_%d", style, hasDate];
     JSBubbleMessageCell *cell = (JSBubbleMessageCell *)[tableView dequeueReusableCellWithIdentifier:CellID];
     
     if(!cell) {
         cell = [[JSBubbleMessageCell alloc] initWithBubbleStyle:style
+                                                        hasDate:hasDate
                                                 reuseIdentifier:CellID];
     }
     
-    cell.bubbleView.text = [self textForRowAtIndexPath:indexPath];
-    cell.backgroundColor = tableView.backgroundColor;
+    if(hasDate)
+        [cell setDate:[self dateForRowAtIndexPath:indexPath]];
+    
+    [cell setMessage:[self textForRowAtIndexPath:indexPath]];
+    [cell setBackgroundColor:tableView.backgroundColor];
     
     return cell;
 }
@@ -174,7 +180,9 @@
 #pragma mark - Table view delegate
 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
 {
-    return [JSBubbleView cellHeightForText:[self textForRowAtIndexPath:indexPath]];
+    CGFloat dateHeight = [self shouldHaveDateForRowAtIndexPath:indexPath] ? DATE_LABEL_HEIGHT : 0.0f;
+    
+    return [JSBubbleView cellHeightForText:[self textForRowAtIndexPath:indexPath]] + dateHeight;
 }
 
 #pragma mark - Messages view controller
@@ -188,6 +196,34 @@
     return nil; // Override in subclass
 }
 
+- (NSDate *)dateForRowAtIndexPath:(NSIndexPath *)indexPath
+{
+    return nil; // Override in subclass
+}
+
+- (BOOL)shouldHaveDateForRowAtIndexPath:(NSIndexPath *)indexPath // Override in subclass if using JSMessagesViewDateLabelPolicyCustom
+{
+    switch (self.dateLabelPolicy) {
+        case JSMessagesViewDateLabelPolicyAll:
+            return YES;
+            break;
+        case JSMessagesViewDateLabelPolicyAlternating:
+            return indexPath.row % 2 == 0;
+            break;
+        case JSMessagesViewDateLabelPolicyEveryThree:
+            return indexPath.row % 3 == 0;
+            break;
+        case JSMessagesViewDateLabelPolicyEveryFive:
+            return indexPath.row % 5 == 0;
+            break;
+        case JSMessagesViewDateLabelPolicyCustom:
+            return NO;
+            break;
+    }
+    
+    return NO;
+}
+
 - (void)finishSend
 {
     [self.inputView.textView setText:nil];

JSMessagesTableViewController/UIColor+JSMessagesView.h

@@ -0,0 +1,16 @@
+//
+//  UIColor+JSMessagesView.h
+//  MessagesDemo
+//
+//  Created by Jesse Squires on 3/19/13.
+//  Copyright (c) 2013 Hexed Bits. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+@interface UIColor (JSMessagesView)
+
++ (UIColor *)messagesBackgroundColor;
++ (UIColor *)messagesDateLabelColor;
+
+@end

JSMessagesTableViewController/UIColor+JSMessagesView.m

@@ -0,0 +1,23 @@
+//
+//  UIColor+JSMessagesView.m
+//  MessagesDemo
+//
+//  Created by Jesse Squires on 3/19/13.
+//  Copyright (c) 2013 Hexed Bits. All rights reserved.
+//
+
+#import "UIColor+JSMessagesView.h"
+
+@implementation UIColor (JSMessagesView)
+
++ (UIColor *)messagesBackgroundColor
+{
+    return [UIColor colorWithRed:0.859f green:0.886f blue:0.929f alpha:1.0f];
+}
+
++ (UIColor *)messagesDateLabelColor
+{
+    return [UIColor colorWithRed:0.533f green:0.573f blue:0.647f alpha:1.0f];
+}
+
+@end