Зображення UIButton + Text IOS

Мені потрібно UIButtonз зображенням і текстом . Зображення має бути вгорі, а текст - під зображенням, і обидва мають бути натисканими.

Я бачу дуже складні відповіді, всі вони використовують код. Однак якщо ви використовуєте Interface Builder , це дуже просто зробити:

1. Виберіть кнопку та встановіть заголовок та зображення. Зауважте, що якщо ви встановите фон замість зображення, то зображення буде змінено, якщо воно буде меншим за кнопку.
2. Встановіть положення обох елементів, змінивши край і вставки. Ви навіть можете контролювати вирівнювання обох в розділі «Контроль».

Ви навіть можете використовувати той самий підхід за кодом, не створюючи всередині UILabels та UIImages, як інші запропоновані рішення. Завжди так просто!

EDIT: Додайте невеликий приклад із встановленням трьох речей (назви, зображення та фону) з правильними вставками

Я думаю, ви шукаєте це рішення для своєї проблеми:

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

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

ви також можете побачити кінцевий результат у програмі інтерфейсу, як на екрані екрана.

Xcode-9 і Xcode-10 Apple зробили декілька змін щодо Edge Inset зараз, ви можете змінити його за допомогою інспектора розміру.

Будь ласка, виконайте нижче кроки:

Крок 1: Введіть текст і виберіть зображення, яке ви хочете показати:

Крок 2: Виберіть управління кнопкою відповідно до вашої вимоги, як показано на зображенні нижче:

Крок 3: Тепер перейдіть до інспектора розміру та додайте вартість відповідно до ваших вимог:

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.

Використовуйте цей код:

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

Використовуйте цей код:

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]

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

Створіть 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];  

Ви повинні створити спеціальний перегляд зображень для зображення та спеціальну мітку для тексту, і ви додасте до своєї кнопки як підзагляди. Це воно.

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

}

Я думаю, що вам це буде корисно.

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

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

швидка версія:

var button = UIButton()

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