iOS Development by David Casserly

From the Blog

Jun
06

iPhone: UITextView with rounded edges (to look like a UITextField)

Posted by admin on June 6th, 2010 at 7:31 pm

UITextView has square edges, and looks ugly compared to a UITextField!

Screen shot 2010-06-06 at 20.22.29

Unfortunately, there isn’t an option to give the UITextView a nice border. There are various ways to do this, such as creating your own background image for the UITextView, but I have found a relatively easy way to do it – and one that anyone without photoshop skills can achieve.

I achieve it by placing a UITextField behind the UITextView. However, in InterfaceBuilder you can’t change the height of a UITextField, so you have to edit the .xib file in Text Edit to change its height.

Here are the steps you need to do:

  1. Add a UITextField to your View and put a UITextView on top of it.
  2. Decide on how high you want your UITextView and resize it.
  3. Give the UITextField a tag of 999 (or whatever you want) (hit CMD-1 to bring up the attributes inspector to do this).
  4. Save the .xib file and then right click the file > Open With > Other > TextEdit
  5. Search for your tag, 999, and in the same section of the xml you will see something like: {{25, 199}, {275, 31}} (see below)
  6. You need to change 31 to the same height as your UITextView and then save the .xib file in TextEdit
  7. When you return to IB it will tell you the document has been modified, click Revert
  8. You should now see a tall UITextField behind your UITextView. Make sure your UITextView has a transparent background!
  9. <object class="IBUITextField" id="154341485">
    	<reference key="NSNextResponder" ref="774585933"/>
    	<int key="NSvFlags">292</int>
    	<string key="NSFrame">{{25, 199}, {275, 31}}</string> THIS IS THE LINE THAT YOU NEED TO EDIT.... CHANGE 31 TO THE HEIGHT OF YOUR UITEXTVIEW
    	<reference key="NSSuperview" ref="774585933"/>
    	<reference key="IBUIBackgroundColor" ref="157267157"/>
    	<bool key="IBUIOpaque">NO</bool>
    	<bool key="IBUIClearsContextBeforeDrawing">NO</bool>
    	<int key="IBUITag">999</int>THIS IS THE TAG YOU CHOSE TO HELP YOU FIND THIS SECTION IN THE XIB FILE
    

    Here is my project if you need help seeing how I did it.

    xcodeProject

    Thanks

    Leave a Reply

    4 Responses to iPhone: UITextView with rounded edges (to look like a UITextField)

    1.  

      |

    2. I thought that I was going to go ahead and do something similar to this, and thought I might as well google it before I get into any hairy mess.. Lo and behold I find this article :] This was really helpful to me and saved me probably about 30 minutes of work, thanks a ton mate!

    3. Great!
      I was looking for a way to increase textField height for a long time… and that was really really helpfull! :)

      Thank you.

    DevedUp Ltd |Registered in England | Company No. 07671515

    Showcase Theme by MidPhase.