UI Improvements

Question

since my app is finished (enough) I'm starting to implement the UI changes that (hopefully would) make it all pretty.

I sent the original screens to a friend who knows his ways around photoshop and he's been sending me back his ideas and proposals.

I've been able to implement most of them in my app which is pretty cool. We've learned a few good tricks and procedures on the Apprentice tutorials to make these changes, but now I'm facing something I don't know exactly how to deal with.

My question is about the possibility to go from this:

Original screen:

enter image description here

to this:

Designer's proposal:

enter image description here

I'm guessing it is possible but I wouldn't know where to start. I tried looking for background options on the UITable but I didn't find anything to make it even similar.

This is the only screen giving me a hard time on my simple app.

If you have any ideas or recommendations they'd greatly appreciated.

Thanks in advanced,

And a dilemma is between two choices, not three... but I don't think that's the sort of advice you are looking for =) — jrturton, Feb 13 '12 at 16:23
@jrturton: it could be two or more. There are many definitions and contexts. Thanks anyway. — Juan González, Feb 13 '12 at 18:54

score 1 · Answer 1 · answered Feb 13 '12 at 16:10

1

Background for UITableView? Make it transparent and put image under table.

answered Feb 13 '12 at 16:10

NeverBe

5,213
2
25
39

Thanks. Pretty simple after all. Good advise. – Juan González Feb 14 '12 at 08:20

score 1 · Accepted Answer · answered Feb 13 '12 at 16:19

1

You could do something along these lines for the background.

        self.myTableView.backgroundColor = [UIColor clearColor];

and then simply add the image behind the the table in interface builder, or you could cut out the middle man and use this...

    self.myTableView.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myImage.jpg"]];

answered Feb 13 '12 at 16:19

Mick MacCallum

129,200
40
280
281

Awesome. I got a lot of good suggestions but this one was the simplest. Straightforward and effective. Thanks a lot. – Juan González Feb 14 '12 at 08:18

score 1 · Answer 3 · answered Feb 13 '12 at 16:23

1

Place the three text fields directly into a UIView with the wood grain/instructions as a background image. Adjust the field frames until they line up.

answered Feb 13 '12 at 16:23

colbadhombre

803
8
11

I thought about it at some point. I even tried it at early stages of the app but I came across two things that made me change my mind: 1) Only using tables (as far as I know which is not too far) I can make the screen "adapts" when the keyboard comes along in the little iPhone screen. Landscape and three fields is enough to fill the screen and using the table makes the screen adapts (going up) when the keyboard appears. 2) I use a method to make the keyboard go away when the user taps anywhere outside the field and I think I won't be able to use it anymore. – Juan González Feb 13 '12 at 18:56
Number one is a good point. Two can be solved by putting a listener on the parent UIView. I think I remember some way to solve one. I'll have to look around to see if I can find it. – colbadhombre Feb 13 '12 at 19:48
Here is what I was looking for: http://stackoverflow.com/questions/1775860/uitextfield-move-view-when-keyboard-appears – colbadhombre Feb 13 '12 at 19:49

UI Improvements

3 Answers3