Как я могу иметь UIBarButtonItem с изображением и текстом?

Question

Когда я пытаюсь использовать изображение для UIBarButtonItem, текст не отображается.Есть ли способ показать как текст, так и изображение?

Answer 1

Вы можете инициировать UIBarButtonItem с пользовательским представлением, которое имеет как изображение, так и текст. Вот пример, который использует UIButton.

UIImage *chatImage = [UIImage imageNamed:@"08-chat.png"];

UIButton *chatButton = [UIButton buttonWithType:UIButtonTypeCustom];
[chatButton setBackgroundImage:chatImage forState:UIControlStateNormal];
[chatButton setTitle:@"Chat" forState:UIControlStateNormal];
chatButton.frame = (CGRect) {
    .size.width = 100,
    .size.height = 30,
};

UIBarButtonItem *barButton= [[[UIBarButtonItem alloc] initWithCustomView:chatButton] autorelease];
self.toolbar.items = [NSArray arrayWithObject:barButton];

Answer 2

Я предлагаю способ сделать это с помощью раскадровки:

1. Перетащите в панель инструментов обычного UIView. Он автоматически будет перенесен на элемент кнопки панели. Отрегулируйте ширину вида в «Инспекторе размеров». Измените цвет фона просмотра, чтобы очистить цвет.

2. Поместите UIButton и UILabel в представление. Вы можете использовать ограничения, чтобы скорректировать свои позиции. Также вы можете поместить их вне представления, например, немного выше или меньше (как на моей картинке). Положите изображения по умолчанию и выделенные изображения для UIButton.

3. Копировать панель кнопок Элемент и настроить другие кнопки. Добавить Гибкие пробелы.

4. Создание торговых точек.

5. Готово :). Когда вы запускаете приложение, вы получаете панель инструментов, например:

P.S. Здесь вы можете прочитать, как создать подкласс UIToolbar, используя .xib

Answer 3

UIButton *button =  [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal];
[button addTarget:target action:@selector(buttonAction:)forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 53, 31)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(3, 5, 50, 20)];
[label setFont:[UIFont fontWithName:@"Arial-BoldMT" size:13]];
[label setText:title];
label.textAlignment = UITextAlignmentCenter;
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor clearColor]];
[button addSubview:label];
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = barButton;

Answer 4

Ответ Криса Маркеля - хорошее начало (только

Я создал категорию, которая создаст UIBarButtonItem (leftBarButtonItem), который выглядит и ведет себя как обычная кнопка возврата iOS7. Посмотрите на: https://github.com/Zero3nna/UIBarButtonItem-DefaultBackButton

Answer 5

Swift 4.2 с целью

extension UIBarButtonItem {
    convenience init(image :UIImage, title :String, target: Any?, action: Selector?) {
        let button = UIButton(type: .custom)
        button.setImage(image, for: .normal)
        button.setTitle(title, for: .normal)
        button.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)

        if let target = target, let action = action {
            button.addTarget(target, action: action, for: .touchUpInside)
        }

        self.init(customView: button)
    }
}

Answer 6

Быстрое обновление для UIBarButtonItem с настраиваемым представлением, содержащим как изображение, так и текст.

var chatImage: UIImage  = UIImage(named: "YourImageName")
var rightButton : UIButton = UIButton(type: UIButtonType.custom)
rightButton.setBackgroundImage(rightImage, for: .normal)
rightButton.setTitle(title, for: .normal)
rightButton.frame.size = CGSize(width: 100, height: 30)

let menuUIBarButtonItem = UIBarButtonItem(customView: rightButton)