iPhone UIButton - vị trí hình ảnh

Tôi có một dòng UIButtonchữ "Khám phá ứng dụng" và UIImage(>) Trong Interface Builderđó có vẻ như:

[ (>) Explore the app ]

Nhưng tôi cần đặt cái này UIImageSAU văn bản:

[ Explore the app (>) ]

Làm thế nào tôi có thể di chuyển UIImagesang phải?

Giải pháp của tôi cho việc này khá đơn giản

[button sizeToFit];
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width);

Trên iOS 9 trở đi, dường như một cách đơn giản để đạt được điều này là buộc ngữ nghĩa của chế độ xem.

Hoặc lập trình, sử dụng:

button.semanticContentAttribute = .ForceRightToLeft

Đặt imageEdgeInsetvà titleEdgeInsetđể di chuyển các thành phần xung quanh trong hình ảnh của bạn. Bạn cũng có thể tạo một nút bằng các đồ họa có kích thước đầy đủ và sử dụng nút đó làm hình nền cho nút (sau đó sử dụng titleEdgeInsetsđể di chuyển tiêu đề xung quanh).

Câu trả lời của Raymond W là tốt nhất ở đây. Phân lớp UIButton với bố cục tùy chỉnhSubview. Rất đơn giản để làm, đây là một triển khai layoutSubview phù hợp với tôi:

- (void)layoutSubviews
{
    // Allow default layout, then adjust image and label positions
    [super layoutSubviews];

    UIImageView *imageView = [self imageView];
    UILabel *label = [self titleLabel];

    CGRect imageFrame = imageView.frame;
    CGRect labelFrame = label.frame;

    labelFrame.origin.x = imageFrame.origin.x;
    imageFrame.origin.x = labelFrame.origin.x + CGRectGetWidth(labelFrame);

    imageView.frame = imageFrame;
    label.frame = labelFrame;
}

Điều gì về phân lớp UIButtonvà ghi đè layoutSubviews?

Sau đó xử lý hậu kỳ các vị trí của self.imageView&self.titleLabel

Một cách đơn giản khác (không phải chỉ dành cho iOS 9) là phân lớp UIButton để ghi đè hai phương thức này

override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
    var rect = super.titleRectForContentRect(contentRect)
    rect.origin.x = 0
    return rect
}

override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
    var rect = super.imageRectForContentRect(contentRect)
    rect.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(rect)
    return rect
}

contentEdgeInsets đã được tính đến bằng cách sử dụng siêu.

Buộc 'từ phải sang trái' cho nút không phải là một tùy chọn nếu ứng dụng của bạn hỗ trợ cả 'từ trái sang phải' và 'từ phải sang trái'.

Giải pháp hiệu quả với tôi là một lớp con có thể được thêm vào nút trong Storyboard và hoạt động tốt với các ràng buộc (được thử nghiệm trong iOS 11):

class ButtonWithImageAtEnd: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        if let imageView = imageView, let titleLabel = titleLabel {
            let padding: CGFloat = 15
            imageEdgeInsets = UIEdgeInsets(top: 5, left: titleLabel.frame.size.width+padding, bottom: 5, right: -titleLabel.frame.size.width-padding)
            titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageView.frame.width, bottom: 0, right: imageView.frame.width)
        }

    }

}

Trong đó 'phần đệm' sẽ là khoảng trắng giữa tiêu đề và hình ảnh.

Trong Swift:

override func layoutSubviews(){
    super.layoutSubviews()

    let inset: CGFloat = 5

    if var imageFrame = self.imageView?.frame,
       var labelFrame = self.titleLabel?.frame {

       let cumulativeWidth = imageFrame.width + labelFrame.width + inset
       let excessiveWidth = self.bounds.width - cumulativeWidth
       labelFrame.origin.x = excessiveWidth / 2
       imageFrame.origin.x = labelFrame.origin.x + labelFrame.width + inset

       self.imageView?.frame = imageFrame
       self.titleLabel?.frame = labelFrame  
    }
}

Xây dựng câu trả lời bằng @split ...

Câu trả lời là tuyệt vời, nhưng nó bỏ qua thực tế là nút có thể có các hình ảnh cạnh tiêu đề và cạnh tiêu đề được đặt trước (ví dụ như trong bảng phân cảnh).

Ví dụ, bạn có thể muốn hình ảnh có một số phần đệm từ trên cùng và dưới cùng của hộp chứa, nhưng vẫn di chuyển hình ảnh sang bên phải của nút.

Tôi mở rộng khái niệm với phương pháp này: -

- (void) moveImageToRightSide {
    [self sizeToFit];

    CGFloat titleWidth = self.titleLabel.frame.size.width;
    CGFloat imageWidth = self.imageView.frame.size.width;
    CGFloat gapWidth = self.frame.size.width - titleWidth - imageWidth;
    self.titleEdgeInsets = UIEdgeInsetsMake(self.titleEdgeInsets.top,
                                            -imageWidth + self.titleEdgeInsets.left,
                                            self.titleEdgeInsets.bottom,
                                            imageWidth - self.titleEdgeInsets.right);

    self.imageEdgeInsets = UIEdgeInsetsMake(self.imageEdgeInsets.top,
                                            titleWidth + self.imageEdgeInsets.left + gapWidth,
                                            self.imageEdgeInsets.bottom,
                                            -titleWidth + self.imageEdgeInsets.right - gapWidth);
}

// Get the size of the text and image
CGSize buttonLabelSize = [[self.button titleForState:UIControlStateNormal] sizeWithFont:self.button.titleLabel.font];
CGSize buttonImageSize = [[self.button imageForState:UIControlStateNormal] size];

// You can do this line in the xib too:
self.button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;

// Adjust Edge Insets according to the above measurement. The +2 adds a little space 
self.button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -(buttonLabelSize.width+2));
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, buttonImageSize.width+2);

Điều này tạo ra một nút căn phải, như vậy:

[           button label (>)]

Nút không điều chỉnh độ rộng của nó theo ngữ cảnh, do đó, không gian sẽ xuất hiện ở bên trái của nhãn. Bạn có thể giải quyết điều này bằng cách tính chiều rộng khung của nút từ nútLabelSize. Thong và buttonImageSize. Thong.

button.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;

Giải pháp này hoạt động iOS 7 trở lên

Chỉ cần phân lớp UIButton

@interface UIButton (Image)

- (void)swapTextWithImage;

@end

@implementation UIButton (Image)

- (void)swapTextWithImage {
   const CGFloat kDefaultPadding = 6.0f;
   CGSize buttonSize = [self.titleLabel.text sizeWithAttributes:@{
                                                               NSFontAttributeName:self.titleLabel.font
                                                               }];

   self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView.frame.size.width, 0, self.imageView.frame.size.width);
   self.imageEdgeInsets = UIEdgeInsetsMake(0, buttonSize.width + kDefaultPadding, 0, -buttonSize.width); 
}

@end

Cách sử dụng (Một nơi nào đó trong lớp học của bạn):

[self.myButton setTitle:@"Any text" forState:UIControlStateNormal];
[self.myButton swapTextWithImage];

Dựa trên các câu trả lời trước. Nếu bạn muốn có một lề giữa biểu tượng và tiêu đề của nút, mã phải thay đổi một chút để tránh nổi nhãn và biểu tượng phía trên giới hạn của các nút có kích thước nội tại.

let margin = CGFloat(4.0)
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width)
button.contentEdgeInsets = UIEdgeInsetsMake(0, margin, 0, margin)

Dòng mã cuối cùng rất quan trọng đối với việc tính toán kích thước nội dung cho bố cục tự động.

Đây là cách riêng của tôi để làm điều đó, (sau khoảng 10 năm)

1. Phân lớp từ UIButton (Nút, khi chúng ta đang sống trong thời đại Swift)
2. Đặt một hình ảnh và nhãn trong chế độ xem ngăn xếp.

class CustomButton: Button {

    var didLayout: Bool = false // The code must be called only once

    override func layoutSubviews() {
        super.layoutSubviews()
        if !didLayout, let imageView = imageView, let titleLabel = titleLabel {
            didLayout = true
            let stack = UIStackView(arrangedSubviews: [titleLabel, imageView])
            addSubview(stack)
            stack.edgesToSuperview() // I use TinyConstraints library. You could handle the constraints directly
            stack.axis = .horizontal
        }
    }
}

Giải pháp một dòng trong Swift:

// iOS 9 and Onwards
button.semanticContentAttribute = .forceRightToLeft