UI 버튼 텍스트 여백/패딩

UI 버튼 텍스트 여백/패딩

저는 다음과 같은 레이아웃을 가지고 있으며, 왼쪽과 오른쪽에 패딩을 추가하려고 합니다.

컨트롤이 비활성화된 UI 버튼입니다.

버튼을 만드는 내 코드는 다음과 같습니다.

UIButton *buttonTime = [[UIButton alloc] initWithFrame:CGRectMake(90, 10, 50, 20)]; 
[buttonTime setBackgroundImage:[[UIImage imageNamed:@"bubble.png"] stretchableImageWithLeftCapWidth:9 topCapHeight:13] forState:UIControlStateDisabled];

[buttonTime setTitle:@"27 feb, 2011 11:10 PM" forState:UIControlStateDisabled];             
[buttonTime setTitleColor:[UIColor blackColor] forState:UIControlStateDisabled];
buttonTime.titleLabel.font=[UIFont fontWithName:@"Helvetica" size:8.0]; 
buttonTime.titleLabel.lineBreakMode= UILineBreakModeWordWrap;
[buttonTime setEnabled:FALSE];
[scrollView addSubview:buttonTime];
[buttonTime release];

스토리보드 또는 xib 내부의 Interface Builder Size Inspector에서 inset 값을 설정할 수도 있습니다.

// Swift
var titleEdgeInsets: UIEdgeInsets!

// Objective-C
@property(nonatomic) UIEdgeInsets titleEdgeInsets;

이 속성을 사용하여 단추 제목의 효과적인 도면 사각형 크기를 조정하고 위치를 바꿉니다.네 개의 삽입값(위, 왼쪽, 아래, 오른쪽) 각각에 대해 다른 값을 지정할 수 있습니다.양의 값을 사용하면 해당 가장자리가 축소되거나 삽입되어 단추 중앙에 더 가깝게 이동합니다.음의 값은 해당 에지를 확장하거나 앞으로 확장합니다.UIEdgeInsetsMake 함수를 사용하여 이 속성에 대한 값을 구성합니다.기본값은 UIEdgeInsetsZero입니다.

https://developer.apple.com/documentation/uikit/uibutton/1624010-titleedgeinsets

참고: (@2023/01)

제목EdgeInsets는 iOS 15.0에서 더 이상 사용되지 않습니다.

내용을 설정하면 다음을 방지할 수 있습니다.UIButton제목을 줄이거나 자르면 텍스트 여백에 덧씌워집니다.

스토리보드

코드

someButton.contentEdgeInsets = UIEdgeInsets (위: 0, 왼쪽: 5, 아래: 0, 오른쪽: 5)

에서 Swift 4 에서합니다의 contentEdgeInsets것은 아니다.titleEdgeInsets:

btn.contentEdgeInsets =  UIEdgeInsetsMake(8, 8, 8, 8)
btn.titleLabel?.lineBreakMode = .byWordWrapping

그러면 버튼이 텍스트를 감싸고 공간이 있는 한 한 줄로 유지됩니다. + 주변에 패딩을 추가합니다.

는 입니다를 입니다.titleEdgeInsets이입니다에서 와 같이 입니다.

이 속성은 레이아웃 중 제목 위치 지정에만 사용됩니다.> 버튼은 이 속성을 사용하여 고유한 ContentSize 및 >size를 결정하지 않습니다.적합합니다(_:).

즉, 여백 설정은 단추가 제목 레이블 및 여백에 맞게 명시적으로 크기가 지정된 경우에만 작동합니다.제목이 너무 길거나 여백이 너무 크면 제목 텍스트를 잘라낼 수 있습니다.컴파일 시간에 알고 있는 제목의 버튼은 괜찮지만, 가변 길이의 버튼 제목의 경우 문제가 발생할 수 있습니다.

은 를 입니다.titleEdgeInsets기본값으로 지정합니다.단추의 제목이 설정되면 단추의 제목 레이블과 추가 여백을 수용하는 명시적인 너비 및 높이 제약 조건을 추가합니다.예를 들어,

let margin: CGFloat = 10.0

let button = UIButton()

button.setTitle("My Button Title", for .normal)

button.widthAnchor.constraint(equalToConstant: button.titleLabel!.intrinsicContentSize.width + margin * 2.0).isActive = true

button.heightAnchor.constraint(equalToConstant: button.titleLabel!.intrinsicContentSize.height + margin * 2.0).isActive = true

더 이상의 높이 또는 너비 제약 조건을 추가하지 않고 버튼을 배치하면 제목 길이에 관계없이 적절하게 나타납니다.

UIButton 하위 클래스를 사용하는 것이 너무 귀찮지 않다면 이 옵션도 실행 가능합니다.

class Button: UIButton {
    override var intrinsicContentSize: CGSize {
        get {
            let baseSize = super.intrinsicContentSize
            return CGSize(width: baseSize.width + titleEdgeInsets.left + titleEdgeInsets.right,
                          height: baseSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom)
        }
    }
}

그럼 사용.titleEdgeInsets뜻대로

 let button = Button()
 ... configure button
 button.titleEdgeInsets = ...

위의 해결책으로 단추 주변에 테두리가 있으면 텍스트 일부를 잘라냈습니다.예를 들어, "Delete something"이라는 이름의 버튼 라벨에는 "Dele...ing"이 표시됩니다.이 문제가 발생하는 경우 다음과 같은 해결 방법이 있습니다.

aButton.contentEdgeInsets = UIEdgeInset.init(top: 0, left: 8, bottom: 0, right: 8)

그contentHorizontalAlignment여기서 설명하는 바와 같이 재산은 매력적으로 작용합니다.

UI 버튼의 제목을 왼쪽 정렬로 설정하는 방법은 무엇입니까?

텍스트 단추에 테두리를 추가하는 쉬운/해킹 방법을 찾았습니다(왼쪽/오른쪽 여백 있음).

1. 제목으로 버튼을 만듭니다.

2. 스토리보드에 버튼을 배치하고 원하는 위치에 정렬한 다음 짝수인 강제 너비 제약 조건을 추가합니다(20개를 사용하여 각 면에 10개의 점을 추가함).이렇게 하면 테두리가 사용자가 작성한 너비를 기준으로 강제 적용됩니다.

3. 코드를 사용하여 테두리를 만듭니다.예:

   myTextButton.backgroundColor = .clear
   myTextButton.layer.cornerRadius = 5
   myTextButton.layer.borderWidth = 2
   myTextButton.layer.borderColor = UIColor.white.cgColor
   

4. 왼쪽제목설정편집기(현재 크기 검사기 아래) 또는 코드를 통해 2로 설정합니다.이것은 텍스트의 중심을 맞추는 것처럼 보이지만 이 값은 다양한 텍스트 및 텍스트 크기에 따라 다를 수 있습니다.

Xcode 8.1과 Swift 3에 대한 게시물입니다.

Apple의 권장 사항:

https://developer.apple.com/documentation/uikit/uibutton/1624036-contentedgeinsets

사용하다contentEdgeInsets

이 속성을 사용하여 단추 내용의 효과적인 도면 사각형 크기를 조정하고 위치를 바꿉니다.내용은 버튼 이미지와 버튼 제목으로 구성됩니다.네 개의 삽입값(위, 왼쪽, 아래, 오른쪽) 각각에 대해 다른 값을 지정할 수 있습니다.양의 값을 사용하면 해당 가장자리가 축소되거나 삽입되어 단추 중앙에 더 가깝게 이동합니다.음의 값은 해당 에지를 확장하거나 앞으로 확장합니다.init(top:left:bottom:right:) 함수를 사용하여 이 속성에 대한 값을 구성합니다.기본값은 0입니다.

단추는 이 속성을 사용하여 고유 내용 크기 및 크기를 결정합니다.적합합니다(_:).

스위프트

aButton.contentEdgeInsets = UIEdgeInsets(top: YOURVALUE, left: YOURVALUE, bottom: YOURVALUE, right: YOURVALUE)

언급URL : https://stackoverflow.com/questions/5363789/uibutton-text-margin-padding