combine text message with image in a bubble

Question

How do I combine both the image and text in a bubble like this

Currently,the only thing I achieved is splitting them with

                let mediaItem = ChatImageJSQPhoto(image: image)
                let outgoingBool = chat.sender!.id != NetworkHelper.loggedInUser!.id
                mediaItem.appliesMediaViewMaskAsOutgoing = outgoingBool
                let photoMessage = JSQMessage(senderId: String(chat.sender!.id), senderDisplayName: chat.sender!.username, date: self.formatter.dateFromString(chat.dateTime), media: mediaItem)
                Alamofire.request(.GET, chat.gift!.image)
                    .responseImage { response in
                        if let image = response.result.value {
                            mediaItem.image = image

                            dispatch_async(dispatch_get_main_queue(), {
                                self.collectionView.reloadData()
                                self.finishReceivingMessage()
                            })
                        }

                }
                self.messages.append(photoMessage)
                //then get the message if it exists
                if chat.desc.characters.count > 0 {
                    self.addMessage(String(chat.sender!.id), senderName: chat.sender!.username, text: chat.desc, date: chat.dateTime)
                }

Answer 1

You can achieve this using auto-layout. Here is just little idea how can you implement to your project

H:|[imageView]-10-[uiLabel]|

More about auto-layout visual format language (VFL) here is apple documenation