Wednesday, September 28, 2011

Getting the background down - UITable View

Today, we're going to add a title and some links and stuff to the cover page, and then take a snapshot of it and turn it into a splash page. I might also add a button for "credits" or something, because I think on the Android app, they made it too crowded.

So, here's what the start page looks like right now:



I think I'll just start out with taking a look at the Android app. The first one is a title, which says "JLPT Vocabulary Quiz". Ok, that's just adding a label. I also want to put the current JLPT level up in the title when you're taking the quiz. Here's how you do that:


self.title = @"JlptQuizApp";


So, I'll change that to "JLPT Vocab Quiz Level", plus the level.

So, what I want to do is append the level, which I can get from prefs, to that setting. How do you append to a string in Objective C? Well, I know it's an NSString, so, let's start with that.

From this thread:

http://forums.macrumors.com/showthread.php?t=467099

It looks like this is the recommended way:


NSMutableString *ms = [[NSMutableString alloc] initWithString:@"Hello"];
[ms appendString:@"World"];



Ok, great, it's working. Here's the code:

NSMutableString *myTitle = [[NSMutableString alloc] initWithString:@"JLPT Level "];

NSInteger jlptLevel = [Utils getJlptLevel];

NSString *jlptLevelStr = [NSString stringWithFormat:@"%d", jlptLevel];

[myTitle appendString:jlptLevelStr];

[myTitle appendString:@" Vocab Quiz"];

self.title = myTitle;



Next, we don't need the "back" navigation button. I already got rid of this somewhere.

Here it is:

- (void) viewWillAppear:(BOOL)animated{
self.navigationItem.hidesBackButton = YES;
}


Good - this page looks good now, at least in its current state:



Now, something tricker - the dreaded find the right color for the highlights. I don't like the default red and green - the seem to bright. I just want to spend a few minutes messing around with them to figure out a subtler shade. But, the only way to do that is to use rgb to set the color, which I'm not sure I can do yet. Let's see the code where we're current setting the color:

// setting the the selected cell as incorrect
UITableViewCell *incorrectCell = [tv cellForRowAtIndexPath:indexPath];
incorrectCell.backgroundColor = [UIColor redColor];




So, it's the UIColor class I should take a look at.

Ok, so this thread has some good suggestions:

http://stackoverflow.com/questions/1956587/how-do-i-make-my-own-custom-uicolors-other-than-the-preset-ones

I'm gonna try this one:

[UIColor colorWithRed:26.0f/255.0f green:131.0f/255.0f blue:32.0f/255.0f alpha:1.0f];



Ok, let's pick something from this handy url:

http://cloford.com/resources/colours/500col.htm

How about "orangered 1":

well, it's better, if I give an alpha of .5. But I just noticed there's some kind of color overlap in the margin. We'll tackle that later, let's just pick out the green color for now.

Let's try emrald green:


emeraldgreen emeraldgreen #00C957 0 201 87 5753088


Ok, here's what I ended up with:




Not bad, huh? If you look closely, there's a little bit of a different shade on the right and left side of the colored bars. I have no idea where that's from, but if I keep the alpha value relatively high, it's not really noticable.

Here's the ode:

if(result) {
NSLog (@"correct");
appState.correctAnswers++;
}
else {

NSLog (@"incorrect");

// setting the the selected cell as incorrect
UITableViewCell *incorrectCell = [tv cellForRowAtIndexPath:indexPath];

// colors from http://cloford.com/resources/colours/500col.htm

// brown1
incorrectCell.backgroundColor = [UIColor
colorWithRed:255.0f/255.0f
green:64.0f/255.0f
blue:64.0f/255.0f alpha:1.0f];


}


NSUInteger correctRow = [appState slotOfCorrectAnswer];

NSIndexPath *correctAnswerPath = [NSIndexPath indexPathForRow:correctRow inSection:0];

UITableViewCell *correctCell = [tv cellForRowAtIndexPath:correctAnswerPath];

// colors from http://cloford.com/resources/colours/500col.htm

// springgreen
correctCell.backgroundColor = [UIColor colorWithRed:0.0f/255.0f green:255.0f/255.0f blue:127.0f/255.0f alpha:.9f];

No comments:

Post a Comment