replicating the Facebook using three20 TTButtonBar, iOS

Question

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

enter image description 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:

enter image description here

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!

score 1 · Accepted Answer · answered Feb 12 '12 at 20:26

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.

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

What you could do is going the direct way and implement the inner shadow effect you are after though CoreGraphics. Have a look at this S.O. page.

edited May 23 '17 at 10:32

Community

1
1

answered Feb 11 '12 at 19:07

sergio

68,819
11
102
123

thanks this could work. I was looking for a way to get it done while still using `TTButtonBar` and not having to add more code than needed. Wondering now if that was my pitfall. – ecbtln Feb 11 '12 at 20:47

replicating the Facebook using three20 TTButtonBar, iOS

2 Answers2