1

Looks like it's a common trend in apps to provide a user with user name and password boxes that are presented as two rows in a round corner box. How do they do that? Custom drawing? Seems like way too many apps and way too close look and feel to be custom drawing but...

enter image description here enter image description here

jscs
  • 63,694
  • 13
  • 151
  • 195
Schultz9999
  • 8,717
  • 8
  • 48
  • 87
  • "They" don't. You can either use a background image to place behind two separate `UITextFields` or use a `UITableView` with `UITableViewStyleGrouped`. – Fogmeister Aug 28 '13 at 16:54
  • @Fogmeister So it's a table with two editable rows? – Schultz9999 Aug 28 '13 at 16:55
  • Magic. It's always magic. – Kevin Aug 28 '13 at 16:56
  • You can use either. The easiest way I've found is to have a UIImageView with the background image and then place the two separate `UITextField` over it in the correct place. This makes it easier to do and customise. – Fogmeister Aug 28 '13 at 16:56
  • @Fogmeister With images one has to deal with resizing and retina, which makes it a bit messy. – Schultz9999 Aug 28 '13 at 16:58
  • I'd rather deal with resizing and retina than with table view delegates, datasources, storing and populating text fields, etc... – Fogmeister Aug 28 '13 at 17:02

2 Answers2

2

The developers used a UITableView that is grouped. Here is a previous question that had the answer.... Hope this helps!

Community
  • 1
  • 1
Abdullah Shafique
  • 6,878
  • 8
  • 35
  • 70
  • Ah! That's right. My question is a dup of that one. – Schultz9999 Aug 28 '13 at 16:56
  • Yeah, I've used this method too. It's tricker to customise but works just as well :) – Fogmeister Aug 28 '13 at 16:57
  • You probably wouldn't want your login screen to be a table view (since a login form is not tabular data). I would imagine Amazon's is not a table view from the appearance. – Brian Nickel Aug 28 '13 at 17:15
  • @Fogmeister I followed the provided example. One thing that I am struggling with is the font size. I can't make it bigger or smaller. I can change cell height and text box height but font remains the same. Why is textField.font = [UIFont fontWith...] ignored? And I am using accessoryView approach. – Schultz9999 Aug 28 '13 at 22:35
  • Can you put some code (i.e. cellForRowAtIndexPath) in your question. I'll take a look. – Fogmeister Aug 29 '13 at 06:40
2

The best in this case is to use two textfields with no border style. Behind the two textfields, you have an UIImageView, with your custom image of the text boxes. This lets you have any kind of design for your textboxes

example of a login box I use:

textfield background

Just overlay your textfields, set your placeholders for the light gray text, and you're good to go

Update: The previous method assumes that your design phase precedes the development phase, therefore you design your assets once and you're good to go. If you're looking for a way to play with resizing , you can define a stretchable image for the outside border, soemthing like:

UIEdgeInsets insets = UIEdgeInsetsMake(10,10,10,10);
image = [image resizableImageWithCapInsets:insets];

Then, all you do is to draw the corners really, the rest stretches. You probably then have to add a line for the middle separator separately. Not as clean as one defined asset for the box, but easier for experimenting.

JP Hribovsek
  • 6,707
  • 2
  • 21
  • 26
  • This is the one I'd recommend. Easier to manage and customise. – Fogmeister Aug 28 '13 at 16:57
  • As I commented above, with images one has to deal with resizing and retina, which makes it a bit messy. – Schultz9999 Aug 28 '13 at 16:59
  • messy?! deal with retina?! ummm... integrating assets and deal with retina is pretty much the daily routine of an iOS developer :-) If you want custom look and feel, you will have to deal with images, and if you deal with images, you will have to deal with retina, nothing messy there. Not sure what you would rather do, you can code the drawing if you're allergic to images, but I can't see that being a "better" solution – JP Hribovsek Aug 28 '13 at 17:02
  • @JPHribovsek No argument here - 2 images and good to go. One problem is just at early stage when a lot of things are flux it takes time to keep resizing every image like this one back and forth in two copies. – Schultz9999 Aug 28 '13 at 17:05
  • no, no argument. what you will want to do if you're playing with resizing a lot, for this kind of symmetrical images, is to define your image as a stretchable image with cap insets. that way, you can resize the thing as you wish without having to redesign anything. – JP Hribovsek Aug 28 '13 at 17:07