如何让UIBarButtonItem同时显示图片和文字

我们无法在storyboard里,为UIBarButtonItem设置图片+文字,但在代码里,我们可以实现。


  1. 自定义一个控件,用于初始化UIBarButtonItem

 这里我们只需简单创建一个带图片+文字的UIButton即可,以下示例代码都写在viewDidLoad方法内:

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.backgroundColor = [UIColor grayColor]; //加上背景颜色,方便观察Button的大小
    
    //设置图片
    UIImage *imageForButton = [UIImage imageNamed:@"oicon_01"];
    [button setImage:imageForButton forState:UIControlStateNormal];
    
    //设置文字
    NSString *buttonTitleStr = @"Hello!!!";
    [button setTitle:buttonTitleStr forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:15];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
       
    button.frame = CGRectMake(0, 0 , 100, 100);   //#1#硬编码设置UIButton位置、大小


2.使用我们的自定义控件创建UIbarButtonItem

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

3.设置NavigationController的navigationItem

self.navigationItem.leftBarButtonItem = barButtonItem;


运行程序后效果如下:

wKiom1XMOF3QP5xYAABybc6ta7g383.jpg

可以看到代码中设置Button的尺寸,明显比容纳图片和文字所需的实际尺寸大得多。你也可以通过不断修改数字、运行程序查看效果的方式找到最佳尺寸。但这里我们有更灵活的方式。


按钮的宽 = 图片的宽+文字的宽;

按钮的高 = 图片的高;


将注释#1#的代码替换为以下代码:

CGSize buttonTitleLabelSize = [buttonTitleStr sizeWithAttributes:@{NSFontAttributeName:button.titleLabel.font}]; //文本尺寸
    CGSize buttonImageSize = imageForButton.size;   //图片尺寸
    button.frame = CGRectMake(0,0,
                              buttonImageSize.width + buttonTitleLabelSize.width,
                              buttonImageSize.height);


运行效果如下:

wKioL1XMSW2DsDtXAAB_uQSJxQA902.jpg


你可能感兴趣的:(ios,UI,Navigation)