UIButton: imageEdgeInsets 및 titleEdgeInsets를 사용하여 이미지와 텍스트를 중앙에 배치하는 방법

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픽셀이며, setTitleEdgeInsets의 UIEdgeInsetMake 왼쪽 파라미터에 30을 입력하면 텍스트가 다시 중앙에 배치됩니다.문제는 이미지가 button.titleLabel 크기에 따라 달라지기 때문에 중심이 맞지 않는다는 것입니다.버튼 사이즈, 이미지 사이즈, title Label 사이즈에 대해서는 이미 여러 번 계산을 해봤지만, 어느 쪽도 완전히 중심에 맞춰지지 않았습니다.

누군가 이미 같은 문제를 겪었나요?

여기에서는, 매직 넘버를 사용하지 않고, 텍스트의 중앙에 이미지를 배치하는 일반적인 방법은 다음과 같습니다.다음 코드는 오래된 코드이므로 다음 업데이트 버전 중 하나를 사용해야 합니다.

// 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)];

이제 이미지와 텍스트가 중앙에 배치됩니다(이 예에서는 이미지가 텍스트 위에 표시됩니다).

건배.

Jesse Crossen의 답변에 따라 Swift 확장 기능을 사용할 수 있습니다.

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도 합니다.은 contentEdgeInsets를 확실하게 위해 합니다.이 설정은 다음 사항을 확실히 하기 위해 필요하다고 생각합니다.intrinsicContentSize는 정상적으로 동작하므로 자동 레이아웃을 사용해야 합니다.

UIKit 컨트롤을 세분화해서는 안 되기 때문에 UIButton 서브클래스의 솔루션은 모두 엄밀히 말하면 불법이라고 생각합니다.즉, 이론상으로는 향후 릴리즈에 침입할 가능성이 있습니다.

편집: Swift 3용으로 업데이트됨

Jesse Crossen의 답변에 대한 Swift 솔루션을 찾고 있는 경우, 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. 나는 위의 제시 크로센의 예를 사용했다.그러나 텍스트 높이 문제를 수정하고 텍스트 여백을 가로로 지정할 수 있는 기능을 추가했습니다.여백은 텍스트가 단추의 가장자리를 누르지 않도록 줄바꿈할 때 유용합니다.

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

나는 @Tod Cunningham의 대답 방법을 만들었다.

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

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

Xcode 11+용으로 업데이트됨

원래 답변에 기재되어 있던 인스톨은 Xcode의 최신 버전으로 사이즈 검사기로 이동되었습니다.스위치가 언제 발생했는지 100% 알 수 없지만 Attribute Inspector에서 insert 정보가 발견되지 않으면 독자는 사이즈인스펙터를 확인해야 합니다.아래는 새로운 설치 화면의 샘플입니다(11.5 현재 크기 속성 검사기의 상단에 있음).

원답

다른 답변은 문제 없습니다만, 코드 0줄을 사용하여 X코드 내에서 동일한 동작을 시각적으로 수행할 수 있다는 점을 유의하고 싶습니다.이 솔루션은 계산된 값이 필요하지 않거나 스토리보드/xib를 사용하여 빌드할 때 유용합니다(그렇지 않으면 다른 솔루션이 적용됩니다).

주의 - OP의 질문은 필요한 코드임을 이해합니다.스토리보드나 xib를 사용하는 사용자를 위한 논리적인 대안으로 이 답변을 제공하는 것뿐입니다.

모서리 삽입을 사용하여 버튼의 이미지, 제목 및 내용 보기에서 간격을 수정하려면 버튼/컨트롤을 선택하고 속성 검사기를 엽니다.인스펙터 중앙으로 스크롤하여 Edge 삽입 섹션을 찾습니다.

제목, 이미지 또는 컨텐츠 뷰의 특정 에지 삽입에 액세스하여 수정할 수도 있습니다.

이치노 Interface Builder +설정 할 수 없는 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);
}

이 코드 덩어리로 이런 걸 얻을 수 있을 거예요

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

제시 크로센의 대답에 약간의 변화가 있어 내게는 딱 들어맞았다.

다음 대신:

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. 문자열 길이와 이미지 크기가 다른 동적 텍스트 및 이미지 변경

저는 이렇게 해서 만족하고 있습니다.

• 배경 이미지(흐림 및 색상이 있는 둥근 원)를 사용하여 스토리보드에 버튼을 만듭니다.

• 내 클래스에서 UIMageView 선언:

  @implementation BlahViewController {
      UIImageView *_imageView;
  }
  

• 초기화 시 이미지 뷰 인스턴스 생성:

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

• in 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()는 화질의 픽셀 경계에 있는 것을 확인하는 데 중요합니다.

텍스트와 이미지를 모두 수평 중앙에 배치하려면 텍스트 위의 이미지를 선택합니다.인터페이스 빌더에서 텍스트를 중앙에 배치하고 상단 삽입물(이미지 작성 공간)을 추가합니다.(왼쪽 inset은 0으로 해 둡니다).인터페이스 빌더를 사용하여 이미지를 선택합니다.실제 위치는 코드에서 설정되므로 IB에서는 문제가 발생하지 않습니다.위의 다른 답변과 달리 이는 현재 지원되는 모든 IOS 버전(5, 6 및 7)에서 실제로 작동합니다.

코드에서는 이미지를 캡처한 후 버튼의 ImageView(버튼의 이미지를 늘로 설정)를 파기합니다(필요에 따라 텍스트가 자동으로 중앙에 오도록 합니다).그런 다음 동일한 프레임 크기와 이미지로 ImageView를 인스턴스화하여 중앙에 배치합니다.

이 방법으로도 인터페이스 빌더에서 이미지를 선택할 수 있습니다(시뮬레이터와 같이 IB에서는 정렬되지 않지만 지원되는 모든 IOS 버전에서 다른 솔루션이 호환되지는 않습니다).

뷰의 컨스트럭터에서 이미지 크기와 텍스트 너비를 얻을 수 없었기 때문에 이 작업을 완료하는 데 어려움을 겪고 있었습니다.제시의 대답에 두 가지 작은 변화가 작용했다.

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

}

버튼 사이즈가 80 x 80 픽셀로 정상적으로 동작.

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

언급URL : https://stackoverflow.com/questions/2451223/uibutton-how-to-center-an-image-and-a-text-using-imageedgeinsets-and-titleedgei