Textview IOS Swift - Balloon-shaped design

Question

Hello guys, I would like to know how I do a textView of this in Ios with Swift ?

Thanks in advance for your attention.

Answer 1

If you will show an isolated message, you can do it using a standard Uitextview with a Uiimageview behind it.

Textview has a transparent background and contains only text. Imageview contains the background image, in this case the balloon. So that the image is not distorted, use resizableImageWithCapInsets, which allows you to define the insets of the image edges that will be preserved when the image is resized. If the balloon has edges away from the edges, use textContainerInset to move the text away from the edges. It would look something like this:

class ViewController: UIViewController {

    @IBOutlet var textView : UITextView!
    @IBOutlet var imageView : UIImageView!
    @IBOutlet var textViewHeightConstraint : NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()

        var image : UIImage = UIImage(named:"test.png")!
        image = image.resizableImageWithCapInsets(UIEdgeInsetsMake(20, 100, 30, 80))
        imageView.image = image

        textView.backgroundColor = UIColor.clearColor()
        textView.textContainerInset = UIEdgeInsetsMake(20, 20, 0, 10)
        textView.scrollEnabled = false
        //redimensiona textView de acordo com o texto
        var sizeThatFitsTextView : CGSize = textView.sizeThatFits(CGSizeMake(textView.frame.size.width, CGFloat.max))
        textViewHeightConstraint.constant = sizeThatFitsTextView.height
    }
}

In the example I created a height constrait for the textView on the storyboard and changed its value according to the height of the text. I also made sure that the height of the imageView is always the same as the textView, using constraints. If you want you can do all this by the code.

If you happen to implement a list with multiple messages, you can adapt the idea to use Uitableviewcell or better yet, use one of several libraries for this purpose, such as https://github.com/jessesquires/JSQMessagesViewController