programing tip

Iphone의 UiButton에 텍스트 여백 / 패딩 제공

itbloger 2021. 1. 9. 09:35
반응형

Iphone의 UiButton에 텍스트 여백 / 패딩 제공


다음 레이아웃이 있고 왼쪽과 오른쪽에 패딩을 추가하려고합니다 ..

컨트롤은 일부 비활성화 된 Uibutton입니다. 여기에 이미지 설명 입력

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

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

@property(nonatomic) UIEdgeInsets titleEdgeInsets;

이 속성을 사용하여 버튼 제목에 대한 효과적인 그리기 사각형의 크기와 위치를 조정합니다. 4 개의 삽입 (위, 왼쪽, 아래, 오른쪽) 각각에 대해 다른 값을 지정할 수 있습니다. 양수 값은 해당 가장자리를 축소하거나 삽입하여 단추 중앙에 더 가깝게 이동합니다. 음수 값은 해당 가장자리를 확장하거나 시작합니다. UIEdgeInsetsMake 함수를 사용하여이 속성의 값을 생성합니다. 기본값은 UIEdgeInsetsZero입니다.

빠른:

var titleEdgeInsets: UIEdgeInsets!

Toro의 대답은 완벽합니다. 스토리 보드 또는 xib 내부의 Size Inspector에서 삽입 값을 설정할 수도 있습니다.

여기에 이미지 설명 입력


설정 내용 인 세트 것은 방지 할 UIButton텍스트 마진에게 패딩을주는 / 절단 축소의 제목을.

콘텐츠 가장자리


허용되는 대답의 문제 titleEdgeInsets는 Apple의 문서에 명시된 것처럼 설정 이 제한 이라는 것 입니다.

이 속성은 레이아웃 중에 제목을 배치하는 데만 사용됩니다. > 버튼은이 속성을 사용하여 intrinsicContentSize 및> sizeThatFits (_ :)를 결정하지 않습니다.

즉, 여백 설정은 버튼이 제목 레이블과 여백에 맞게 명시 적으로 크기가 조정 된 경우에만 작동합니다. 제목이 너무 길거나 여백이 너무 크면 제목 텍스트가 잘릴 수 있습니다. 컴파일 타임에 제목을 알고있는 버튼의 경우 괜찮지 만 가변 길이 버튼 제목의 경우 문제가 될 수 있습니다.

An alternate approach accommodating variable title length is to leave the titleEdgeInsets as the default value. Once the button's title is set, add explicit width and height constraints that accommodate the button's title label and the additional margins. For example:

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

Position the button without adding further height or width constraints and it will appear properly regardless of title length.


This option is also viable if its not too annoying to use a UIButton subclass

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

Then use titleEdgeInsets as desired

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

swift 4 Note use contentEdgeInsets not titleEdgeInsets

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

That will make the button wrap its text and keep it one line as long as there is a space for it + adding some padding around


this link works like a charm with contentHorizontalAlignment property


I found an easy/hacky way to add borders to text buttons (and have left/right margins):

  1. Create button with title.

  2. Place button in storyboard, align where you want and then add a forced width constraint that is an even number (I used 20, so it adds 10 points on each side). This will force the border around the width you created.

  3. Use code to create a border. eg:

    myTextButton.backgroundColor = .clear
    myTextButton.layer.cornerRadius = 5
    myTextButton.layer.borderWidth = 2
    myTextButton.layer.borderColor = UIColor.white.cgColor
    
  4. Set left titleInset to 2 via editor (now under Size Inspector) or by code. This seems to center the text, but this value may be different for various texts and text sizes.

This post is for XCode 8.1 and Swift 3.


With the above solutions, some of the text were cut out if you have a border around the button. For instance, a button label named "Delete something" ends up showing "Dele...ing". If you are having this problem, this is the solution:

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

참조 URL : https://stackoverflow.com/questions/5363789/giving-a-text-margin-padding-to-the-uibutton-on-the-iphone

반응형