devedup.com » Interface Builder http://blog.devedup.com Sun, 09 Oct 2011 16:00:41 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 iPhone: UITextView with rounded edges (to look like a UITextField) http://blog.devedup.com/index.php/2010/06/06/iphone-uitextview-with-rounded-edges-to-look-like-a-uitextfield/ http://blog.devedup.com/index.php/2010/06/06/iphone-uitextview-with-rounded-edges-to-look-like-a-uitextfield/#comments Sun, 06 Jun 2010 19:31:39 +0000 admin http://blog.devedup.com/?p=226 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

    ]]> http://blog.devedup.com/index.php/2010/06/06/iphone-uitextview-with-rounded-edges-to-look-like-a-uitextfield/feed/ 4