CODEWITHSUNDEEP
iosobjective-cuiimageviewuiimageuitextview
Jordan H
Jordan H

Reputation: 55745

How to display image in UITextView like Mail and keep it centered

In Mail, it's possible to read an email which is paragraphs of text followed by an image that takes up the entire width, followed by more text. I would like to do the exact same thing in my app (read-only text view), except I want to restrict it to not fill the entire width but always remain centered on screen (even after rotation). I've coded a solution, but I'm not sure how to center the image, or perhaps there's a cleaner/better approach than what I've done.

I added a UIImage at the end of the text in my UITextView via NSMutableAttributedString. I first had to resize the image, and to do that I'm using a UIImage category someone shared that will resize the image, not degrade the image quality (terribly bad), and preserve the aspect ratio.

    NSMutableAttributedString *mutableAttString = [[NSMutableAttributedString alloc] initWithString:self.textView.text];
    UIImage *image = [UIImage imageNamed:@"myImage"];

    CGSize newSize = CGSizeMake(self.textView.frame.size.width, self.textView.frame.size.height);

    //resize image to fit scren width using category
    image = [image resizedImageWithContentMode:UIViewContentModeScaleAspectFit bounds:newSize interpolationQuality:kCGInterpolationHigh];

    NSTextAttachment *textAttachment = [NSTextAttachment new];
    textAttachment.image = image;
    textAttachment.bounds = CGRectMake(0,-5, image.size.width, image.size.height);
    NSAttributedString *attributedString = [NSAttributedString attributedStringWithAttachment:textAttachment];

    [mutableAttString insertAttributedString:attributedString atIndex:(self.textView.text.length)];

    self.textView.attributedText = mutableAttString;

I'm not liking this solution because the image is not centered on screen, and it would be nice if I could again adjust the image scale upon rotating to and from landscape. At the moment, it's always the same size. And I don't want to use this category. :)

Another approach I thought of taking would be to not add the image to the textView at all, but instead find some way to dynamically adjust the height of the textView based on the content then add a UIImageView underneath the textView and keep it centered horizontally using Auto Layout. That wouldn't be the the most flexible solution but that's my layout - paragraphs of text with an image underneath and nothing else, so I'd be willing to do that.

I was just wondering, how did Apple do it for Mail? What do you suggest?

enter image description here

Upvotes: 1

Views: 1018

Answers (2)

Jordan H
Jordan H

Reputation: 55745

I implemented a solution where some text lies above an image. It's not flexible like Mail but it will work for my situation.

I created a UITableViewController with one static custom cell in one section. In that cell lies a UITextView set up with Auto Layout to always be the size of the cell. I then dragged in a UIImageView underneath the table and set its mode to Aspect Fit and inputted an image name. In heightForCellAtIndexPath: I calculate the height that would be required to fit all of the text by calling sizeToFit on the textView then return self.cellTextView.frame.size.height; And of course I tweaked the cell background color and got rid of separator lines so you cannot tell it's in a table.

This is great because the image stays centered and is always underneath the text, and the entire view is scrollable. Luckily, upon rotating the device heightForCellAtIndexPath: is called so it's always the correct height. If you want additional padding underneath the text, simply add it to the calculated UITextView height.

Upvotes: 1

Satendra dagar
Satendra dagar

Reputation: 524

1.You may use attributed string to keep the attachment into the textview.Once inserted just set the frame of the attachment.

OR 2. You can use a table view which has dynamic cells containig the image and text and set their height according to cell content .

Upvotes: 1

Related Questions