UI Creation for ipad

Question

I want to create the following UIView in my app. Please give the suggestion... I can create the UITextView and UIImageView separately. But In that image, Text is placed under the image. How to create this type of UI. Please guide me.. !

Thanks All

Answer 1

You have 2 options:

1) Using a UIWebView. That will allow you to easily achieve this but you might have problems on autorotation since UIWebView automatically scales your text when you make it's frame larger (which you would when you move to landscape) .

2) Or you can place 2 textViews - one of them on the left side of the picture and the other beneath the picture. In order to calculate what string fits in the first textView and what string is left for the second one you should take a look at this.

I recently tried the second way and although there's a small bug in those methods ( doesn't care for words , it splits the words by characters ) , the results were pretty good.

Answer 2

A possible solution could be using a Webview to show text as html and embed an image properly placed on right side.

If you want to use UIImageView separately (for other reasons, for example - with gesture recognizer, or easy image updating) - then you can create an empty floating space , and add imageview as a subview to webview.

for example:

[webView loadHTMLString:
        [NSString stringWithFormat:"<style type=\"text/css\"><font face=\"Helvetica\" color=\"white\">"
        "<style> #buttons {float: right; width: 150px; height:100px;}</style>"
        "<div style=\"float:right;5px;top:1px;display:inline-table; position:relative; "
        "width: 150px; height: 100px;\"><div style=\"float:right;right:170px;top:4px;display:inline-table; "
        "position:relative; left:-8px; color: #fff; font-size: 13px;\"><p></p></div></p></div>"
        "%@</font><div></body>", @"text that will show up around image" baseURL:nil];

will fill webview with text (@"text that will show up around image") and leave an empty space for UIImageView.

Answer 3

If it is the same piece of text that should flow around the image you can use CoreText to create a custom shaped TextView. When trying something similar myself I found this StackOverflow post to be a good starting point: https://stackoverflow.com/a/5284707/785716