Вопрос по uibutton, iphone, ipad, ios – UIButton Image + Text IOS

110

мне нужноUIButton сimage & text, Изображение должно быть сверху & amp; текст идет под изображением, оба должны быть кликабельными.

Звучит скорее как спецификация требований, чем как вопрос. Abizern
Надеюсь, это поможет, см. [UiButton с текстом и изображением] [1]stackoverflow.com/questions/4926581/… [1]: stackoverflow.com/questions/4926581/…  Затем вы можете добавить UITapGestureRecognizer в ваше представление для обработки пользовательских нажатий кнопок. Humayun Ghani
Смотрите принятый ответ и этоcommandshift.co.uk/blog/2013/03/12/uibutton-edge-insets о UIButton Edges onmyway133

Ваш Ответ

11   ответов
3

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];
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");

}

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

284

Я вижу очень сложные ответы, все они используют код. Тем не мение,if you are using Interface BuilderЕсть очень простой способ сделать это:

  1. Select the button and set a title and an image. Note that if you set the background instead of the image then the image will be resized if it is smaller than the button.IB basic image and title
  2. Set the position of both items by changing the edge and insets. You could even control the alignment of both in the Control section.

IB position set IB Control set

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

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

Это правильно. Вы захотите использовать боковые вставки на заголовке и изображении, чтобы правильно выровнять их. Вы можете сделать это в коде, установив свойства titleEdgeInsets и contentEdgeInsets.
У меня тоже были проблемы с этим. Если ваш заголовок не отображается, попробуйте установить для него отрицательное смещение влево. Похоже, IB автоматически выталкивает его вправо от изображения.
Для тех, кто использует Xcode 8, вы можете не видеть свойство Edge. Текст может исчезнуть и после добавления изображения. Он меняет текст на белый, и если вы находитесь на белом фоне, похоже, он исчез. Измените цвет текста, и он появится рядом с изображением. Вы можете настроить вкладки под инспектором размера.
да, это почти правильно. просто вы должны установитьBackground изображение вместоImageв противном случае вы не увидите заголовок, даже не установив значения вставки для изменения положения заголовка.
Это только показывает изображение и текст рядом, верно? Есть ли способ изменить ориентацию сверху вниз? Это то, о чем говорится в первоначальном вопросе, и то, что я ищу. Спасибо!
3

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

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]
3

ДелатьUIImageView а такжеUILabelи установите изображение и текст на оба этих .... затем поместите пользовательскую кнопку поверх imageView и метки ....

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];  
Просто и полезно. Как установить выделенное изображение и заголовок?
для ярлыка setHighlightedTextColor, и вы должны играть с forControlEvents
2

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

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];
@holex: Большое спасибо за то, что направили меня, я нашел в нем недостаток и затем изменился соответствующим образом.
... и как текст идет под изображением?
17

Xcode-9 а такжеXcode-10 Apple сделала несколько изменений, касающихся Edge Inset, теперь вы можете изменить их в size-inspector.

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

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

enter image description here

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

enter image description here

Step-3: Теперь перейдите к инспектору размера и добавьте значение согласно вашему требованию:

enter image description here

3

Я столкнулся с той же проблемой, и я исправляю ее, создав новый подкласс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;

}

Я думаю, что ответ Angel Garc a Olloqui является еще одним хорошим решением, если вы разместите их все вручную с помощью построителя интерфейса, но я оставлю свое решение, поскольку мне не нужно изменять вставки содержимого для каждого из моя кнопка

Но это работает;) Проверьте мои комментарии и отредактируйте
1

Проверьте эту удивительную библиотекуImageCenterButton Он решает все проблемы, с которыми сталкиваются другие библиотеки, и я подтверждаю, что он работает с iOS 9

enter image description here

62

Я думаюyou are looking for this solution для вашей проблемы:

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

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

UPDATE #1 а такжеUPDATE #2

или же,if you don't need a dynamic button Вы можете добавить свою кнопку к вашему виду вInterface Builder и вы могли бы установить те же значения там же. это довольно то же самое, но вот эта версия также в одной простой картине.

выcan also see the final result вInterface Builder как это на скриншоте.

enter image description here

EdgeInsets работает только тогда, когда у вас есть «установить изображение кнопки» и когда вы устанавливаете изображение кнопки, вы не можете видеть заголовок. И если вы установите фоновое изображение, то EdgeInsets не может применяться к изображению. и вы можете увидеть заголовок. Таким образом, вы не можете установить edgeinsect для обоих одновременно.
@BadalShah, да, есть некоторые сценарии (в зависимости от размера кнопки, размера изображения, длины заголовка и т. Д.), Когда то, что вы сказали, верно, и вы не можете видетьtitle иimage в то же время, потому чтоimage выталкиваетtitle видимой области; но этот сценарий не является общим, общая ситуация такова, что обаtitle а такжеimage может и появится одновременно.
7
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.

Мне нужно расположить изображение сверху & amp; текст под изображением должен быть кликабельным. Codesen
Вы можете использовать мою первую часть кода

Похожие вопросы