UIButton：将图像放在标题旁边

Question

我需要在标题标签旁边放置一个图片视图（在右侧）， 所以我用以下方法创建了一个类别：

- (void)updateInsetsToMoveImageRightToText:(NSString *)text {
    CGFloat textWidth = [text sizeWithAttributes:[self.titleLabel.attributedText attributesAtIndex:0 effectiveRange:NULL]].width;
    CGFloat newXPosition = (self.frame.size.width - (self.frame.size.width - textWidth) / 2);
    self.imageEdgeInsets = UIEdgeInsetsMake(0., newXPosition, 0., 0.);
    self.titleEdgeInsets = UIEdgeInsetsMake(0., 0., 0., self.imageView.image.size.width);
}

我这样使用它：

- (void)quizzesFilterView:(QuizzesFilterView *)filterView didSelectFilter:(QuizFilterType)type {
    self.filterType = type;
    NSString *newTitle = [QuizzesFilterView filterNameByType:type];
    [self.filterButton setTitle:newTitle forState:UIControlStateNormal];
    [self.filterButton updateInsetsToMoveImageRightToText:newTitle];
    [self removeFilterView];
    [self updateSearchedQuizzesWithSearchText:nil quizFilterType:type];
    [self updateTableUi];
}

但它对较小的标题不起作用：

我做错了什么？

Answer 1

Seems your calculation may be wrong, give this a try.

- (void)updateInsetsToMoveImageRightToText:(NSString *)text {
    CGFloat textWidth = [text sizeWithAttributes:[self.titleLabel.attributedText attributesAtIndex:0 effectiveRange:NULL]].width;
    CGFloat newXPosition = (self.frame.size.width / 2) + (width / 2); //left offset
    self.imageEdgeInsets = UIEdgeInsetsMake(0.0, newXPosition, 0.0, 0.0); 
    self.titleEdgeInsets = UIEdgeInsetsMake(0., 0., 0., self.imageView.image.size.width);
}

If that doesn't solve the problem, you can add the image as a subview of the button and position it easier according to the width of the text.

Add an image inside UIButton as an accesory

Answer 2

The following code worked for me. I put some code in didMoveToSuperview to get the layout correct when the view first appears (I didn't make any changes to the button in the storyboard, other than to set the title and the image).

@implementation RDButton

-(void)didMoveToSuperview {
    CGFloat textWidth = [self.currentTitle sizeWithAttributes:[self.titleLabel.attributedText attributesAtIndex:0 effectiveRange:NULL]].width;
    self.titleEdgeInsets = UIEdgeInsetsMake(0, - (self.imageView.frame.size.width + textWidth), 0, 0);
    self.imageEdgeInsets = UIEdgeInsetsMake(0, textWidth, 0, 0);
    self.contentEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
}



- (void)updateInsetsToMoveImageRightToText:(NSString *)text {
    CGFloat textWidth = [text sizeWithAttributes:[self.titleLabel.attributedText attributesAtIndex:0 effectiveRange:NULL]].width;
    self.imageEdgeInsets = UIEdgeInsetsMake(0, textWidth, 0, 0);
}

After Edit:

Another way that doesn't require any adjustment when you change the title, is to flip the button's layer 180 degrees around the y axis, and do the same to the title label's layer to flip it back to reading correctly. This can be done in the button's code, or you can do it in viewDidLoad of the controller with no need to subclass the button.

- (void)viewDidLoad {
    [super viewDidLoad];
    self.filterButton.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
    self.filterButton.titleLabel.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
}

Answer 3

我编写了一个自定义UIButton，只需几行代码即可支持灵活对齐。
它可以在这里找到：https://github.com/namanhams/FlexibleAlignButton

示例：
self.btn.alignment = kButtonAlignmentLabelLeft self.btn.gap = 5; // horizontal gap between image and text

Answer 4

我知道这可能是一个老问题，并标有 Objective-C ，但对于那些在没有指定iOS语言的情况下在Google上搜索的人（比如我），这里有＆＃39; s Swift 3.0版。

func setupButton(button: UIButton) {
    if let title: NSString = button.currentTitle as NSString?,
        let attribute = button.titleLabel?.attributedText?.attributes(at: 0, effectiveRange: nil) {
        let textWidth = title.size(attributes: attribute).width
        // place here the remaining configurations
    }
}