Создание кнопки со стрелкой влево (например, в стиле UINavigationBar “назад”) на панели инструментов UIToolbar

Question

Я бы с удовольствием создал кнопку "назад" со стрелкой влево в рамке UIToolbar.

Насколько я могу судить, единственный способ получить что-то из этого - уйти UINavigationController с настройками по умолчанию, и он использует один для элемента левой панели.Но я не могу найти способа создать его как UIBarButtonItem, так что я не могу сделать это в стандартном UIToolbar, даже несмотря на то, что они очень похожи на UINavigationBars.

Я мог бы вручную создать его с помощью изображений кнопок, но я нигде не могу найти исходные изображения.У них края альфа-канала, поэтому при создании скриншотов и вырезании не получится очень универсальных результатов.

Есть какие-нибудь идеи, помимо создания скриншотов для каждого размера и цветовой гаммы, которые я собираюсь использовать?

Обновить: ПОЖАЛУЙСТА, перестаньте уклоняться от ответа и предполагать, что я не должен спрашивать об этом и должен использовать UINavigationBar.Мое приложение - Instapaper Pro.Он показывает только нижнюю панель инструментов (для экономии места и увеличения читаемой области содержимого), и я хочу поместить кнопку "Назад" в форме стрелки влево внизу.

Говорит мне, что мне не нужно этого делать это не ответ и уж точно не заслуживает награды.

Answer 1

Я использовал следующий psd, полученный на http://www.teehanlax.com / блог /? p = 447

http://www.chrisandtennille.com/pictures/backbutton.psd

Затем я только что создал пользовательский UIView, который я использую в свойстве customView элемента панели инструментов.

У меня хорошо работает.

<Ч>

Изменить. Как отметил PrairieHippo , maralbjo обнаружил, что с помощью следующего простого кода можно добиться цели (для этого требуется пользовательское изображение в комплекте) ) следует сочетать с этим ответом. Итак, вот дополнительный код:

// Creates a back button instead of default behaviour (displaying title of previous screen)
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(backAction)];

tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
[backButton release];

Answer 2

Метод Юникода

Я думаю, что гораздо проще просто использовать символ Unicode для выполнения работы. Вы можете просматривать стрелки, прибегая к помощи треугольников Юникода или < a href = "http://www.fileformat.info/info/unicode/block/arrows/list.htm" rel = "nofollow noreferrer"> Стрелки Unicode . Начиная с iOS6, Apple сменила персонажа на смайлика с рамкой. Чтобы отключить границу, я добавляю 0xFE0E Селектор вариаций Unicode .

NSString *backArrowString = @"\U000025C0\U0000FE0E"; //BLACK LEFT-POINTING TRIANGLE PLUS VARIATION SELECTOR

UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:backArrowString style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.leftButtonItem = backBarButtonItem;

Блок кода только для демонстрации. Это будет работать в любой кнопке, которая принимает строку NSString.

Чтобы получить полный список символов, поищите в Google символы Unicode и то, что вам нужно. Здесь находится запись для черного левого указательного треугольника .

Результат

Answer 3

ВНИМАНИЕ: . Есть сообщения, что это не сработает на iOS 6. Это может сработать только на старых версиях ОС. Очевидно, по крайней мере у одного разработчика было отклонено приложение для использования этого трюка (см. Комментарии). Используйте на свой риск. Использование изображения (см. Ответ выше) может быть более безопасным решением.

Это можно сделать без добавления собственных файлов изображений с помощью кнопки 101 типа sekr1t, чтобы получить правильную форму. Для меня хитрость заключалась в том, чтобы выяснить, что я могу использовать initWithCustomView для создания BarButtonItem . Лично мне это нужно для динамической панели навигации, а не для панели инструментов , но я протестировал ее с помощью панели инструментов, и код почти такой же:

// create button
UIButton* backButton = [UIButton buttonWithType:101]; // left-pointing shape!
[backButton addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];

// create button item -- possible because UIButton subclasses UIView!
UIBarButtonItem* backItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

// add to toolbar, or to a navbar (you should only have one of these!)
[toolbar setItems:[NSArray arrayWithObject:backItem]];
navItem.leftBarButtonItem = backItem;

Если вы делаете это на панели инструментов, вам придется настроить порядок элементов, но это зависит от остальной части вашего кода, и я оставлю это в качестве упражнения для читателя. : P Этот пример сработал для меня (скомпилировано и выполнено).

Бла-бла, читайте HIG, не используйте недокументированные функции и все такое. Есть только шесть поддерживаемых типов кнопок, и это не один из них.

Answer 4

Прежде всего, вы должны найти изображение кнопки "Назад".Я воспользовался хорошим приложением под названием Экстрактор это извлекает всю графику с iPhone.В iOS7 Мне удалось восстановить изображение под названием UINavigationBarBackIndicatorDefault и она была черного цвета, так как мне нужен был красный оттенок Я меняю цвет на красный с помощью Gimp.

Редактировать:

Как было упомянуто втате в его комментарии говорится, что нет необходимости менять цвет с помощью графического редактора.Следующий код должен сделать свое дело:

imageView.tint = [UIColor redColor];
imageView.image = [[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

Затем я создал представление, которое содержит ImageView с этой стрелкой, метку с пользовательским текстом, а поверх представления у меня есть кнопка с действием.Затем я добавил простую анимацию (затухание и перевод).

Следующий код имитирует поведение кнопки "Назад", включая анимацию.

-(void)viewWillAppear:(BOOL)animated{
        UIImageView *imageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"]];
        [imageView setTintColor:[UIColor redColor]];
        UILabel *label=[[UILabel alloc] init];
        [label setTextColor:[UIColor redColor]];
        [label setText:@"Blog"];
        [label sizeToFit];

        int space=6;
        label.frame=CGRectMake(imageView.frame.origin.x+imageView.frame.size.width+space, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
        UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, label.frame.size.width+imageView.frame.size.width+space, imageView.frame.size.height)];

        view.bounds=CGRectMake(view.bounds.origin.x+8, view.bounds.origin.y-1, view.bounds.size.width, view.bounds.size.height);
        [view addSubview:imageView];
        [view addSubview:label];

        UIButton *button=[[UIButton alloc] initWithFrame:view.frame];
        [button addTarget:self action:@selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];

        [UIView animateWithDuration:0.33 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            label.alpha = 0.0;
            CGRect orig=label.frame;
            label.frame=CGRectMake(label.frame.origin.x+25, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
            label.alpha = 1.0;
            label.frame=orig;
        } completion:nil];

        UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:view];
}

- (void) handleBack:(id)sender{
}

Редактировать:

Вместо добавления кнопки, на мой взгляд, лучшим подходом является использование средства распознавания жестов.

UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleBack:)];
[view addGestureRecognizer:tap];
[view setUserInteractionEnabled:YES];

Answer 5

Я не уверен, что это сработает, но вы можете попробовать создать UINavigationController с настройками по умолчанию для создания кнопки, найти кнопку в иерархии подпредставлений контроллера навигации, вызвать удалите из него , удалите контроллер навигации, а затем добавьте кнопку в качестве подпредставления вашей панели инструментов. Вам также может понадобиться сохранить и кнопку перед вызовом removeFromSuperview (а затем release после добавления его в качестве подпредставления панели инструментов), чтобы избежать этого освобождается во время процесса.

Answer 6

Чтобы сделать UIButton со стрелкой довольно близким (я не дизайнер ;) к системной стрелке назад iOS 7:

Стандартный:

Apple SD Готический Нео

В Xcode:

• Сосредоточьтесь на поле значения заголовка кнопки (или любом другом представлении / элементе управления с текстовым содержимым).
• Откройте Правка -> Специальные символы
• Выберите группу Скобки и дважды щелкните на '<" характер
• Измените шрифт на:Apple SD Gothic Neo, обычная, нужного размера (например,20)
• Меняйте цвет по своему усмотрению

Ссылка Ответ @staticvoidman's вернуться назад-как стрелка в iOS 7

Answer 7

Если вы не хотите беспокоиться о файлах изображений, форму стрелки можно нарисовать в подклассе UIView со следующим кодом:

- (void)drawRect:(CGRect)rect {
    float width = rect.size.width;
    float height = rect.size.height;
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextBeginPath(context);
    CGContextMoveToPoint(context, width * 5.0/6.0, height * 0.0/10.0);
    CGContextAddLineToPoint(context, width * 0.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 5.0/6.0, height * 10.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 9.0/10.0);
    CGContextAddLineToPoint(context, width * 2.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 1.0/10.0);
    CGContextClosePath(context);

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillPath(context);
}

где вид стрелки пропорционален ширине 6,0 и высоте 10,0

Answer 8

    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

У меня работает. Я использовал это, когда у меня было больше вкладок, чем могло поместиться на панели вкладок, и контроллер представления был вытолкнут из " Подробнее " переопределил leftBarButtonItem в его viewDidLoad.

Answer 9

Вы можете найти исходные изображения, извлекая их из Other.artwork в UIKit ${SDKROOT}/System/Library/Frameworks/UIKit.framework/Other.artwork.У сообщества моддинга есть несколько инструментов для их извлечения, здесь.Как только вы извлечете изображение, вы можете написать некоторый код, чтобы перекрасить его по мере необходимости и установить в качестве изображения кнопки.Можете ли вы на самом деле отправить такую вещь (поскольку вы встраиваете производные иллюстрации), может быть немного рискованно, поэтому, возможно, вы захотите поговорить с юристом.

Answer 10

В библиотеке Three20 есть способ сделать это:

  UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle: @"Title" style:UIBarButtonItemStylePlain 
                                                                target:self action:@selector(foo)];

  UIColor* darkBlue = RGBCOLOR(109, 132, 162);

  TTShapeStyle* style = [TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:4.5] next:
    [TTShadowStyle styleWithColor:RGBCOLOR(255,255,255) blur:1 offset:CGSizeMake(0, 1) next:
    [TTReflectiveFillStyle styleWithColor:darkBlue next:
    [TTBevelBorderStyle styleWithHighlight:[darkBlue shadow]
                                     shadow:[darkBlue multiplyHue:1 saturation:0.5 value:0.5]
                                      width:1 lightSource:270 next:
    [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -1, 0, -1) next:
    [TTBevelBorderStyle styleWithHighlight:nil shadow:RGBACOLOR(0,0,0,0.15)
                                        width:1 lightSource:270 next:nil]]]]]];

  TTView* view = [[[TTView alloc] initWithFrame:CGRectMake(0, 0, 80, 35)] autorelease];
  view.backgroundColor = [UIColor clearColor];
  view.style = style;
  backButton.customView = view;


  self.navigationItem.leftBarButtonItem = backButton;

Answer 11

Я обнаружил, что с помощью следующего простого кода добился цели (требуется пользовательское изображение в комплекте):

// Creates a back button instead of default behaviour (displaying title of previous screen)
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                                   style:UIBarButtonItemStyleBordered
                                                                  target:self
                                                                  action:@selector(backAction)];

    tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
    [backButton release];

Answer 12

Вот что я в итоге сделал после поиска всех этих и других решений. Он использует растягиваемый PNG, извлеченный из изображений UIKit. Таким образом, вы можете установить текст, который вы любите

// Generate the background images
UIImage *stretchableBackButton = [[UIImage imageNamed:@"UINavigationBarDefaultBack.png"] stretchableImageWithLeftCapWidth:14 topCapHeight:0];
UIImage *stretchableBackButtonPressed = [[UIImage imageNamed:@"UINavigationBarDefaultBackPressed.png"] stretchableImageWithLeftCapWidth:13 topCapHeight:0];
// Setup the UIButton
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setBackgroundImage:stretchableBackButton forState:UIControlStateNormal];
[backButton setBackgroundImage:stretchableBackButtonPressed forState:UIControlStateSelected];
NSString *buttonTitle = NSLocalizedString(@"Back", @"Back");
[backButton setTitle:buttonTitle forState:UIControlStateNormal];
[backButton setTitle:buttonTitle forState:UIControlStateSelected];
backButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 2, 1); // Tweak the text position
NSInteger width = ([backButton.titleLabel.text sizeWithFont:backButton.titleLabel.font].width + backButton.titleEdgeInsets.right +backButton.titleEdgeInsets.left);
[backButton setFrame:CGRectMake(0, 0, width, 29)];
backButton.titleLabel.font = [UIFont boldSystemFontOfSize:13.0f];
[backButton addTarget:self action:@selector(yourSelector:) forControlEvents:UIControlEventTouchDown];
// Now add the button as a custom UIBarButtonItem
UIBarButtonItem *backButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:backButton] autorelease];
self.navigationItem.leftBarButtonItem = backButtonItem;

Answer 13

Это легко сделать с помощью Конструктор интерфейсов в Xcode 5.x

• использование Панель инструментов и Элемент Кнопки Панели От Библиотека объектов

  

• в "баттоне" Инспектор атрибутов Редактировать Изображение секция с твой изображение кнопки "Назад"

  

Сделано!

Answer 14

Я пытался сделать то же самое, но хотел, чтобы кнопка «Назад» была на панели навигации. (На самом деле мне нужна была кнопка «Назад», которая делала бы больше, чем просто возвращался, поэтому мне пришлось использовать свойство leftBarButtonItem). Я попробовал то, что предложил AndrewS, но на панели навигации это не выглядело бы так, как должно, так как UIButton был отчасти приведен к UIBarButtonItem.

Но я нашел способ обойти это. На самом деле я просто помещаю UIView под UIButton и устанавливаю customView для UIBarButtonItem. Вот код, если кому-то это нужно:

// initialize button and button view
UIButton *backButton = [UIButton buttonWithType:101];
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, backButton.frame.size.width, backButton.frame.size.height)];

[backButton addTarget:self action:@selector(backButtonTouched:) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];
[backButtonView addSubview:backButton];

// set buttonview as custom view for bar button item
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
self.navigationItem.leftBarButtonItem = backButtonItem;

// push item to navigationbar items
[self.navigationController.navigationBar setItems:[NSArray arrayWithObject:backButtonItem]];

Answer 15

Чтобы создать изображение для панели инструментов UIToolbar, создайте png в фотошопе, и ГДЕ там, где есть ЛЮБОЙ цвет, он помещает его в белый цвет, а где он равен альфа = 0, то оставляет его в покое.

SDK фактически помещает границу вокруг созданного вами значка и делает его белым, без необходимости что-либо делать.

Видите, это то, что я сделал в Photoshop для кнопки «вперед» (очевидно, поменяйте местами кнопку «назад»):

http://twitpic.com/1oanv

и вот как это выглядело в Интерфейсном Разработчике

http://twitpic.com/1oaoa

Answer 16

Решение без использования png. На основании этого SO ответа: Добавление маленькой стрелки к правой стороне ячейки в ячейке iPhone TableView

Просто переверните UITableViewCell по горизонтали!

UIButton *btnBack = [[UIButton alloc] initWithFrame:CGRectMake(0, 5, 70, 20)];

// Add the disclosure
CGRect frm;
UITableViewCell *disclosure = [[UITableViewCell alloc] init];
disclosure.transform = CGAffineTransformScale(CGAffineTransformIdentity, -1, 1);
frm = self.btnBack.bounds;
disclosure.frame = CGRectMake(frm.origin.x, frm.origin.y, frm.size.width-25, frm.size.height);
disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
disclosure.userInteractionEnabled = NO;
[self.btnBack addSubview:disclosure];

// Add the label
UILabel *lbl = [[UILabel alloc] init];
frm = CGRectOffset(self.btnBack.bounds, 15, 0);
lbl.frame = frm;
lbl.textAlignment = NSTextAlignmentCenter;
lbl.text = @"BACK";
[self addSubview:lbl];

Answer 17

Если вы хотите избежать рисования самостоятельно, вы можете использовать недокументированный класс: UINavigationButton со стилем 1. Это, конечно, может помешать утверждению вашего приложения ... / John

Answer 18

Ну, вам не нужно иметь разные кнопки для каждого размера, вы можете использовать [UIImage stretchableImageWithLeftCapWidth: topCapHeight:] , но я нашел только пользовательские изображения.

Answer 19

У меня была похожая проблема, и вышла одна библиотека PButton . И пример - кнопка, похожая на кнопку обратной навигации, которую можно использовать в любом месте, как настраиваемую кнопку.

Примерно так:

Answer 20

Пример в Swift 3 с предыдущей и следующей кнопками в правом верхнем углу.

let prevButtonItem = UIBarButtonItem(title: "\u{25C0}", style: .plain, target: self, action: #selector(prevButtonTapped))
let nextButtonItem = UIBarButtonItem(title: "\u{25B6}", style: .plain, target: self, action: #selector(nextButtonTapped))
self.navigationItem.rightBarButtonItems = [nextButtonItem, prevButtonItem]

Answer 21

Swift

// create button
    var backButton = UIButton(type: 101)

    // left-pointing shape!
    backButton.addTarget(self, action: #selector(self.backAction), for: .touchUpInside)
    backButton.setTitle("Back", for: .normal)

    // create button item -- possible because UIButton subclasses UIView!
    var backItem = UIBarButtonItem(customView: backButton)

    // add to toolbar, or to a navbar (you should only have one of these!)
    toolbar.items = [backItem]
    navItem.leftBarButtonItem = backItem

Answer 22

Попробуй это. Я уверен, что вам не нужно изображение кнопки «Назад», чтобы создать такой.

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back"
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(yourSelectorGoesHere:)];
self.navigationItem.backBarButtonItem = backButton;

Это все, что вам нужно сделать:)

Answer 23

Почему ты это делаешь? Если вы хотите что-то похожее на панель навигации, используйте UINavigationBar.

Панели инструментов имеют определенный визуальный стиль, связанный с ними. Рекомендации по интерфейсу пользователя для состояния iPhone:

  

Панель инструментов отображается в нижней части экрана и содержит кнопки, которые выполняют действия, связанные с объектами в текущем представлении.

Затем приводятся несколько наглядных примеров примерно квадратных значков без текста. Я призываю вас следовать HIG по этому вопросу.