Tiêu đề UIButton và truy vấn căn chỉnh hình ảnh

Question

Tôi có UIButton và tôi đang cố đặt tiêu đề và hình ảnh trên đó.

Tôi muốn căn chỉnh tiêu đề cho một UIButton ở bên trái và đặt hình ảnh được căn chỉnh về bên phải. Tôi đang cố gắng để có được giao diện của nút trong ứng dụng hẹn giờ trong đồng hồ (một trong đó nói "khi hẹn giờ kết thúc").

Tôi đã chơi với contentHorizontalAlignment, contentEdgeInsets, titleEdgeInsets và imageEdgeInsets để đạt được mục tiêu của mình, nhưng vô ích. Các tài liệu cũng khá thưa thớt cho cùng một.

Làm cách nào để tôi có thể đạt được điều tương tự?

Các câu hỏi khác có liên quan, ứng dụng Hẹn giờ trong đồng hồ có hai tập hợp Văn bản, một văn bản được canh lề sang trái và căn phải khác với hình ảnh? Làm thế nào có thể được thực hiện trong một UIButton? (Tôi không cần chức năng đó mặc dù tại thời điểm này).

Answer 1

Thay đổi imageEdgeInsets tài sản trên UIButton và sau đó chỉ cần sử dụng setImage:forState:

Answer 2

Hãy nhớ rằng UIButton kế thừa từ UIView và vì vậy bạn có thể thêm các bản xem phụ vào nó giống như bất kỳ chế độ xem nào khác. Trong trường hợp của bạn, bạn sẽ tạo ra một nút, sau đó thêm một UILabel ở phía bên trái và một UIImage ở bên phải:

// 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 3

Đây là mã tôi sử dụng cho rằng:

//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 4

Tạo một lớp con UIButton và ghi đè phương pháp layoutSubviews của nó để căn chỉnh hình ảnh văn bản & bạn lập trình. Hoặc sử dụng một cái gì đó như https://github.com/stevestreza/BlockKit/blob/master/Source/UIView-BKAdditions.h để bạn có thể triển khai layoutSubviews bằng cách sử dụng một khối.

Answer 5

Các mã sau hoạt động:

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 6

Bạn cũng có thể ghi đè lên titleRectForContentRect: và imageRectForContentRect: phương pháp của UIButton ở vị trí thứ tự văn bản và hình ảnh của bạn bất cứ nơi nào bạn muốn.

Answer 7

Đây là lớp con của UIButton trong Swift sắp xếp hình ảnh ở bên trái và văn bản ở giữa. Đặt imageLeftInset thành giá trị mong muốn của bạn.

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 8

Trong Swift cho bất cứ ai quan tâm (với khoảng cách 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 9

Để sử dụng trên iOS 9, tôi đã cố gắng rất nhiều câu trả lời trong chủ đề này nhưng không ai trong số họ phù hợp với tôi. Tôi tìm thấy câu trả lời cho bản thân mình như sau:

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) 

     } 
    } 
} 

Tôi hy vọng nó sẽ giúp ai đó trong trường hợp như tôi!