replicating the Facebook using three20 TTButtonBar, iOS

Question

I was looking to replicate the button grid bar that Facebook uses in their app here:

The left button is unpressed, the right is pressed.

I'm having trouble replicated the "pushed" button status. Can anyone help? Here is what I've got so far:

I'm pretty satisfied with most of it. Just gotta brush up the sizes of the buttons but that's trivial. On my toolbar, the left button is supposed to be pushed and the right isn't. Clearly I'm missing that drop shadow on the top that Facebook implements in there's. How can I replicate this? I was thinking of using TTInnerShadowStyle but couldn't seem to get it right. here is the code that generates the style for each button:

UIColor *gradientFill1 = RGBCOLOR(249, 250, 252),*gradientFill2 = RGBCOLOR(225, 228, 235);

if (state != UIControlStateNormal) {
    gradientFill1 = RGBCOLOR(233, 234, 237);
    gradientFill2 = RGBCOLOR(214, 217, 223);
}

TTStyle *style= [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:3] next:
        [TTInsetStyle styleWithInset:UIEdgeInsetsMake(1, 0, 1, 0) next:
         [TTLinearGradientBorderStyle styleWithColor1:RGBCOLOR(140, 144, 150)
                                               color2:RGBCOLOR(175, 179, 186) width:0.5 next:
         [TTLinearGradientBorderStyle styleWithColor1:RGBCOLOR(184, 186, 192)
                                               color2:RGBCOLOR(208, 212, 218) width:0.5 next:
            [TTLinearGradientFillStyle styleWithColor1:gradientFill1
                                              color2:gradientFill2 next:
             [TTShadowStyle styleWithColor:RGBACOLOR(253,254,254,1.0) blur:0
                                  offset:CGSizeMake(0, 1) next:
              [TTImageStyle styleWithImageURL:nil defaultImage:nil
                              contentMode:UIViewContentModeScaleToFill
                                       size:CGSizeZero next:
               [TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:12.0f]
                                color:RGBCOLOR(81, 91, 120)
                            shadowColor:nil
                         shadowOffset:CGSizeMake(0, 0) next:nil]]]]]]]];


return style;

Any help would be greatly appreciated. Thanks!

Answer 1

Indeed your code renders a little strange when adding TTInnerShadowStyle. But that seems to by caused by your double border style.

If I insert an inner shadow after the fill and then move the both gradient borders be hide the inner shadow, it looks exactly as expected. The inner lighter border looks misplaced.

I would recommend to use a combination of the "Chiseled button" and the "Inner shadow" examples from TTCatalog. It might look like this:

[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:3] next:
[TTShadowStyle styleWithColor:RGBACOLOR(255,255,255,0.9) blur:1
                       offset:CGSizeMake(0, 1) next:
[TTLinearGradientFillStyle styleWithColor1:gradientFill1
                           color2:gradientFill2 next:
[TTInnerShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.7) blur:7
                            offset:CGSizeMake(0, 0) next:
[TTSolidBorderStyle styleWithColor:black width:1 next:
[TTImageStyle styleWithImageURL:nil defaultImage:nil
                    contentMode:UIViewContentModeScaleToFill
                           size:CGSizeZero next:                      
[TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:12.0f]
                     color:RGBCOLOR(81, 91, 120)
               shadowColor:nil
              shadowOffset:CGSizeMake(0, 0) next:nil]]]]]]]

For the normal state just set the inner shadow color to transparent, or conditionally avoid the inner shadow completely.