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)
                }

You can reference to AutoLayout to achieve an image with aligned text next to it. Or you can use AttributedString for getting AttributedString with image attachment http://stackoverflow.com/questions/20930462/ios-7-textkit-how-to-insert-images-inline-with-text — MCMatan, Apr 05 '16 at 08:33

score 0 · Answer 1 · answered Apr 05 '16 at 08:33

0

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

answered Apr 05 '16 at 08:33

serhat sezer

1,330
1
10
26

I don't have to subclass anything from JSQ? – Happiehappie Apr 05 '16 at 08:48
What do you mean "JSQ" ? You don't need to subclass anything. Just write auto-layout code in your custom cell class. – serhat sezer Apr 05 '16 at 11:11
but Im using JSQMesssagesViewControlelr for my chat – Happiehappie Apr 05 '16 at 11:21

combine text message with image in a bubble

1 Answers1