UIButton: วิธีจัดรูปภาพและข้อความให้อยู่กึ่งกลางโดยใช้ imageEdgeInsets และ titleEdgeInsets

หากฉันใส่เฉพาะภาพในปุ่มและตั้งค่า imageEdgeInsets ให้ใกล้เคียงกับด้านบนมากขึ้นภาพนั้นจะอยู่ตรงกลางและทำงานได้ตามที่คาดไว้:

[button setImage:image forState:UIControlStateNormal];
[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, 0.0)];

ถ้าฉันใส่ข้อความเพียงปุ่มเดียวและตั้งค่า titleEdgeInsets ให้ใกล้กับด้านล่างมากขึ้นข้อความจะอยู่กึ่งกลางและทำงานตามที่คาดไว้:

[button setTitle:title forState:UIControlStateNormal];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, -30, 0.0)];

แต่ถ้าฉันใส่ทั้ง 4 บรรทัดเข้าด้วยกันข้อความจะรบกวนภาพและทั้งคู่ขาดการจัดตำแหน่งกึ่งกลาง

รูปภาพของฉันทั้งหมดมีความกว้าง 30 พิกเซลและถ้าฉันใส่ 30 ในพารามิเตอร์ด้านซ้ายของ UIEdgeInsetMake สำหรับ setTitleEdgeInsets ข้อความจะอยู่กึ่งกลางอีกครั้ง ปัญหาคือภาพไม่เคยอยู่ตรงกลางเพราะปรากฏว่ามันขึ้นอยู่กับขนาดของ button.titleLabel ฉันได้ลองคำนวณหลายอย่างด้วยขนาดปุ่มขนาดภาพขนาดหัวเรื่องและไม่เคยอยู่ตรงกลางทั้งสองอย่างสมบูรณ์

มีคนปัญหาเดียวกันอยู่แล้วใช่ไหม

สำหรับสิ่งที่คุ้มค่าต่อไปนี้เป็นวิธีแก้ปัญหาทั่วไปในการจัดตำแหน่งภาพที่อยู่ตรงกลางเหนือข้อความโดยไม่ต้องใช้หมายเลขเวทย์มนตร์ โปรดทราบว่ารหัสต่อไปนี้ล้าสมัยและคุณควรใช้หนึ่งในรุ่นที่ปรับปรุงด้านล่าง :

// the space between the image and text
CGFloat spacing = 6.0;

// lower the text and push it left so it appears centered 
//  below the image
CGSize imageSize = button.imageView.frame.size;
button.titleEdgeInsets = UIEdgeInsetsMake(
  0.0, - imageSize.width, - (imageSize.height + spacing), 0.0);

// raise the image and push it right so it appears centered
//  above the text
CGSize titleSize = button.titleLabel.frame.size;
button.imageEdgeInsets = UIEdgeInsetsMake(
  - (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);

รุ่นต่อไปนี้มีการเปลี่ยนแปลงเพื่อรองรับiOS 7+ที่ได้รับการแนะนำในความคิดเห็นด้านล่าง ฉันยังไม่ได้ทดสอบโค้ดนี้ด้วยตัวเองดังนั้นฉันจึงไม่แน่ใจว่ามันใช้งานได้ดีแค่ไหนหรือมันจะแตกถ้าใช้ภายใต้ iOS เวอร์ชันก่อนหน้านี้

// the space between the image and text
CGFloat spacing = 6.0;

// lower the text and push it left so it appears centered 
//  below the image
CGSize imageSize = button.imageView.image.size;
button.titleEdgeInsets = UIEdgeInsetsMake(
  0.0, - imageSize.width, - (imageSize.height + spacing), 0.0);

// raise the image and push it right so it appears centered
//  above the text
CGSize titleSize = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName: button.titleLabel.font}];
button.imageEdgeInsets = UIEdgeInsetsMake(
  - (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);

// increase the content height to avoid clipping
CGFloat edgeOffset = fabsf(titleSize.height - imageSize.height) / 2.0;
button.contentEdgeInsets = UIEdgeInsetsMake(edgeOffset, 0.0, edgeOffset, 0.0);

รุ่นSwift 5.0

extension UIButton {
  func alignVertical(spacing: CGFloat = 6.0) {
    guard let imageSize = imageView?.image?.size,
      let text = titleLabel?.text,
      let font = titleLabel?.font
    else { return }

    titleEdgeInsets = UIEdgeInsets(
      top: 0.0,
      left: -imageSize.width,
      bottom: -(imageSize.height + spacing),
      right: 0.0
    )

    let titleSize = text.size(withAttributes: [.font: font])
    imageEdgeInsets = UIEdgeInsets(
      top: -(titleSize.height + spacing),
      left: 0.0,
      bottom: 0.0, right: -titleSize.width
    )

    let edgeOffset = abs(titleSize.height - imageSize.height) / 2.0
    contentEdgeInsets = UIEdgeInsets(
      top: edgeOffset,
      left: 0.0,
      bottom: edgeOffset,
      right: 0.0
    )
  }
}

พบได้อย่างไร

ก่อนอื่นให้กำหนดค่าข้อความของtitleLabel(เนื่องจากลักษณะเช่นตัวหนาตัวเอียง ฯลฯ ) จากนั้นใช้setTitleEdgeInsetsพิจารณาความกว้างของภาพของคุณ:

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitle:title forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont boldSystemFontOfSize:10.0]];

// Left inset is the negative of image width.
[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -image.size.width, -25.0, 0.0)]; 

หลังจากนั้นให้ใช้setTitleEdgeInsetsพิจารณาความกว้างของขอบเขตข้อความ:

[button setImage:image forState:UIControlStateNormal];

// Right inset is the negative of text bounds width.
[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, -button.titleLabel.bounds.size.width)];

ตอนนี้รูปภาพและข้อความจะอยู่กึ่งกลาง (ในตัวอย่างนี้รูปภาพจะปรากฏเหนือข้อความ)

ไชโย

คุณสามารถทำได้ด้วยส่วนขยาย Swift นี้ซึ่งมีพื้นฐานจากคำตอบของ Jesse Crossen:

extension UIButton {
  func centerLabelVerticallyWithPadding(spacing:CGFloat) {
    // update positioning of image and title
    let imageSize = self.imageView.frame.size
    self.titleEdgeInsets = UIEdgeInsets(top:0,
                                        left:-imageSize.width,
                                        bottom:-(imageSize.height + spacing),
                                        right:0)
    let titleSize = self.titleLabel.frame.size
    self.imageEdgeInsets = UIEdgeInsets(top:-(titleSize.height + spacing),
                                        left:0,
                                        bottom: 0,
                                        right:-titleSize.width)

    // reset contentInset, so intrinsicContentSize() is still accurate
    let trueContentSize = CGRectUnion(self.titleLabel.frame, self.imageView.frame).size
    let oldContentSize = self.intrinsicContentSize()
    let heightDelta = trueContentSize.height - oldContentSize.height
    let widthDelta = trueContentSize.width - oldContentSize.width
    self.contentEdgeInsets = UIEdgeInsets(top:heightDelta/2.0,
                                          left:widthDelta/2.0,
                                          bottom:heightDelta/2.0,
                                          right:widthDelta/2.0)
  }
}

สิ่งนี้กำหนดฟังก์ชั่นcenterLabelVerticallyWithPaddingที่ตั้งชื่อเรื่องและรูปภาพแทรกอย่างเหมาะสม

นอกจากนี้ยังตั้งค่า contentEdgeInsets ซึ่งฉันเชื่อว่าเป็นสิ่งจำเป็นเพื่อให้แน่ใจว่าintrinsicContentSizeยังคงทำงานได้อย่างถูกต้องซึ่งจะต้องใช้เค้าโครงอัตโนมัติ

ฉันเชื่อว่าโซลูชันทั้งหมดที่ UIButton ของคลาสย่อยไม่ถูกกฎหมายในทางเทคนิคเนื่องจากคุณไม่ควรควบคุม UIKit ของคลาสย่อย เช่นในทางทฤษฎีพวกเขาอาจแตกหักในรุ่นอนาคต

แก้ไข: อัปเดตสำหรับ Swift 3

ในกรณีที่คุณกำลังมองหาคำตอบอย่างรวดเร็วของคำตอบของ Jesse Crossen คุณสามารถเพิ่มสิ่งนี้ลงในคลาสย่อยของ UIButton:

override func layoutSubviews() {

    let spacing: CGFloat = 6.0

    // lower the text and push it left so it appears centered
    //  below the image
    var titleEdgeInsets = UIEdgeInsets.zero
    if let image = self.imageView?.image {
        titleEdgeInsets.left = -image.size.width
        titleEdgeInsets.bottom = -(image.size.height + spacing)
    }
    self.titleEdgeInsets = titleEdgeInsets

    // raise the image and push it right so it appears centered
    //  above the text
    var imageEdgeInsets = UIEdgeInsets.zero
    if let text = self.titleLabel?.text, let font = self.titleLabel?.font {
        let attributes = [NSFontAttributeName: font]
        let titleSize = text.size(attributes: attributes)
        imageEdgeInsets.top = -(titleSize.height + spacing)
        imageEdgeInsets.right = -titleSize.width
    }
    self.imageEdgeInsets = imageEdgeInsets

    super.layoutSubviews()
}

มีตัวอย่างที่ดีอยู่ที่นี่ แต่ฉันไม่สามารถทำให้มันทำงานได้ในทุกกรณีเมื่อต้องจัดการกับข้อความหลายบรรทัด (การตัดข้อความ) ในที่สุดเพื่อให้มันทำงานฉันรวมสองสามเทคนิค:

1. ฉันใช้ตัวอย่าง Jesse Crossen ด้านบน อย่างไรก็ตามฉันแก้ไขปัญหาความสูงของข้อความและฉันเพิ่มความสามารถในการระบุระยะขอบข้อความในแนวนอน ระยะขอบมีประโยชน์เมื่ออนุญาตให้ตัดข้อความดังนั้นจึงไม่กดปุ่มที่ขอบ:

   // the space between the image and text
   CGFloat spacing = 10.0;
   float   textMargin = 6;
   
   // get the size of the elements here for readability
   CGSize  imageSize   = picImage.size;
   CGSize  titleSize   = button.titleLabel.frame.size;
   CGFloat totalHeight = (imageSize.height + titleSize.height + spacing);      // get the height they will take up as a unit
   
   // lower the text and push it left to center it
   button.titleEdgeInsets = UIEdgeInsetsMake( 0.0, -imageSize.width +textMargin, - (totalHeight - titleSize.height), +textMargin );   // top, left, bottom, right
   
   // the text width might have changed (in case it was shortened before due to 
   // lack of space and isn't anymore now), so we get the frame size again
   titleSize = button.titleLabel.bounds.size;
   
   button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width );     // top, left, bottom, right        

2. ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งป้ายกำกับข้อความเพื่อตัดคำ

   button.titleLabel.numberOfLines = 2; 
   button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
   button.titleLabel.textAlignment = UITextAlignmentCenter;

3. ส่วนใหญ่จะใช้งานได้ในขณะนี้ อย่างไรก็ตามฉันมีปุ่มบางปุ่มที่ไม่สามารถแสดงภาพได้อย่างถูกต้อง รูปภาพถูกเลื่อนไปทางขวาหรือซ้าย (ไม่ได้อยู่กึ่งกลาง) ดังนั้นฉันจึงใช้เทคนิคการแทนที่เค้าโครง UIButton เพื่อบังคับให้ imageView ให้อยู่กึ่งกลาง

   @interface CategoryButton : UIButton
   @end
   
   @implementation CategoryButton
   
   - (void)layoutSubviews
   {
       // Allow default layout, then center imageView
       [super layoutSubviews];
   
       UIImageView *imageView = [self imageView];
       CGRect imageFrame = imageView.frame;
       imageFrame.origin.x = (int)((self.frame.size.width - imageFrame.size.width)/ 2);
       imageView.frame = imageFrame;
   }
   @end

ฉันสร้างวิธีการสำหรับคำตอบของ @ TodCunningham

 -(void) AlignTextAndImageOfButton:(UIButton *)button
 {
   CGFloat spacing = 2; // the amount of spacing to appear between image and title
   button.imageView.backgroundColor=[UIColor clearColor];
   button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
   button.titleLabel.textAlignment = UITextAlignmentCenter;
   // get the size of the elements here for readability
   CGSize imageSize = button.imageView.frame.size;
   CGSize titleSize = button.titleLabel.frame.size;

  // lower the text and push it left to center it
  button.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height   + spacing), 0.0);

  // the text width might have changed (in case it was shortened before due to 
  // lack of space and isn't anymore now), so we get the frame size again
   titleSize = button.titleLabel.frame.size;

  // raise the image and push it right to center it
  button.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing), 0.0, 0.0, -     titleSize.width);
 }

อัปเดตสำหรับ Xcode 11+

สิ่งที่อธิบายไว้ในคำตอบเดิมของฉันถูกย้ายไปยังผู้ตรวจสอบขนาดใน Xcode เวอร์ชันล่าสุด ฉันไม่ชัดเจน 100% เมื่อสวิตช์เกิดขึ้น แต่ผู้อ่านควรตรวจสอบขนาดตัวตรวจสอบหากไม่พบข้อมูลสิ่งที่ใส่เข้าไปในตัวตรวจสอบคุณลักษณะ ด้านล่างเป็นตัวอย่างของหน้าจอสิ่งที่ใส่เข้าไปใหม่ (อยู่ที่ด้านบนของขนาดผู้ตรวจสอบคุณลักษณะขนาดตั้งแต่ 11.5)

คำตอบเดิม

ไม่มีอะไรผิดปกติกับคำตอบอื่น ๆ แต่ฉันแค่อยากจะทราบว่าพฤติกรรมเดียวกันนี้สามารถทำได้โดยใช้ Xcode โดยใช้โค้ดศูนย์ โซลูชันนี้มีประโยชน์หากคุณไม่ต้องการค่าที่คำนวณได้หรือกำลังสร้างด้วยสตอรีบอร์ด / xib (ไม่เช่นนั้นจะใช้วิธีแก้ไขปัญหาอื่น)

หมายเหตุ - ฉันเข้าใจว่าคำถามของ OP คือรหัสที่ต้องใช้ ฉันแค่ให้คำตอบนี้เพื่อความสมบูรณ์และเป็นทางเลือกเชิงตรรกะสำหรับผู้ใช้กระดานเรื่องราว / xib

ในการปรับเปลี่ยนระยะห่างของภาพชื่อเรื่องและมุมมองเนื้อหาของปุ่มโดยใช้การแทรกขอบคุณสามารถเลือกปุ่ม / การควบคุมและเปิดตัวตรวจสอบคุณสมบัติ เลื่อนลงไปทางกลางของผู้ตรวจสอบและค้นหาส่วนสำหรับการแทรกขอบ

ท่านสามารถเข้าถึงและแก้ไขส่วนเสริมของขอบสำหรับมุมมองหัวเรื่องภาพหรือเนื้อหา

อย่าต่อสู้กับระบบ หากเลย์เอาต์ของคุณซับซ้อนเกินกว่าที่จะจัดการโดยใช้ Interface Builder + บางทีรหัสการกำหนดค่าง่าย ๆ ให้ทำเลย์เอาต์ด้วยตนเองในวิธีที่ง่ายกว่าโดยใช้layoutSubviewsนั่นคือสิ่งที่มันต้องการ! ทุกอย่างอื่นจะเป็นจำนวนมากที่จะแฮ็ก

สร้างคลาสย่อย UIButton และแทนที่layoutSubviewsเมธอดเพื่อจัดแนวข้อความและรูปภาพของคุณโดยทางโปรแกรม หรือใช้บางอย่างเช่นhttps://github.com/nickpaulson/BlockKit/blob/master/Source/UIView-BKAdditions.hเพื่อให้คุณสามารถใช้ layoutSubviews โดยใช้บล็อก

คลาสย่อย UIButton

- (void)layoutSubviews {
    [super layoutSubviews];
    CGFloat spacing = 6.0;
    CGSize imageSize = self.imageView.image.size;
    CGSize titleSize = [self.titleLabel sizeThatFits:CGSizeMake(self.frame.size.width, self.frame.size.height - (imageSize.height + spacing))];
    self.imageView.frame = CGRectMake((self.frame.size.width - imageSize.width)/2, (self.frame.size.height - (imageSize.height+spacing+titleSize.height))/2, imageSize.width, imageSize.height);
    self.titleLabel.frame = CGRectMake((self.frame.size.width - titleSize.width)/2, CGRectGetMaxY(self.imageView.frame)+spacing, titleSize.width, titleSize.height);
}

คำตอบล่าสุดของJesse CrossenสำหรับSwift 4 :

extension UIButton {
    func alignVertical(spacing: CGFloat = 6.0) {
        guard let imageSize = self.imageView?.image?.size,
            let text = self.titleLabel?.text,
            let font = self.titleLabel?.font
            else { return }
        self.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -imageSize.width, bottom: -(imageSize.height + spacing), right: 0.0)
        let labelString = NSString(string: text)
        let titleSize = labelString.size(withAttributes: [kCTFontAttributeName as NSAttributedStringKey: font])
        self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
        let edgeOffset = abs(titleSize.height - imageSize.height) / 2.0;
        self.contentEdgeInsets = UIEdgeInsets(top: edgeOffset, left: 0.0, bottom: edgeOffset, right: 0.0)
    }
}

ใช้วิธีนี้:

override func viewDidLayoutSubviews() {
    button.alignVertical()
}

ด้วยโค้ดอันนี้คุณจะได้รับสิ่งนี้

extension UIButton {
    func alignTextUnderImage() {
        guard let imageView = imageView else {
                return
        }
        self.contentVerticalAlignment = .Top
        self.contentHorizontalAlignment = .Center
        let imageLeftOffset = (CGRectGetWidth(self.bounds) - CGRectGetWidth(imageView.bounds)) / 2//put image in center
        let titleTopOffset = CGRectGetHeight(imageView.bounds) + 5
        self.imageEdgeInsets = UIEdgeInsetsMake(0, imageLeftOffset, 0, 0)
        self.titleEdgeInsets = UIEdgeInsetsMake(titleTopOffset, -CGRectGetWidth(imageView.bounds), 0, 0)
    }
}

ส่วนขยาย UIButton พร้อมSwift 3+ไวยากรณ์:

extension UIButton {
    func alignImageAndTitleVertically(padding: CGFloat = 6.0) {
        let imageSize: CGSize = imageView!.image!.size
        titleEdgeInsets = UIEdgeInsetsMake(0.0, -imageSize.width, -(imageSize.height + padding), 0.0)
        let labelString = NSString(string: titleLabel!.text!)
        let titleSize = labelString.size(attributes: [NSFontAttributeName: titleLabel!.font])
        self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + padding), 0.0, 0.0, -titleSize.width)
        let edgeOffset = abs(titleSize.height - imageSize.height) / 2.0;
        self.contentEdgeInsets = UIEdgeInsetsMake(edgeOffset, 0.0, edgeOffset, 0.0)
    }
}

คำตอบเดิม: https://stackoverflow.com/a/7199529/3659227

เพียงแค่การเปลี่ยนแปลงเล็กน้อยกับคำตอบของ Jesse Crossen ที่ทำให้มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน:

แทน:

CGSize titleSize = button.titleLabel.frame.size;

ฉันเคยใช้สิ่งนี้:

CGSize titleSize = [button.titleLabel.text sizeWithAttributes: @{NSFontAttributeName:button.titleLabel.font}];

ใช้button.titleLabel.frame.size.widthงานได้ดีตราบใดที่ฉลากสั้นพอที่จะไม่ถูกตัดทอน เมื่อข้อความฉลากถูกตัดทอนตำแหน่งจะไม่ทำงาน สละ

CGSize titleSize = [[[button titleLabel] text] sizeWithFont:[[button titleLabel] font]];

ใช้ได้กับฉันแม้ว่าข้อความฉลากจะถูกตัดทอน

ฉันดูคำตอบที่มีอยู่แล้ว แต่ฉันก็พบว่าการตั้งค่ากรอบปุ่มเป็นขั้นตอนแรกที่สำคัญ

นี่คือฟังก์ชั่นที่ฉันใช้ที่ดูแลเรื่องนี้:

const CGFloat kImageTopOffset   = -15;
const CGFloat kTextBottomOffset = -25;

+ (void) centerButtonImageTopAndTextBottom: (UIButton*)         button 
                                     frame: (CGRect)            buttonFrame
                                      text: (NSString*)         textString
                                 textColor: (UIColor*)          textColor
                                      font: (UIFont*)           textFont
                                     image: (UIImage*)          image
                                  forState: (UIControlState)    buttonState
{
    button.frame = buttonFrame;

    [button setTitleColor: (UIColor*)       textColor
                 forState: (UIControlState) buttonState];

    [button setTitle: (NSString*) textString
            forState: (UIControlState) buttonState ];


    [button.titleLabel setFont: (UIFont*) textFont ];

    [button setTitleEdgeInsets: UIEdgeInsetsMake( 0.0, -image.size.width, kTextBottomOffset,  0.0)]; 

    [button setImage: (UIImage*)       image 
            forState: (UIControlState) buttonState ];

    [button setImageEdgeInsets: UIEdgeInsetsMake( kImageTopOffset, 0.0, 0.0,- button.titleLabel.bounds.size.width)];
}

หรือคุณสามารถใช้หมวดหมู่นี้:

@interface UIButton (VerticalLayout)  

- (void)centerVerticallyWithPadding:(float)padding;  
- (void)centerVertically;  

@end  


@implementation UIButton (VerticalLayout)  

- (void)centerVerticallyWithPadding:(float)padding 
{      
    CGSize imageSize = self.imageView.frame.size;  
    CGSize titleSize = self.titleLabel.frame.size;  

    CGFloat totalHeight = (imageSize.height + titleSize.height + padding);  

    self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height),
                                            0.0f,
                                            0.0f,
                                            - titleSize.width);

    self.titleEdgeInsets = UIEdgeInsetsMake(0.0f,
                                            - imageSize.width,
                                            - (totalHeight - titleSize.height),
                                            0.0f);

}


- (void)centerVertically
{  
    const CGFloat kDefaultPadding = 6.0f;

    [self centerVerticallyWithPadding:kDefaultPadding];  
}  


@end

กรณีการใช้งานของฉันทำให้สิ่งที่ใส่เข้าไปไม่สามารถจัดการได้:

1. ภาพพื้นหลังที่ปุ่มยังคงที่
2. การเปลี่ยนแปลงข้อความและรูปภาพแบบไดนามิกโดยที่ความยาวและขนาดสตริงแตกต่างกันไป

นี่คือสิ่งที่ฉันทำลงไปและฉันก็มีความสุขกับมัน:

• สร้างปุ่มบนกระดานเรื่องราวด้วยภาพพื้นหลัง (วงกลมรอบที่มีความพร่ามัวและสี)

• ประกาศ UIImageView ในชั้นเรียนของฉัน:

  @implementation BlahViewController {
      UIImageView *_imageView;
  }

• สร้างอินสแตนซ์ดูภาพใน init:

  -(id)initWithCoder:(NSCoder *)aDecoder {
      self = [super initWithCoder:aDecoder];
      if (self) {
          _imageView = [[UIImageView alloc] initWithCoder:aDecoder];
       }
       return self;
   }

• ใน viewDidLoad เพิ่มเลเยอร์ใหม่ให้กับปุ่มสำหรับมุมมองภาพของเราและตั้งค่าการจัดแนวข้อความ:

  [self.btn addSubview:_imageView];
  [self.btn.titleLabel setTextAlignment:NSTextAlignmentCenter];

• ในวิธีการคลิกปุ่มเพิ่มภาพซ้อนทับที่ฉันเลือกไว้ในมุมมองภาพปรับขนาดให้พอดีกับภาพและจัดให้อยู่กึ่งกลางปุ่ม แต่เลื่อนขึ้นเป็น 15 เพื่อให้ฉันสามารถวางข้อความตรงข้ามด้านล่าง:

  [_imageView setImage:[UIImage imageNamed:@"blahImageBlah]];
  [_imageView sizeToFit];
  _imageView.center = CGPointMake(ceilf(self.btn.bounds.size.width / 2.0f),
           ceilf((self.btn.bounds.size.height / 2.0f) - 15));
  [self.btn setTitle:@"Some new text" forState:UIControlStateNormal];

หมายเหตุ: ceilf () เป็นสิ่งสำคัญเพื่อให้แน่ใจว่าอยู่ในขอบเขตพิกเซลสำหรับคุณภาพของภาพ

สมมติว่าคุณต้องการให้ข้อความและภาพอยู่กึ่งกลางในแนวนอนภาพด้านบนข้อความ: จัดกึ่งกลางข้อความจากตัวสร้างส่วนต่อประสานและเพิ่มส่วนบนสุด (เพิ่มที่ว่างสำหรับภาพ) (ปล่อยสิ่งที่ใส่เข้าไปทางซ้ายเป็น 0) ใช้ตัวสร้างส่วนต่อประสานเพื่อเลือกภาพ - ตำแหน่งจริงจะถูกตั้งค่าจากรหัสดังนั้นไม่ต้องกังวลว่าสิ่งต่าง ๆ จะดูไม่ดีใน IB ต่างจากคำตอบอื่น ๆ ข้างต้นนี่ใช้งานได้กับ ios ทุกรุ่นที่รองรับในปัจจุบัน (5,6 และ 7)

ในรหัสเพียงแค่ทิ้ง ImageView ของปุ่ม (โดยการตั้งค่าภาพของปุ่มเป็นโมฆะ) หลังจากที่จับภาพ (สิ่งนี้จะจัดกึ่งกลางข้อความโดยอัตโนมัติถ้าจำเป็น) จากนั้นยกตัวอย่าง ImageView ของคุณเองด้วยขนาดเฟรมและรูปภาพที่เหมือนกันแล้วจัดวางไว้ตรงกลาง

วิธีนี้คุณยังคงสามารถเลือกรูปภาพจากเครื่องมือสร้างส่วนต่อประสาน (แม้ว่าจะไม่ได้จัดแนวใน IB เหมือนกับในโปรแกรมจำลอง แต่หลังจากนั้นโซลูชันอื่น ๆ ก็ไม่สามารถทำงานร่วมกันได้ในทุกรุ่นของ iOS ที่รองรับ)

ฉันพยายามทำสิ่งนี้เพราะฉันไม่สามารถรับขนาดภาพและความกว้างของข้อความในตัวสร้างของมุมมองของฉัน การเปลี่ยนแปลงเล็กน้อยในสองคำตอบของ Jesse นั้นเหมาะกับฉัน:

CGFloat spacing = 3;
self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - image.size.width, - (image.size.height + spacing), 0.0);
CGSize titleSize = [name sizeWithAttributes:@{NSFontAttributeName:self.titleLabel.font}];
self.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);

การเปลี่ยนแปลงคือ:

• การใช้ [NSString sizeWithAttributes]เพื่อรับความกว้างข้อความ
• รับขนาดภาพโดยตรงUIImageแทนUIImageView

มันใช้งานได้ดีสำหรับฉันสำหรับปุ่มหลายปุ่มที่มีความกว้างของภาพที่แตกต่างกันและความยาวชื่อเรื่องที่แตกต่างกัน:

ประเภทรอง UIButton

override func layoutSubviews() {
    super.layoutSubviews()

    if let image = imageView?.image {

        let margin = 30 - image.size.width / 2
        let titleRect = titleRectForContentRect(bounds)
        let titleOffset = (bounds.width - titleRect.width - image.size.width - margin) / 2


        contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left
            imageEdgeInsets = UIEdgeInsetsMake(0, margin, 0, 0)
            titleEdgeInsets = UIEdgeInsetsMake(0, (bounds.width - titleRect.width -  image.size.width - margin) / 2, 0, 0)
    }

}

ทำงานได้ดีสำหรับปุ่มขนาด 80x80 พิกเซล

[self.leftButton setImageEdgeInsets:UIEdgeInsetsMake(0, 10.0, 20.0, 10.0)];    
[self.leftButton setTitleEdgeInsets:UIEdgeInsetsMake(60, -75.0, 0.0, 0.0)];

ฉันทำการปรับแต่งบางอย่างเพื่อให้ภาพจัดแนวตรงกลางแนวนอน:

// the space between the image and text
        let spacing = CGFloat(36.0);

        // lower the text and push it left so it appears centered
        //  below the image
        let imageSize = tutorialButton.imageView!.frame.size;
        tutorialButton.titleEdgeInsets = UIEdgeInsetsMake(
            0, -CGFloat(imageSize.width), -CGFloat(imageSize.height + spacing), 0.0);

        // raise the image and push it right so it appears centered
        //  above the text
        let titleSize = tutorialButton.titleLabel!.frame.size;
        tutorialButton.imageEdgeInsets = UIEdgeInsetsMake(
            -CGFloat(titleSize.height + spacing), CGFloat((tutorialButton.frame.width - imageSize.width) / 2), 0.0, -CGFloat(titleSize.width));

จำเป็นต้องใช้อุปกรณ์เสริมขอบหรือไม่ หากไม่เป็นเช่นนั้นคุณสามารถลองแสดงความเคารพต่อมุมมองพาเรนต์ศูนย์กลาง

extension UIButton 
{
    func centerImageAndTextVerticaAlignment(spacing: CGFloat) 
    {
        var titlePoint : CGPoint = convertPoint(center, fromView:superview)
        var imageViewPoint : CGPoint = convertPoint(center, fromView:superview)
        titlePoint.y += ((titleLabel?.size.height)! + spacing)/2
        imageViewPoint.y -= ((imageView?.size.height)! + spacing)/2
        titleLabel?.center = titlePoint
        imageView?.center = imageViewPoint

    }
}

คุณต้องย้ายรูปภาพไปทางขวาตามความกว้างของข้อความ จากนั้นย้ายข้อความไปทางซ้ายตามความกว้างของภาพ

UIEdgeInsets imageEdgeInsets = self.remoteCommandsButtonLights.imageEdgeInsets;
imageEdgeInsets.left = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:[button.titleLabel font]}].width;
imageEdgeInsets.bottom = 14.0;
button.imageEdgeInsets = imageEdgeInsets;

UIEdgeInsets titleEdgeInsets = self.remoteCommandsButtonLights.titleEdgeInsets;
titleEdgeInsets.left = -button.currentImage.size.width;
titleEdgeInsets.top = 20.0;
button.titleEdgeInsets = titleEdgeInsets;

จากนั้นปรับส่วนแทรกด้านบนและด้านล่างเพื่อปรับแกน Y สิ่งนี้สามารถทำได้โดยทางโปรแกรมเช่นกัน แต่ควรมีขนาดคงที่สำหรับขนาดภาพของคุณ ในขณะที่ส่วนแกน X จะต้องเปลี่ยนตามขนาดของฉลากข้อความในแต่ละปุ่ม

เพิ่มรหัสนี้ในส่วนขยาย Swift 4.2

 func moveImageLeftTextCenter(imagePadding: CGFloat = 30.0){
    guard let imageViewWidth = self.imageView?.frame.width else{return}
    guard let titleLabelWidth = self.titleLabel?.intrinsicContentSize.width else{return}
    self.contentHorizontalAlignment = .left
    imageEdgeInsets = UIEdgeInsets(top: 0.0, left: imagePadding - imageViewWidth / 2, bottom: 0.0, right: 0.0)
    titleEdgeInsets = UIEdgeInsets(top: 0.0, left: (bounds.width - titleLabelWidth) / 2 - imageViewWidth, bottom: 0.0, right: 0.0)
}
func moveImageRIghtTextCenter(imagePadding: CGFloat = 30.0){
    guard let imageViewWidth = self.imageView?.frame.width else{return}
    guard let titleLabelWidth = self.titleLabel?.intrinsicContentSize.width else{return}
    self.contentHorizontalAlignment = .right
    imageEdgeInsets = UIEdgeInsets(top: 0.0, left:0.0 , bottom: 0.0, right: imagePadding - imageViewWidth / 2)
    titleEdgeInsets = UIEdgeInsets(top: 0.0, left:0.0 , bottom: 0.0, right:(bounds.width - titleLabelWidth) / 2 - imageViewWidth)
}

เพียงแค่โยน 2 เซ็นต์ของฉันในนี้ทำงานสำหรับฉัน:

extension UIButton {
  public func centerImageAndTextVertically(spacing: CGFloat) {
    layoutIfNeeded()
    let contentFrame = contentRect(forBounds: bounds)
    let imageFrame = imageRect(forContentRect: contentFrame)
    let imageLeftInset = bounds.size.width * 0.5 - imageFrame.size.width * 0.5
    let imageTopInset = -(imageFrame.size.height + spacing * 0.5)
    let titleFrame = titleRect(forContentRect: contentFrame)
    let titleLeftInset = ((bounds.size.width - titleFrame.size.width) * 0.5) - imageFrame.size.width
    let titleTopInmset = titleFrame.size.height + spacing * 0.5
    imageEdgeInsets = UIEdgeInsets(top: imageTopInset, left: imageLeftInset, bottom: 0, right: 0)
    titleEdgeInsets = UIEdgeInsets(top: titleTopInmset, left: titleLeftInset, bottom: 0, right: 0)
  }
}