it-swarm.com.ru

UIButton Image + Text IOS

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

114
Codesen

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

  1. Нажмите кнопку и установите заголовок и изображение. Обратите внимание, что если вы установите фон вместо изображения, размер изображения изменится, если он будет меньше кнопки.IB basic image and title
  2. Установите положение обоих предметов, изменив края и вставки. Вы даже можете контролировать выравнивание обоих в разделе управления.

IB position setIB Control set

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

Правка: Прикрепленный небольшой пример с 3 вещи (название, изображение и фон) с правильными вставками Button preview

293
Angel G. Olloqui

Я думаю вы ищете это решение для вашей проблемы:

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

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

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

enter image description here

64
holex

Xcode-9 и Xcode-10 Apple Сделано несколько изменений относительно Edge Inset сейчас, вы можете изменить его в size-inspector.

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

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

enter image description here

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

enter image description here

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

enter image description here

20
Alok
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.

7
Vinodh

Сделайте 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];  
3
Rajneesh071

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

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
iPhone Developer

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

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
Hemant Dixit

Я столкнулся с той же проблемой, и я исправляю ее, создав новый подкласс 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 - еще одно хорошее решение, если вы разместите их все вручную с помощью конструктора интерфейсов, но я оставлю свое решение, поскольку мне не нужно изменять вставки содержимого для каждой кнопки.

3
Oyashiro

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

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
Prasad G

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

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

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

enter image description here

1
Mohamed Saleh