UIButton標題和圖像對齊查詢

Question

我有一個UIButton ，我正在嘗試設置標題和圖像。

我想將UIButton的標題與左側對齊，並將圖像對齊到右側。 我試圖在Timer in Clocks應用程序中顯示按鈕的外觀和感覺（顯示“當計時器結束時”）。

我擺弄contentHorizontalAlignment ， contentEdgeInsets ， titleEdgeInsets和imageEdgeInsets來實現我的目標，但無濟於事。 同樣的文檔也很稀疏。

我怎樣才能實現同樣的目標？

還有相關問題，Timer in Clocks應用程序有兩組文本，一組與左側對齊，另一組與圖像對齊？ 怎么能在UIButton完成？ （我現在不需要那個功能）。

Answer 1

這是我用於的代碼：

//Right-align the button image
CGSize size = [[myButton titleForState:UIControlStateNormal] sizeWithFont:myButton.titleLabel.font];
[myButton setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -size.width)];
[myButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, myButton.imageView.image.size.width + 5)];

Answer 2

更改UIButton上的imageEdgeInsets屬性，然后只使用setImage:forState:

Answer 3

以下代碼有效：

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = buttonRect;
[button setTitle:@"A title" forState:UIControlStateNormal];
[button setImage:buttonImage forState:UIControlStateNormal];
button.imageEdgeInsets = UIEdgeInsetsMake(0.0, WIDTH(button.titleLabel) + 10.0, 0.0, 0.0);
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

Answer 4

請記住，UIButton繼承自UIView，因此您可以像其他任何視圖一樣向其添加子視圖。 在您的情況下，您將創建一個按鈕，然后在左側添加UILabel，在右側添加UIImage：

// Create the button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];

// Now load the image and create the image view
UIImage *image = [UIImage imageNamed:@"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(/*frame*/)];
[imageView setImage:image];

// Create the label and set its text
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(/*frame*/)];
[label setText:@"Your title"];

// Put it all together
[button addSubview:label];
[button addSubview:imageView];

Answer 5

您還可以覆蓋UIButton的titleRectForContentRect:和imageRectForContentRect:方法，以便將文本和圖像定位在您想要的任何位置。

Answer 6

在Swift中，任何關心的人（間隔為10pt）：

let size = (self.titleForState(UIControlState.Normal)! as NSString).sizeWithAttributes([NSFontAttributeName:self.titleLabel!.font])
let offset = (size.width + 10)
self.imageEdgeInsets = UIEdgeInsetsMake(0, offset, 0, -offset)
self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, self.imageView!.frame.size.width + 10)

Answer 7

對於在iOS 9上使用，我在這個帖子中嘗試了很多答案，但它們都不適合我。 我找到了自己的答案如下：

class MyButton: UIButton {

  override func layoutSubviews() {
    super.layoutSubviews()

    self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left

    if self.imageView?.image != nil {
      // Move icon to right side
      self.imageEdgeInsets = UIEdgeInsets(
        top: 0,
        left: self.bounds.size.width - self.imageView!.image!.size.width,
        bottom: 0,
        right: 0)

      // Move title to left side
      self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)

    }
  }
}

SWIFT 3：

class MyButton: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.left

        if self.imageView?.image != nil {
            // Move icon to right side
            self.imageEdgeInsets = UIEdgeInsets(
                top: 0,
                left: self.bounds.size.width - self.imageView!.image!.size.width,
                bottom: 0,
                right: 0)

            // Move title to left side
            self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)

        }
    }
}

我希望它會像我一樣幫助案件中的某個人！

Answer 8

這是Swift中UIButton的子類，它將左側的圖像與中心的文本對齊。 將imageLeftInset設置為所需的值。

class LeftImageAlignedButton : UIButton {

var imageLeftInset : CGFloat = 10.0

override func layoutSubviews() {
    super.layoutSubviews()
    self.contentHorizontalAlignment = .Left
    if let font = titleLabel?.font {
        let textWidth = ((titleForState(state) ?? "") as NSString).sizeWithAttributes([NSFontAttributeName:font]).width
        let imageWidth = imageForState(state)?.size.width ?? 0.0
        imageEdgeInsets = UIEdgeInsets(top: 0, left: imageLeftInset, bottom: 0, right: 0)
        titleEdgeInsets = UIEdgeInsets(top: 0, left: bounds.width/2 - textWidth/2.0 - imageWidth, bottom: 0, right: 0)
    }
}
}

Answer 9

創建一個UIButton子類並覆蓋其layoutSubviews方法以編程方式對齊文本和圖像。 或者使用類似https://github.com/stevestreza/BlockKit/blob/master/Source/UIView-BKAdditions.h的內容，以便您可以使用塊實現layoutSubviews。