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

似乎您的计算可能有误，请尝试一下。

- (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);
}

如果仍不能解决问题，则可以将图像添加为按钮的子视图，并根据文本的宽度将其轻松放置。

在UIButton中添加图片作为附件

Answer 2

以下代码对我有用。 我在didMoveToSuperview中放入了一些代码，以使视图首次出现时布局正确（除了设置标题和图像，我没有对情节提要中的按钮进行任何更改）。

@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);
}

编辑后：

更改标题时，无需进行任何调整的另一种方法是，将按钮的图层绕y轴翻转180度，并对标题标签的图层进行相同操作，以将其翻转回到正确的位置。 这可以在按钮的代码中完成，也可以在控制器的viewDidLoad中完成，而无需子类化按钮。

- (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进行了标记，但是对于那些在Google上搜索而未指定iOS语言的人（如我），这是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
    }
}