iPhone UIButton - posisi gambar

Saya memiliki UIButtonteks dengan teks "Jelajahi aplikasi" dan UIImage(>) Di Interface Builderdalamnya terlihat seperti:

[ (>) Explore the app ]

Tapi saya perlu menempatkan ini UIImageSETELAH teks:

[ Explore the app (>) ]

Bagaimana cara memindahkan UIImageke kanan?

Solusi saya untuk ini cukup sederhana

[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);

Pada iOS 9 dan seterusnya, tampaknya cara sederhana untuk mencapai ini adalah dengan memaksa tampilan semantik.

Atau secara terprogram, menggunakan:

button.semanticContentAttribute = .ForceRightToLeft

Atur imageEdgeInsetdan titleEdgeInsetuntuk memindahkan komponen di dalam gambar Anda. Anda juga dapat membuat tombol menggunakan grafik yang berukuran penuh, dan menggunakannya sebagai gambar latar belakang tombol (kemudian digunakan titleEdgeInsetsuntuk memindahkan judul).

Jawaban Raymond W adalah yang terbaik di sini. Subclass UIButton dengan custom layoutSubviews. Sangat mudah dilakukan, berikut adalah implementasi layoutSubviews yang berhasil untuk saya:

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

Bagaimana dengan subclassing UIButtondan overriding layoutSubviews?

Kemudian pasca-pemrosesan lokasi self.imageView&self.titleLabel

Cara sederhana lainnya (yang BUKAN hanya untuk iOS 9) adalah dengan subclass UIButton untuk mengganti kedua metode ini

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 sudah diperhitungkan dengan menggunakan super.

Memaksakan 'kanan-ke-kiri' untuk tombol bukanlah suatu opsi jika aplikasi Anda mendukung 'kiri-ke-kanan' dan 'kanan-ke-kiri'.

Solusi yang berhasil untuk saya adalah subclass yang dapat ditambahkan ke tombol di Storyboard dan berfungsi dengan baik dengan kendala (diuji di 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)
        }

    }

}

Di mana 'padding' adalah ruang antara judul dan gambar.

Di 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  
    }
}

Membangun jawaban oleh @split ...

Jawabannya luar biasa, tetapi mengabaikan fakta bahwa tombol tersebut mungkin memiliki gambar kustom dan sisipan tepi judul yang disetel sebelumnya (misalnya di storyboard).

Misalnya, Anda mungkin ingin gambar memiliki bantalan dari atas dan bawah wadah, tetapi tetap memindahkan gambar ke sisi kanan tombol.

Saya memperluas konsep dengan metode ini: -

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

Ini membuat tombol rata kanan, seperti:

[           button label (>)]

Tombol tidak menyesuaikan lebarnya sesuai dengan konteksnya, sehingga akan muncul spasi di sebelah kiri label. Anda dapat menyelesaikan ini dengan menghitung lebar bingkai tombol dari buttonLabelSize.width dan buttonImageSize.width.

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

Solusi ini berfungsi iOS 7 ke atas

Hanya subclass 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

Penggunaan (Di suatu tempat di kelas Anda):

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

Membangun dari jawaban sebelumnya. Jika Anda ingin memiliki margin antara ikon dan judul tombol, kode harus sedikit berubah untuk mencegah mengambang label dan ikon di atas batas tombol berukuran intrinsik.

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)

Baris kode terakhir penting untuk penghitungan ukuran konten secara intrinsik untuk tata letak otomatis.

Inilah cara saya sendiri untuk melakukan hal itu, (setelah sekitar 10 tahun)

1. Subclass dari UIButton (Button, karena kita hidup di era Swift)
2. Letakkan gambar dan label dalam tampilan tumpukan.

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
        }
    }
}

Solusi satu baris di Swift:

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