create a simple chat view in ios

I need to create a simple chat view in which i can show messages from two ends (sender and receiver) like any Message App .

What i have done till now is , created a UITableView , A UIButton and a UITextField. And on that UIButton tap , i am adding UITextField text to array , Now I need the second end also like in ours Messaging app (sender side).

  • Calling two different custom cell in one UITableView issue
  • Center footer UILabel in grouped UITableView - Swift
  • UITableView dynamic cell heights only correct after some scrolling
  • UITableViewController inside UIScrollView with Horizontal Paging
  • login using UITableView
  • Error: Could not find overload for 'title' that accepts the supplied arguments
  • Left side is receiver and Right side is sender.

    My app till now looks like

    enter image description here

    Here is my code:

     - (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *CellIdentifier = @"Cell";
    
    messageLabel = nil;
    
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:CellIdentifier];
    
    if (cell == nil) {
    
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    
        messageLabel = [[UILabel alloc] init];
        messageLabel.tag = 101;
        [cell.contentView addSubview: messageLabel];
    
          } else {
    
    
        messageLabel = (UILabel*)[cell.contentView viewWithTag: 101];
    
          }    //---calculate the height for the label---
    int labelHeight = [self labelHeight:[listOfMessages objectAtIndex:indexPath.row]];
    labelHeight -= bubbleFragment_height;
    if (labelHeight<0) labelHeight = 0;
    
    messageLabel.frame =
    CGRectMake(bubble_x + 10, bubble_y + 5,
               (bubbleFragment_width * 3) - 25,
               (bubbleFragment_height * 2) + labelHeight - 10);
    
    messageLabel.font = [UIFont systemFontOfSize:15];
    messageLabel.textAlignment = NSTextAlignmentCenter;
    messageLabel.textColor = [UIColor darkTextColor];
    messageLabel.backgroundColor = [UIColor greenColor];
    messageLabel.numberOfLines = 0;
    messageLabel.layer.cornerRadius = 8;
    messageLabel.layer.masksToBounds = YES;
    
    messageLabel.text = [listOfMessages objectAtIndex:indexPath.row];
    [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    
    return cell;
    }
    
    -(void) sendAction:(id) sender {
    [listOfMessages addObject:field.text];
    
    [chatTable reloadData];
    field.text = @"";
    
    [field resignFirstResponder];
     }
    

    2 Solutions Collect From Internet About “create a simple chat view in ios”

    You can take two different custom cells one for the sender and one for the receiver like this:

    for sender

    1. for Sender

    for receiver

    1. for Receiver

    Now, in your app, there must be login and sign-up process as it is a chat app and there will be server associated with your app to save data.

    What you can do is that, when you send the message, also send the name of the receiver with it and store it in your database.

    Now, in your chat view, fetch all the message data, along with the receiver names.

    Fetch the userName who is currently logged in during the Login process.

    You can do something like this in your cellForRowAtIndexPath:

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    
        NSString *myArrayElement = [arr_receiverUserName objectAtIndex:indexPath.row];
    
        //do something useful with myArrayElement
    
        if(![myArrayElement isEqualToString:userName])
        {
             /// These are my messages.
             //// Pop up 'mycell' here 
    
                UILabel *lbl_myText = [[UILabel alloc]initWithFrame:CGRectZero];
                [lbl_myText setLineBreakMode:NSLineBreakByWordWrapping];
                lbl_myText.minimumScaleFactor = FONT_SIZE;
                [lbl_myText setNumberOfLines:0];
                lbl_myText.textAlignment = NSTextAlignmentRight;
                [lbl_myText setFont:[UIFont systemFontOfSize:FONT_SIZE]];
    
                NSString *text = [arr_text objectAtIndex:indexPath.row];
    
                CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE]];
    
                // Checks if text is multi-line
                if (size.width > lbl_myText.bounds.size.width)
                {
                    CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
    
                    CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint lineBreakMode:NSLineBreakByWordWrapping];
    
                    [lbl_myText setText:text];
                    [lbl_myText setFrame:CGRectMake(CELL_CONTENT_MARGIN, CELL_CONTENT_MARGIN, CELL_CONTENT_WIDTH - cell.imgv_myImage.frame.size.width -(CELL_CONTENT_MARGIN * 2), MAX(size.height, 44.0f))];
                }
    
                else
                {
                    lbl_myText.frame = CGRectMake(10, 0, cell.frame.size.width - cell.imgv_myImage.frame.size.width - 18,18);
                    lbl_myText.textAlignment = NSTextAlignmentRight;
                    [lbl_myText setText:text];
                }
    
                //lbl_myText.backgroundColor = [UIColor greenColor];
    
                [cell.contentView addSubview:lbl_myText];
    
        }
    
        else
        {
            //// These are the messages sent by some one else
    
           /// Pop up `someonecell` here
    
            UILabel *lbl_myText = [[UILabel alloc]initWithFrame:CGRectZero];
            [lbl_myText setLineBreakMode:NSLineBreakByWordWrapping];
            lbl_myText.minimumScaleFactor = FONT_SIZE;
            [lbl_myText setNumberOfLines:0];
            lbl_myText.textAlignment = NSTextAlignmentLeft;
            [lbl_myText setFont:[UIFont systemFontOfSize:FONT_SIZE]];
    
            NSString *text = [arr_text objectAtIndex:indexPath.row];
    
            CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE]];
    
            // Checks if text is multi-line
            if (size.width > lbl_myText.bounds.size.width)
            {
                CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
    
                CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint lineBreakMode:NSLineBreakByWordWrapping];
    
                [lbl_myText setText:text];
                [lbl_myText setFrame:CGRectMake(cell.imgv_someoneImage.frame.size.width+8, CELL_CONTENT_MARGIN, CELL_CONTENT_WIDTH - cell.imgv_someoneImage.frame.size.width -(CELL_CONTENT_MARGIN * 2), MAX(size.height, 44.0f))];
            }
    
            else
            {
                lbl_myText.frame = CGRectMake(10, 0, cell.frame.size.width - cell.imgv_someoneImage.frame.size.width - 18,18);
                lbl_myText.textAlignment = NSTextAlignmentLeft;
                [lbl_myText setText:text];
            }
    
            //lbl_myText.backgroundColor = [UIColor greenColor];
    
            [cell.contentView addSubview:lbl_myText];
    
        }
    

    You can do similar things for images and audios.


    For Dynamic Height Of The Cell:

    To make to the height of your cell according to your UILabels, refer to Increase the main tableview row height according to the custom cell

    You need to create multiple cell with different CellIdentifier For Example. Cell For sender and receiver. And you can subdivide it in categories like text,audio,video,image.

    Lets have example for the text chat.

    First of all you need to create 2 cell prototypes in your Storyboard or XIB with different CellIdentifier for example “cellSender” and “cellReceiver“.

    Take UILabel or UITextView inside cell and for cellSender make left alignment and for cellReceiver make the alignment right for making different layout for sender and receiver.

    Then You can do with following with your code…

      - (UITableViewCell *)tableView:(UITableView *)tableView
             cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        BOOL sender = NO;
    
    // Check for the sender or receiver 
        <code for checking message is from sender or receiver>
    
        static NSString *CellIdentifier = sender?@"cellSender":@"cellReceiver";
    
        messageLabel = nil;
    
        UITableViewCell *cell = [tableView
                                 dequeueReusableCellWithIdentifier:CellIdentifier];
    
        if (cell == nil) {
    
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    
            messageLabel = [[UILabel alloc] init];
            messageLabel.tag = 101;
            [cell.contentView addSubview: messageLabel];
    
              } else {
    
    
            messageLabel = (UILabel*)[cell.contentView viewWithTag: 101];
    
              }    //---calculate the height for the label---
        int labelHeight = [self labelHeight:[listOfMessages objectAtIndex:indexPath.row]];
        labelHeight -= bubbleFragment_height;
        if (labelHeight<0) labelHeight = 0;
    
        messageLabel.frame =
        CGRectMake(bubble_x + 10, bubble_y + 5,
                   (bubbleFragment_width * 3) - 25,
                   (bubbleFragment_height * 2) + labelHeight - 10);
    
        messageLabel.font = [UIFont systemFontOfSize:15];
        messageLabel.textAlignment = NSTextAlignmentLeft;
        messageLabel.textColor = [UIColor darkTextColor];
        messageLabel.backgroundColor = sender? [UIColor greenColor]: [UIColor lightGrayColor];
        messageLabel.numberOfLines = 0;
        messageLabel.layer.cornerRadius = 8;
        messageLabel.layer.masksToBounds = YES;
    
        messageLabel.text = [listOfMessages objectAtIndex:indexPath.row];
        [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    
        return cell;
        }