Изображение UIButton + текст IOS


129

Мне нужен UIButtonс изображением и текстом . Изображение должно быть вверху, а текст - под изображением, оба должны быть интерактивными.


Надеюсь, это поможет, см. [UiButton с ТЕКСТОМ и ИЗОБРАЖЕНИЕМ] [1] stackoverflow.com/questions/4926581/… [1]: stackoverflow.com/questions/4926581/… Затем вы можете добавить UITapGestureRecognizer в свое представление для обработки custombutton щелчки.
Хумаюн Гани

22
Звучит больше как спецификация требования, чем вопрос.
Abizern

См общепринятый ответ , и это commandshift.co.uk/blog/2013/03/12/uibutton-edge-insets о UIButton Edges
onmyway133

Ответы:


308

Я вижу очень сложные ответы, все они с использованием кода. Однако, если вы используете Interface Builder , есть очень простой способ сделать это:

  1. Выберите кнопку и установите заголовок и изображение. Обратите внимание, что если вы установите фон вместо изображения, тогда изображение будет изменено, если оно меньше, чем кнопка.Базовое изображение и название IB
  2. Установите положение обоих элементов, изменив край и вставки. Вы даже можете контролировать выравнивание обоих в разделе Control.

Позиция IB установлена Набор IB Control

Вы даже можете использовать тот же подход с помощью кода, не создавая внутри UILabels и UIImages, как предлагают другие решения. Всегда будьте проще!

РЕДАКТИРОВАТЬ: прикрепил небольшой пример, в котором установлены 3 вещи (заголовок, изображение и фон) с правильными вставками Предварительный просмотр кнопки


2
Это верно. Вы захотите использовать краевые вставки в заголовке и изображении, чтобы правильно выровнять их. Вы можете сделать это в коде, задав свойства titleEdgeInsets и contentEdgeInsets.
Тим Махони

4
да, это почти правильно. просто вам нужно установить Backgroundизображение вместо Image, иначе вы не увидите заголовок, даже не установив значения вставки для изменения положения заголовка.
holex 09

6
У меня тоже были проблемы с этим. Если ваш заголовок не отображается, попробуйте установить для него отрицательное смещение влево. Похоже, IB автоматически выталкивает его вправо от изображения.
brians 02

8
Это только отображает изображение и текст рядом, верно? Есть ли способ изменить ориентацию сверху вниз? Это то, что говорится в исходном вопросе, и то, что я ищу. Спасибо!
flohei 09

12
Для тех, кто использует Xcode 8, вы можете не увидеть свойство Edge. Текст может исчезнуть и после добавления изображения. Он меняет текст на белый, и если вы находитесь на белом фоне, похоже, что он исчез. Измените цвет текста, и он появится рядом с изображением. Вы можете настроить вкладки в Инспекторе размеров.
Мика Монтойя

67

Думаю, вы ищете решение своей проблемы:

UIButton *_button = [UIButton buttonWithType:UIButtonTypeCustom];
[_button setFrame:CGRectMake(0.f, 0.f, 128.f, 128.f)]; // SET the values for your wishes
[_button setCenter:CGPointMake(128.f, 128.f)]; // SET the values for your wishes
[_button setClipsToBounds:false];
[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal]; // SET the image name for your wishes
[_button setTitle:@"Button" forState:UIControlStateNormal];
[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];
[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; // SET the colour for your wishes
[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; // SET the colour for your wishes
[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, -110.f, 0.f)]; // SET the values for your wishes
[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside]; // you can ADD the action to the button as well like

... остальная часть настройки кнопки - ваша обязанность, и не забудьте добавить кнопку в свое представление.

ОБНОВЛЕНИЕ №1 и ОБНОВЛЕНИЕ №2

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

вы также можете увидеть окончательный результат в Интерфейсном Разработчике, как на скриншоте.

введите описание изображения здесь


EdgeInsets работает только тогда, когда у вас есть «установить изображение кнопки» и когда вы устанавливаете изображение кнопки, вы не видите заголовок. И если вы установите фоновое изображение, то EdgeInsets не может применяться к изображению. и вы можете увидеть заголовок. Таким образом, вы не можете установить edgeinsect для обоих одновременно.
Бадал Шах

@BadalShah, да, есть несколько сценариев (в зависимости от размера кнопки, размера изображения, длины заголовка и т. Д.), Когда то, что вы сказали, верно, и вы не можете видеть заголовок и изображение одновременно, потому что изображение выталкивает заголовок видимой области; но этот сценарий совсем не общий, общая ситуация такова, что и заголовок, и изображение могут появиться и появятся одновременно.
holex 03

32

Xcode-9 и Xcode-10 Apple внесла несколько изменений в Edge Inset, вы можете изменить это в инспекторе размеров.

Пожалуйста, выполните следующие шаги:

Шаг 1: Введите текст и выберите изображение, которое вы хотите показать:

введите описание изображения здесь

Шаг 2: Выберите кнопку управления в соответствии с вашими требованиями, как показано на рисунке ниже:

введите описание изображения здесь

Шаг 3: Теперь перейдите к инспектору размеров и добавьте стоимость в соответствии с вашими требованиями:

введите описание изображения здесь


9
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

но следующий код покажет метку выше и изображение в фоновом режиме

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.background.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

Нет необходимости использовать метку и кнопку в одном элементе управления, поскольку UIButton имеет свойства UILabel и UIimageview.


1
Мне нужно разместить изображение вверху, а текст под изображением должны быть интерактивными.
Codesen

4

Используйте этот код:

UIButton *button=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    button.imageView.frame=CGRectMake(0.0f, 0.0f, 50.0f, 44.0f);///You can replace it with your own dimensions.
    UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0.0f, 35.0f, 50.0f, 44.0f)];///You can replace it with your own dimensions.
    [button addSubview:label];

4

Используйте этот код:

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(0, 10, 200, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] 
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton]

4

Я столкнулся с той же проблемой, и я исправил ее, создав новый подкласс UIButtonи переопределив layoutSubviews:метод, как показано ниже:

-(void)layoutSubviews {
    [super layoutSubviews];

    // Center image
    CGPoint center = self.imageView.center;
    center.x = self.frame.size.width/2;
    center.y = self.imageView.frame.size.height/2;
    self.imageView.center = center;

    //Center text
    CGRect newFrame = [self titleLabel].frame;
    newFrame.origin.x = 0;
    newFrame.origin.y = self.imageView.frame.size.height + 5;
    newFrame.size.width = self.frame.size.width;

    self.titleLabel.frame = newFrame;
    self.titleLabel.textAlignment = UITextAlignmentCenter;

}

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


4

Создайте UIImageViewи UILabel, и установите изображение и текст для обоих из них .... затем поместите настраиваемую кнопку над imageView и Label ....

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search.png"]];
    imageView.frame = CGRectMake(x, y, imageView.frame.size.width, imageView.frame.size.height);
    [self.view addSubview:imageView];

UILabel *yourLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, y,a,b)];
yourLabel.text = @"raj";
[self.view addSubview:yourLabel];

UIButton * yourBtn=[UIButton buttonWithType:UIButtonTypeCustom];
[yourBtn setFrame:CGRectMake(x, y,c,d)];
[yourBtn addTarget:self action:@selector(@"Your Action") forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:yourBtn];  

Просто и полезно. Как установить выделенное изображение и заголовок?
DawnSong

для лейбла setHighlightedTextColor, и вам нужно поиграть с forControlEvents
Rajneesh071

3

Вы должны создать собственное изображение для изображения и настраиваемую метку для текста и добавить к своей кнопке как подпредставления. Вот и все.

UIButton *yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.backgroundColor = [UIColor greenColor];
yourButton.frame = CGRectMake(140, 40, 175, 30);     
[yourButton addTarget:self action:@selector(yourButtonSelected:) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:yourButton];

UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, yourButton.frame.size.width, yourButton.frame.size.height/2)];
imageView1.image =[UIImage imageNamed:@"images.jpg"];
[yourButton addSubview:imageView1];

UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, yourButton.frame.size.height/2, yourButton.frame.size.width, yourButton.frame.size.height/2)];
label.backgroundColor = [UIColor greenColor];
label.textAlignment= UITextAlignmentCenter;
label.text = @"ButtonTitle";
[yourButton addSubview:label];

Для целей тестирования используйте yourButtonSelected:метод

-(void)yourButtonSelected:(id)sender{
    NSLog(@"Your Button Selected");

}

Я думаю, это будет вам полезно.


3

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

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];

4
... а как текст проходит под изображением?
holex 09

@holex: Большое спасибо за то, что направили меня, я нашел в нем изъян и затем соответствующим образом изменил.
Dhruv

1

быстрая версия:

var button = UIButton()

newGameButton.setTitle("Новая игра", for: .normal)
newGameButton.setImage(UIImage(named: "energi"), for: .normal)
newGameButton.backgroundColor = .blue
newGameButton.imageEdgeInsets.left = -50

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.