UIButton: как центрировать изображение и текст с помощью imageEdgeInsets и titleEdgeInsets?
Если я поместил только изображение в кнопку и установил imageEdgeInsets больше близко к вершине, изображение остается в центре и все работы как ожидалось:
[button setImage:image forState:UIControlStateNormal];
[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, 0.0)];
Если я поместил только текст в кнопку и установил titleEdgeInsets больше близко к нижней части, текст остается в центре и все работы как ожидалось:
[button setTitle:title forState:UIControlStateNormal];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, -30, 0.0)];
Но, если я соединил эти 4 строки, текст вмешивается в изображение, и оба потеряли выравнивание по центру.
Все мои изображения имеют 30 пикселей шириной, и если я поместил 30 в оставленный параметр UIEdgeInsetMake для setTitleEdgeInsets, текст центрируется снова. Проблема состоит в том, что изображение никогда не центрируется, потому что кажется, что это зависит button.titleLabel размера. Я уже попробовал много вычислений размером кнопки, размером изображения, titleLabel размер, и никогда не получайте оба отлично центрируемые.
У кого-то уже была та же проблема?
1 ответ
Нашел как.
Сначала настройте текст titleLabel (из-за стилей, т. Е. Полужирный, курсив и т. Д.). Затем используйте setTitleEdgeInsets с учетом ширины вашего изображения:
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitle:title forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont boldSystemFontOfSize:10.0]];
// Left inset is the negative of image width.
[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -image.size.width, -25.0, 0.0)];
После этого используйте setTitleEdgeInsets с учетом ширины границ текста:
[button setImage:image forState:UIControlStateNormal];
// Right inset is the negative of text bounds width.
[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, -button.titleLabel.bounds.size.width)];
Теперь изображение и текст будут центрированы (в этом примере изображение появляется над текстом).
Ура.