2009-10-07 5 views
4

Mon affichage iPhone ajoute des boutons personnalisés à sa barre d'outils. Chaque bouton possède à la fois une image et le titre textuel, et est créé comme ceci:UIToolbar UIBarButtonItem avec l'image et le titre a un texte très sombre

UIBarButtonItem *fooButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"foo.png"] style:UIBarButtonItemStylePlain target:self action:@selector(fooButtonPressed:)]; 
[email protected]"Foo"; 

affiche très faible texte est le titre; on dirait qu'il a un alpha d'environ 0,5. Si j'utilise le barStyle UIToolBar par défaut, je ne peux pas lire le texte du tout. Lorsque j'utilise UIBarStyleBlack, je peux lire le texte mais il semble toujours très sombre. J'ai également essayé initWithTitle, puis définir la propriété d'image;

les résultats sont identiques.

Existe-t-il un moyen d'éclaircir le texte? J'espère avoir un look similaire à un UITabBar dont les objets ont à la fois une image et un titre.

Merci pour l'aide!

+0

Avez-vous essayé de changer la couleur du texte? –

Répondre

7

J'essayais d'utiliser UIBarButtonItem pour afficher à la fois une image et un bouton, mais je suis sûr qu'il est verrouillé pour afficher l'un ou l'autre. En utilisant l'idée de base de this thread je suis venu avec une solution en utilisant un UIButton et une image de fond. Le plus gros défaut de ce que j'ai fait est que lorsque le texte du titre varie beaucoup en taille, l'image d'arrière-plan s'étire, ce qui fait que les coins arrondis ont l'air un peu plus petits.

CustomBarButtonItem.h

#import <UIKit/UIKit.h> 


@interface CustomBarButtonItem : UIBarButtonItem {} 

- (id) initWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action; 

@end 


@interface UIBarButtonItem (CustomBarButtonItem) 

+ (UIBarButtonItem *) barButtonItemWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action; 

@end 

CustomBarButtonItem.m

#import "CustomBarButtonItem.h" 


@implementation CustomBarButtonItem 

- (id) initWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action { 

    UIButton *barButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
    UIFont *font = [UIFont boldSystemFontOfSize:13]; 
    barButton.titleLabel.font = font; 
    barButton.titleLabel.shadowOffset = CGSizeMake(0, -1); 
    barButton.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 5); 
    [barButton setImage:image forState:UIControlStateNormal]; 
    [barButton setTitle:title forState:UIControlStateNormal]; 
    [barButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; 
    [barButton setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted]; 
    [barButton setTitleShadowColor:[[UIColor blackColor] colorWithAlphaComponent:0.5] forState:UIControlStateNormal]; 
    [barButton setBackgroundImage:[UIImage imageNamed:@"bar-button-item-background.png"] forState:UIControlStateNormal]; 
    barButton.frame = CGRectMake(0, 0, image.size.width + 15 + [title sizeWithFont:font].width, 30); 

    if (self = [super initWithCustomView:barButton]) { 
     self.target = target; 
     self.action = action; 
    } 

    return self; 
} 

@end 


@implementation UIBarButtonItem (CustomBarButtonItem) 

+ (UIBarButtonItem *) barButtonItemWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action { 
    return [[[CustomBarButtonItem alloc] initWithImage:image title:title target:target action:action] autorelease]; 
} 

@end 

Exemple d'utilisation:

UIBarButtonItem *customButtonItem = [UIBarButtonItem barButtonItemWithImage:[UIImage imageNamed:@"calendar.png"] title:@"Add to calendar" target:self action:@selector(addToCalendar)]; 

Mon image d'arrière-plan du bouton est:

alt text

+3

Cela aide vraiment l'étirement: UIImage * bImage = [UIImage imageNamed: @ "bar-bouton-élément-arrière-plan.png "]; UIImage * sbImage = [bImage stretchableImageWithLeftCapWidth: 23 topCapHeight: 0]; // l'utiliser pour l'arrière-plan –

+0

Une idée de comment mettre une bordure comme un bouton normal? Seulement avec une image? –

+0

@CarlosRicardo que voulez-vous dire? par une "bordure comme un bouton régulier"? Que voulez-vous exactement? – Johnus

2

La solution de Johnus est très utile. Mais je l'ai essayé et un petit problème survenu: l'action n'a pas été envoyé au bouton de la barre élément, donc je l'ai modifié initialiseur un peu:

- (id) initWithImage:(UIImage *)image title:(NSString *)title target:(id)target action:(SEL)action { 

    UIButton *barButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
    UIFont *font = [UIFont boldSystemFontOfSize:13]; 
    barButton.titleLabel.font = font; 
    barButton.titleLabel.shadowOffset = CGSizeMake(0, -1); 
    barButton.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 5); 
    [barButton setImage:image forState:UIControlStateNormal]; 
    [barButton setTitle:title forState:UIControlStateNormal]; 
    [barButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; 
    [barButton setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted]; 
    [barButton setTitleShadowColor:[[UIColor blackColor] colorWithAlphaComponent:0.5] forState:UIControlStateNormal]; 
    [barButton setBackgroundImage:[UIImage imageNamed:@"bar-button-item-background.png"] forState:UIControlStateNormal]; 
    barButton.frame = CGRectMake(0, 0, image.size.width + 15 + [title sizeWithFont:font].width, 30); 

    if (self = [super initWithCustomView:barButton]) { 
     self.target = target; 
     self.action = action; 
     // I've added just one line of code here 
     [barButton addTarget:target 
         action:action 
      forControlEvents:UIControlEventTouchUpInside]; 
    } 

    return self; 
} 
0

Les réponses sont ici bien , cependant il est souvent un peu plus facile à utiliser composition plutôt que héritage avec les classes UIKit.

Créer un élément de barre comme ceci:

_accountBarItem = 
    [[UIBarButtonItem alloc] initWithCustomView:[CustomerBarView buttonWithImage: 
    [UIImage imageNamed:@"Account.png"] text:@"Account"]]; 
[_accountBarItem setTarget:self]; 
[_accountBarItem setAction:@selector(accountButtonPressed)]; 

mise en œuvre de vue personnalisée avec l'image et l'étiquette

@implementation CustomBarView 

+ (instancetype)buttonWithImage:(UIImage*)image text:(NSString*)text 
{ 
    CustomBarView* button = [[CustomBarView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)]; 
    [button setText:text]; 
    [button setImage:image]; 
    return button; 
} 


- (id)initWithFrame:(CGRect)frame 
{ 
    self = [super initWithFrame:frame]; 
    if (self) 
    { 
     _uiButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
     [self addSubview:_uiButton]; 

     _label = [[UILabel alloc] initWithFrame:CGRectZero]; 
     [_label setTextColor:[UIColor whiteColor]]; 
     [_label setFont:[UIFont boldApplicationFontOfSize:9]]; 
     [_label setBackgroundColor:[UIColor clearColor]]; 
     [_label setTextAlignment:NSTextAlignmentCenter]; 
     [self addSubview:_label]; 
    } 
    return self; 
} 


- (void)setText:(NSString*)text 
{ 
    [_label setText:text]; 
} 

- (void)setImage:(UIImage*)image 
{ 
    [_uiButton setImage:image forState:UIControlStateNormal]; 
} 




- (void)layoutSubviews 
{ 
    [super layoutSubviews]; 
    [_uiButton setFrame:self.bounds]; 
    [_label setFrame:CGRectMake(2, self.height - 13, self.width - 4, 15)]; 
} 

@end 
+0

Cela n'a pas fonctionné pour moi.J'ai obtenu une image mais pas de texte, et l'action ne s'est pas déclenchée quand le bouton a été tapé. – spstanley

Questions connexes