У меня есть кнопка размером 200 и высотой 270. Я хочу, чтобы текст и изображение были на одной кнопке. Не в качестве фонового изображения для этого текста. Вместо этого я хочу отобразить текст с высотой 120 и изображением высотой 150 на одной кнопке. Как это сделать?
UIButton с изображением и текстом возможно?
Ответ 1
Вы можете использовать этот код, он будет служить вашей цели
.h file code
IBOutlet UIButton *testBtn;
.m file code
[testBtn setImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitleEdgeInsets:UIEdgeInsetsMake(70.0, -150.0, 5.0, 5.0)];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];
Отрегулируйте координаты и размер вашей кнопки в качестве вашего требования. Это пример кода, который поможет вам.
PS: Возьмите UIButton в файле nib > Сделайте его пользовательской кнопкой > Подключите IBOutlet к вашей пользовательской кнопке в файле nib.Thats it.
Ответ 2
В приведенном ниже коде показано размещение изображения и текста кнопкой с использованием свойств setImageEdgeInsets и setTitleEdgeInsets класса UIButton.
UIButton *butt=[UIButton buttonWithType:UIButtonTypeCustom ];
[butt setFrame:CGRectMake(0, 0, 100, 100)];
[butt setBackgroundImage:[UIImage imageNamed:@"sig.png"] forState:UIControlStateNormal];
[butt setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, 50.0, 0.0)];
[butt setTitleEdgeInsets:UIEdgeInsetsMake(75.0, 0.0, 0.0, 0.0)];
[butt setTitle:@"hello" forState:UIControlStateNormal];
[butt setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.view addSubview:butt];
Ответ 3
Использовать концепцию subviews. Возьмите 3 элемента управления, UIButton
(200x270), UILabel
(200x120) и UIImageView
(200x150). Назначьте изображение UIImageView
и установите текст для UILabel
. Расположите элементы управления метками и изображениями на основе местоположения (x, y) UIButton
.
В конце вы должны иметь что-то вроде:
В следующих случаях:
UIButton *button;
UILabel *label;
UIImageView *imageView;
[button addSubView:imageView];
[button addSubView:label];
Ответ 4
[testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];
Ответ 5
Да, вы можете отображать изображение и заголовок в одной и той же кнопке, если они достаточно малы, чтобы соответствовать. Трудная часть приходит, когда вам нужно иметь дело с размещением.
Вы можете играть с contentVerticalAlignment
и contentHorizontalAlignment
свойствами UIButton
(унаследованными от UIControl
).
Вы также можете использовать свойства titleEdgeInsets
и imageEdgeInsets
, чтобы сместить заголовок и изображение с места размещения, которое они получают, на основе свойств выравнивания.
Если вы хотите очень точное или выборочное размещение, я предлагаю переопределить методы titleRectForContentRect:
и imageRectForContentRect:
UIButton
. Это позволяет вам определять кадры для вашего названия и изображения, и они вызывается всякий раз, когда нужно выложить кнопку. Одно предупреждение, если вы хотите ссылаться на self.titleLabel
внутри titleRectForContentRect:
, сначала убедитесь, что self.currentTitle
определен. Я получаю ошибку с плохим доступом, возможно, метод вызывается при первой инициализации titleLabel.
Ответ 6
В Swift 3
let button = UIButton()
//make sure the image (jpg, png) you are placing in the button
//is about the right size or it will push the label off the button
//add image
let image = UIImage(named:"my_button_image")
button.setImage(image, for: .normal)
button.imageView?.contentMode = .scaleAspectFit
button.imageEdgeInsets = UIEdgeInsets(top:0, left:-30, bottom:0, right:0) //adjust these to have fit right
//add title
button.setTitle("Fan", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top:0, left:10, bottom:0, right:0) //adjust insets to have fit how you want
//add button to your view - like in viewDidLoad or your own custom view setup
addSubview(button)
Не забудьте установить привязки, если это так программно, чтобы он появился/привязал его к ссылке на ссылку в Interface Builder, если вы используете раскадровку
Ответ 7
Если вы хотите получить больше контроля над макетом, создайте подкласс UIControl
и упорядочите нужные представления (UILabel
, UIImageView
) в файле xib. Затем вы можете использовать Autolayout регулярно, не сортируя UIEdgeInsets
.
Ответ 8
Использование кнопок подпредставлений работало для меня в Swift 4.
- Создай свою кнопку
- Установить изображение для кнопки
- Создать ярлык для текста
- Добавьте ярлык как подпредставление вашей кнопки
-
Ограничить метку внутри кнопки
let imageAndTextButton : UIButton = { let button = UIButton(frame: .zero) button.tintColor = .clear button.setImage(#imageLiteral(resourceName: "buttonImage"), for: .normal) button.imageView?.contentMode = .scaleToFill button.translatesAutoresizingMaskIntoConstraints = false return button }() let textForButtonLabel = UILabel(frame: .zero) textForButtonLabel.translatesAutoresizingMaskIntoConstraints = false textForButtonLabel.attributedText = NSAttributedString(string: "Text For Button", attributes: buttonTextAttributes) textForButtonLabel.textAlignment = .center textForButtonLabel.backgroundColor = .clear imageAndTextButton.addSubview(textForButtonLabel) imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerX, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerX, multiplier: 1.0, constant: 0)) imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerY, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerY, multiplier: 1.0, constant: 0))
Ответ 9
Попробуйте, это работает для меня,
Мы должны установить значение базы UIEdgeInsets в зависимости от размера кнопки и наших требований.
[self.testButton setTitle: @"myTitle" forState: UIControlStateNormal];
UIImage *iconImage = [UIImage imageWithIcon:@"fa-dot-circle-o" backgroundColor:[UIColor clearColor] iconColor:[UIColor whiteColor] fontSize:10.0f];
//UIEdgeInsets insets = {top, left, bottom, right};
[self.testButton setImageEdgeInsets:UIEdgeInsetsMake(3.0, 0.0, 3.0, 2.0)];
[self.testButton setTitleEdgeInsets:UIEdgeInsetsMake(3.0, 1.0, 3.0, 0.0)];
[self.testButton setImage:iconImage forState:UIControlStateNormal];
[self.testButton addTarget:self action:@selector(testButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.testButton];
Надеюсь, это поможет кому-то.