In this post, we're going to continue walking through the UI, getting it to look as much like the android version as we can. One of the things we just did was to set the "English" label to "clear". This results in UI that looks like this:



Ok, we need to slice off that raggedy edge. Let's use gimp to just crop that - tools, transform, crop.

That's better. And we still keep the rough edges on the top and bottom for that ragged look and feel.




So, clearly the button stands out. So we want to make it clear, no I don't think so. What did we do with the Android version?

Ok, it's semi-transparent, with border.

Hm, running out of space, only 914.1 mb left on the "start" hard drive. Empty the trash - now 14G. That'll do for now. It still seems like not much space.

Anyway - how do we make the button look better, like it fits the background? What I did in the android app was to just make it semi-transparent, I think. No, if I change the alph to like 50, it fades the font, too, and we dont' want that. Ok, maybe I just should set the background color to something. Let's just try brown for now.

Well, on the interface builder, you only get the circle-like thing which only lets you pick a color without knowing the rgb value as far as I know, and if there's one thing I want to know, it's the rgb color. Maybe there's a way, but you can't just pick "brown". So, I'll set it in the code.

So, here are the outlets:

IBOutlet UIButton *quizButton;
IBOutlet UIButton *settingsButton;

Ok, now, let's set it in the viewDidLoad.

[quizButton setBackgroundColor: [UIColor brownColor]];

Well, no. Doesn't work. According to SO:

I assume you're talking about a UIButton with UIButtonTypeRoundedRect? You can't change the background color of that. When you try changing it's background color you're rather changing the color of the rect the button is drawn on (which is usually clear). So there are two ways to go. Either you subclass UIButton and overwrite its -drawRect: method or you create images for the different button states (which is perfectly fine to do).

So, it's inherited from the rect. Ugh, I don't want to deal with creating images for this.

However, the same thread has a suggestion:

loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
[loginButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
loginButton.backgroundColor = [UIColor whiteColor];
loginButton.layer.borderColor = [UIColor blackColor].CGColor;
loginButton.layer.borderWidth = 0.5f;
loginButton.layer.cornerRadius = 10.0f;


edit: of course, you'd have to #import

No, doesn't work.

Ok, what the next trip up my sleeve? Arduously create the images? Subclass UIButton? Let's look at the nib again.

Nope, that only affects the corners.

Well, I could get into gimp, and just create a single image. How big would it have to be? Does it make a difference? I don't care about the various states, I just can use one image for them all. But, if I instantiate it, does it replace the instantiation of the button on the nib?

I just ran across a post for setting the font color, which looks like it might also not be trivial:

[myButton setTitleColor:[UIColor colorWithRed:100.0 green:100.0 blue:100 alpha:1.0] forState: UIControlStateNormal];


Nope. That doesn't work either. Man.

Oh, my question is, what is the impact of the button already being on the nib?

Let's try this code:

UIButton button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self
action:@selector(aMethod:)
forControlEvents:UIControlEventTouchDown];
[button setTitle:@"Show View" forState:UIControlStateNormal];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[view addSubview:button];

What is the view in my case?

Ok, forget all this. I will just throw any old view in there now.

[settingsButton setBackgroundImage:[UIImage imageNamed:@"blossoms.png"] forState:UIControlStateNormal];
[settingsButton setBackgroundImage:[UIImage imageNamed:@"blossoms.png"] forState:UIControlStateDisabled];
[settingsButton setBackgroundImage:[UIImage imageNamed:@"blossoms.png"] forState:UIControlStateHighlighted];

Good Lord. Even this buys me nothing.

Here's more saying use the image:

Use setImage:forState:

- (void)setImage:(UIImage *)image forState:(UIControlState)state

Also, don't forget to create your button with [UIButton buttonWithType:UIButtonTypeCustom]

Ok, maybe I just need to try that last piece.

settingsButton = [UIButton buttonWithType:UIButtonTypeCustom];

[settingsButton setBackgroundImage:[UIImage imageNamed:@"plum_blossoms.png"] forState:UIControlStateNormal];
[settingsButton setBackgroundImage:[UIImage imageNamed:@"plum_blossoms.png"] forState:UIControlStateDisabled];
[settingsButton setBackgroundImage:[UIImage imageNamed:@"plum_blossoms.png"] forState:UIControlStateHighlighted];

Nope. Ok, it looks like I'm going to have to create this programmatically i I am to do any customization. Well, this is something I'll need to learn anyway.

So, here's something from SO:

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self
action:@selector(aMethod:)
forControlEvents:UIControlEventTouchDown];
[button setTitle:@"Show View" forState:UIControlStateNormal];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[view addSubview:button];

Still nothing. Sigh. This is turning into a real hassle. Maybe it's in the wrong method? How about viewWillAppear? No, it's successfully loading the background image.

Ah - at last. This code does something:

UIButton * btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btn.frame = CGRectMake(0, 0, 100, 50);
[btn setTitle:@"Hello, world!" forState:UIControlStateNormal];
[self.view addSubview:btn];

And you can see it below:



I think it was the self.view that made the difference.

But, as has been noted before, it's not so simple:

if you want to change the background color of a UIButton you have to use UIButtonTypeCustom type instead of UIButtonTypeRoundedRect

But, if I do this:

UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(0, 0, 100, 50);
btn.backgroundColor = [UIColor brownColor];

[btn setTitle:@"Hello, world!" forState:UIControlStateNormal];
[self.view addSubview:btn];

I don't get the rounded rectangle! Oy vey - I really should give up on all this customizing.

So, now we're struggling. I will need to create a rounded rec image, won't I?

Wait, there's something else I can try:

from http://stackoverflow.com/questions/372731/how-can-i-set-a-button-background-color-on-iphone

downloadButton = [[UIButton alloc] initWithFrame:CGRectMake(36, 212, 247, 37)];

downloadButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
downloadButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

[downloadButton setTitle:NSLocalizedStringFromTable(@"Download", @"Localized", nil) forState:UIControlStateNormal];
[downloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[downloadButton setFont:[UIFont boldSystemFontOfSize:14.0]];

UIImage *newImage = [[UIImage imageNamed:@"greenButton.png"] stretchableImageWithLeftCapWidth:12.0f topCapHeight:0.0f];
[downloadButton setBackgroundImage:newImage forState:UIControlStateNormal];

[downloadButton addTarget:self action:@selector(downloadNewItem) forControlEvents:UIControlEventTouchDown];

downloadButton.backgroundColor = [UIColor clearColor];
[downloadDisplayView addSubview:downloadButton];

Well, this is still using an image - which I think all I need is a rounded rec image.

Ok in the same thread, this is recommended to create buttons:

https://github.com/dermdaly/ButtonMaker

Ok, let's download this app.

Ok, it doesn't run - it looks like it needs some frameworks and a target.

How to had frameworks?

http://stackoverflow.com/questions/3352664/how-to-add-existing-frameworks-in-xcode-4

Here's how:

In the project navigator, select your project
Select your target
Select the 'Build Phases' tab
Open 'Link Binaries With Libraries' expander
Click the '+' button
Select your framework
(optional) Drag and drop the added framework to the 'Frameworks' grou


Well, I can't find the target, or if I do, I dont' see any "build phases" tab.

Well, how about the "selected run destination is not valid for this action"?


On SO, the answer is this:

I had that issue several times. Basically, just set the SDK to MacOS X 10.6 and it should work properly

So, how to you set the base sdk?

Ah there it is, under "product" , you have to select "project", and you'll see the build settings tab.

Ah, good - it ran, but couldn't find a couple of frameworks. How to add them?

Let's try this again:

In the project navigator, select your project
Select your target
Select the 'Build Phases' tab
Open 'Link Binaries With Libraries' expander
Click the '+' button
Select your framework
(optional) Drag and drop the added framework to the 'Frameworks' group

Ah, there's target - got it. It underneath "project":



What? My CoreGraphics.foundation and UIkit.foundation aren't found? Doesn't make sense. Finder can't find s**t.

Well, if I go to another project, I can find those to, And make a reference (not copy) using this technique from SO, the same thead:

Ok, I finally did it, as follows: 1) In the "project navigator", open the "frameworks" folder and select one the existing frameworks (e.g. UIKit.framework) 2) Right click and select "Show in Finder" from the menu 3) From the newly opened folder in the finder, drag the framework folder you are interested in (e.g. OpenGLES.framework) into the "frameworks" folder in XCode 4) Be sure not to "copy items into destination's group folder" 5) Choosing "Create groups for any added folders" seems to make it –

And now XCode is hung. I give. Downloading that project was a rathole. Probably due to the new xcode version.

Ok, let's just grab a rounded reg from the net, and change the color. I'll pick this up in the next post.