Création d'un écran de messagerie dans iOS

Question

Je travaille actuellement sur une application iOS dont la fonctionnalité principale est la messagerie. Les écrans de messagerie peuvent devenir assez compliqués, en particulier en essayant de les rendre conformes aux normes actuelles. Je me demande quelles solutions les développeurs ont utilisé pour créer un écran de messagerie. Y at-il une bonne bibliothèque pour commencer (j'ai vérifié JSQMessagesViewController et à peu près tous les autres CocoaPod pour la messagerie) ou devrais-je juste commencer à partir de zéro?

L'écran de messagerie que je veux n'est pas trop compliqué et je devrais pouvoir l'accomplir avec une vue de table, quelques cellules personnalisées et quelques contraintes. J'ai du mal à déterminer si je devrais perdre mon temps à personnaliser quelque chose quand je pourrais le faire moi-même.

Que dois-je faire, personnaliser une bibliothèque existante ou simplement le faire à partir de zéro?

Des conseils?

Answer 1

Je me rends compte que cette question existe depuis longtemps, mais comme elle n'a pas encore de réponse acceptée, je vais soumettre ma solution. La partie que je montre ci-dessous est pour afficher les messages et n'inclut pas le widget de réponse. Cela devrait aider les gens à démarrer dans une direction qui a fait ce que je voulais faire. Je l'ai fait en utilisant une tableview, une cellule personnalisée contenant une propriété UITextView (mais n'a pas ajouté la textview dans le storyboard, elle est instanciée dans le code) et un tableau de données de table contenant des instances de ma classe SDMessage.

Voici le contenu du fichier d'interface de classe SDMessage:

@interface SDMessage : NSObject 

@property (nonatomic, strong) NSNumber *message_id; 
@property (nonatomic, strong) NSString *message_sender; 
@property (nonatomic, strong) NSString *message_content; 
@property (nonatomic, strong) NSString *their_id; 
@property (nonatomic, strong) NSString *timestamp; 
@property (nonatomic, strong) NSDate *dateTime; 
@property (nonatomic, strong) NSString *prettyTimestamp; 
@property (nonatomic, strong) NSNumber *seen; 


@end 

Mes méthodes de délégués de Tableview sont les suivantes:

#pragma mark - Table view data source 

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
{ 
    return 1; 
} 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
{ 
    return [self.tableData count]; 
} 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"MsgDetailCell"; 
    MsgDetailCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 


    if (!cell) { 
     cell = [[MsgDetailCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 
     cell.frame = CGRectMake(2, 2, tableView.frame.size.width - 4, 30); 
    } 

    // Since we are creating a new UITextfield with every load, set any existing UITextfield instance to nil 
    [cell.message removeFromSuperview]; 
    cell.message = nil; 


    // get the data for this cell (returns self.tableData[indexPath.row]) 
    SDMessage *cellData = [self cellDataForRowAtIndexPath:indexPath]; 

    // get sender id to configure appearance (if we're sending a message it will appear 
    // on the right side, if we received a message the message will be on the left side of the screen) 
    long long theirId = [cellData.message_sender longLongValue]; 

    // we have to do this in code so we can set the frame once and avoid cut off text 
    cell.message = [[UITextView alloc] init]; 

    // set cell text 
    cell.message.text = cellData.message_content; 

    // set font and text size (I'm using custom colors here defined in a category) 
    [cell.message setFont:[UIFont fontWithName:kMessageFont size:kMessageFontSize]]; 
    [cell.message setTextColor:[UIColor gh_messageTextColor]]; 

    // our messages will be a different color than their messages 
    UIColor *msgColor = (theirId == _myUid) ? [UIColor gh_myMessageBgColor] : [UIColor gh_theirMessageBgColor]; 

    // I want the cell background to be invisible, and only have the 
    // message background be colored 
    cell.backgroundColor = [UIColor clearColor]; 
    cell.message.backgroundColor = msgColor; 
    cell.message.layer.cornerRadius = 10.0; 

    // make the textview fit the content (kMessageWidth = 220, kMessageBuffer = 15 ... buffer is amount of space from edge of cell) 
    CGSize newSize = [cell.message sizeThatFits:CGSizeMake(kMessageWidth, MAXFLOAT)]; 
    CGRect newFrame; 

    // since we are placing the message bubbles justified right or left on the screen 
    // we determine if this is our message or someone else's message and set the cell 
    // origin accordingly... (if the sender of this message (e.g. theirId) is us, then take the width 
    // of the cell, subtract our message width and our buffer and set that x position as our origin. 
    // this will position messages we send on the right side of the cell, otherwise the other party 
    // in our conversation sent the message, so our x position will just be whatever the buffer is. (in this case 15) 
    float originX = (theirId == _myUid) ? cell.frame.size.width - kMessageWidth - kMessageBuffer : kMessageBuffer; 

    // set our origin at our calculated x-point, and y position of 10 
    newFrame.origin = CGPointMake(originX, 10); 

    // set our message width and newly calculated height 
    newFrame.size = CGSizeMake(fmaxf(newSize.width, kMessageWidth), newSize.height); 

    // set the frame of our textview and disable scrolling of the textview 
    cell.message.frame = newFrame; 
    cell.message.scrollEnabled = NO; 
    cell.userInteractionEnabled = NO; 

    // add our textview to our cell 
    [cell addSubview:cell.message]; 

    return cell; 
} 



-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    // we need to make sure our cell is tall enough so we don't cut off our message bubble 
    MsgDetailCell *cell = (MsgDetailCell*)[self tableView:self.tableview cellForRowAtIndexPath:indexPath]; 

    // get the size of the message for this cell 
    CGSize newSize = [cell.message sizeThatFits:CGSizeMake(kMessageWidth, MAXFLOAT)]; 

    // get the height of the bubble and add a little buffer of 20 
    CGFloat textHeight = newSize.height + 20; 

    // don't make our cell any smaller than 60 
    textHeight   = (textHeight < 60) ? 60 : textHeight; 

    return textHeight; 
} 


-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    SLog(@"didSelectRow: %ld", (long)indexPath.row); 
} 


- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    return NO; 
} 

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    return NO; 
} 

-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section 
{ 
    return 0.01; 
} 

-(UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section 
{ 
    return [UIView new]; 
} 

Cela me donne un écran de message tableview qui ressemble à ceci: