Search code examples
objective-cuibuttonthree20

Three20: Image located above text within TTButton using TTStyles


I'm trying to style a TTButton to appear like the following:

http://tinypic.com/r/29c3oyh/6

You'll notice that the image and the text are both center aligned within the TTButton and that the image is above the text. No matter what combination of TTBoxStyle and ordering, I can't seem to get the correct alignment of both the image and text simultaneously.

- (TTStyle*)happyfaceIcon:(UIControlState)state {
return [TTImageStyle styleWithImageURL:nil defaultImage:nil contentMode:UIViewContentModeCenter size:CGSizeMake(40, 40) next:
        [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(0, 20, 0, 0) next:nil]];
}

- (TTStyle*)happyfaceButton:(UIControlState)state {
return [TTShapeStyle styleWithShape:[TTRectangleShape shape] next:
        [TTSolidBorderStyle styleWithColor:[UIColor blackColor] width:1 next:
         [TTSolidFillStyle styleWithColor:[UIColor grayColor] next:
          [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(45, 2, 5, 2) next:
           [TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:10]
                                color:[UIColor blackColor] textAlignment:UITextAlignmentCenter next:
            [TTPartStyle styleWithName:@"image" style:TTSTYLESTATE(happyfaceIcon:, state) next: nil
             ]]]]]];
}

Solution

  • Well it seems that it was pretty straight forward. I just had to look at the TTLauncherButton to see the answer.

    Basically TTButton property isVertical = YES cleared all the issues.

    Here's my final style as well if anyone is interested

    - (TTStyle*)shortcutIcon:(UIControlState)state {
    TTStyle* style =
    [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(-7, 0, 11, 0) next:
      [TTImageStyle styleWithImageURL:nil defaultImage:nil contentMode:UIViewContentModeCenter
                                 size:CGSizeZero next:nil]];
    
    if (state == UIControlStateHighlighted || state == UIControlStateSelected) {
        [style addStyle:
         [TTBlendStyle styleWithBlend:kCGBlendModeSourceAtop next:
          [TTSolidFillStyle styleWithColor:RGBACOLOR(0,0,0,0.5) next:nil]]];
    }
    
    return style;
    }
    
    - (TTStyle*)shortcutButton:(UIControlState)state {
    return
    [TTPartStyle styleWithName:@"image" style:TTSTYLESTATE(shortcutIcon:, state) next:
     [TTTextStyle styleWithFont:[UIFont fontWithName:@"Frutiger-Light" size:15] color:TTSTYLEVAR(shortcutTextColor)
                minimumFontSize:11 shadowColor:nil
                   shadowOffset:CGSizeZero next:nil]];
    }