iOS : 텍스트 길이에 따라 UIButton 크기 조정

인터페이스 빌더에서 Command + =를 누르면 텍스트에 맞게 단추 크기가 조정됩니다. 버튼이보기에 추가되기 전에 프로그래밍 방식으로 수행 할 수 있는지 궁금합니다.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]];
[button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
// I need to know the width needed to accomodate NSStringVariable
[button setTitle:NSStringVariable forState:UIControlStateNormal]; 
// So that I can set the width property of the button before addSubview
[button setFrame:CGRectMake(10, 0, width, fixedHeight)];
[subNavigation addSubview:button];

Xcode 4.5 이상에서는 ' 자동 레이아웃 / 제약 조건 을 사용 하여이 작업을 수행 할 수 있습니다 ' .

주요 장점은 다음과 같습니다.

1. 프로그래밍 방식으로 프레임을 설정할 필요가 없습니다!
2. 올바르게 수행하면 방향 변경을 위해 프레임을 재설정 할 필요가 없습니다.
3. 또한 장치 변경에 신경 쓸 필요가 없습니다 (읽기, 다른 화면 크기에 대해 별도로 코딩 할 필요 없음).

몇 가지 단점 :

1. 이전 버전과 호환되지 않음-iOS 6 이상에서만 작동합니다.
2. 익숙해 져야하지만 나중에 시간을 절약 할 수 있습니다.

가장 멋진 점은 다음과 같은 의도를 선언하는 데 집중하는 것입니다.

• 이 두 버튼의 너비가 같아야합니다. 또는
• 이 뷰는 세로로 중앙에 위치해야하며 수퍼 뷰 가장자리에서 최대 10pt까지 확장해야합니다. 또는,
• 이 버튼 / 레이블이 표시되는 레이블에 따라 크기를 조정하고 싶습니다!

다음 은 자동 레이아웃에 대한 간단한 자습서입니다.

자세한 내용은 .

처음에는 약간의 시간이 걸리지 만 노력할만한 가치가있는 것 같습니다.

UIKit에는 지정된 NSString 객체에서 특정 글꼴로 렌더링 할 때 차지하는 크기를 가져 오는 NSString 클래스가 추가되었습니다.

문서가 여기에 있었습니다. 지금 여기 있습니다 추천하지 않습니다 아래.

요컨대, 당신이 가면 :

CGSize stringsize = [myString sizeWithFont:[UIFont systemFontOfSize:14]]; 
//or whatever font you're using
[button setFrame:CGRectMake(10,0,stringsize.width, stringsize.height)];

... 버튼의 프레임을 렌더링하려는 문자열의 높이와 너비로 설정했습니다.

해당 CGSize 주변의 일부 버퍼 공간을 실험하고 싶을 수도 있지만 올바른 위치에서 시작합니다.

코드에서이를 수행하는 방법은 다음과 같습니다.

[button sizeToFit];

서브 클래 싱하고 추가 규칙을 추가하려는 경우 다음을 무시할 수 있습니다.

- (CGSize)sizeThatFits:(CGSize)size;

버튼이 Interface Builder로 작성되었고 코드에서 제목을 변경하는 경우 다음을 수행 할 수 있습니다.

[self.button setTitle:@"Button Title" forState:UIControlStateNormal];
[self.button sizeToFit];

빠른:

여기서 중요한 것은 호출 할 때 입니다 .sizeToFit(). 텍스트를 표시하도록 설정 한 후 필요한 크기를 읽을 수 있도록 표시해야합니다. 나중에 텍스트를 업데이트 한 다음 다시 호출해야합니다.

var button = UIButton()
button.setTitle("Length of this text determines size", forState: UIControlState.Normal)
button.sizeToFit()
self.view.addSubview(button)

자동 레이아웃을 사용하여이 작업을 수행하려면 가변 너비 제약 조건을 설정하십시오.

조정 Content Hugging Priority하고 Content Compression Resistance Priority필요한 결과를 얻기 위해 필요할 수도 있습니다 .

UILabel은 완전히 자동 크기 조정됩니다 .

이 UILabel은 단순히 화면 중앙에 위치하도록 설정됩니다 (수평 / 수직의 두 가지 제약 조건 만 해당).

너비가 완전히 자동으로 변경됩니다.

당신은 설정할 필요가 없습니다 어떤 너비 또는 높이를 - 그것은 완전히 자동입니다.

작은 노란색 사각형이 단순히 붙어 있음을 주목하십시오 ( "간격"0). UILabel의 크기가 조정되면 자동으로 이동합니다.

"> ="제약 조건을 추가하면 UILabel의 최소 너비가 설정됩니다.

버튼이 아닌 텍스트의 크기를 조정하려면 ...

button.titleLabel.adjustsFontSizeToFitWidth = YES;
button.titleLabel.minimumScaleFactor = .5;
// The .5 value means that I will let it go down to half the original font size 
// before the texts gets truncated

// note, if using anything pre ios6, you would use I think
button.titleLabel.minimumFontSize = 8;

sizeToFit가 올바르게 작동하지 않습니다. 대신 :

myButton.size = myButton.sizeThatFits(CGSize.zero)

contentInset버튼에 추가 할 수도 있습니다 .

myButton.contentEdgeInsets = UIEdgeInsetsMake(8, 8, 4, 8)

간단히:

1. UIView뷰에 자동 레이아웃이있는 래퍼로 만듭니다 .
2. 놓다 UILabel그 포장지 안에 . 라벨을 포장지 가장자리에 붙일 수있는 구속 조건을 추가하십시오.
3. UIButton래퍼 안에 넣은 다음과 같은 제약 조건을 간단히 추가하십시오 UILabel.
4. 텍스트와 함께 자동 크기 버튼을 즐기십시오.

스위프트 4.2

신 이여 감사합니다. 텍스트를 버튼으로 설정 한 후 UIView에서 자연 크기 인 intrinsicContentSize를 검색 할 수 있습니다 (공식 문서는 여기 ). UIButton의 경우 아래와 같이 사용할 수 있습니다.

button.intrinsicContentSize.width

귀하의 정보를 위해 너비를 올바르게 조정했습니다.

button.frame = CGRect(fx: xOffset, y: 0.0, width: button.intrinsicContentSize.width + 18, height: 40)

모의 실험 장치

intrinsicContentSize를 가진 UIButtons

출처 : https://riptutorial.com/ios/example/16418/get-uibutton-s-size-strictly-based-on-its-text-and-font

이 게시물과 관련하여 sizeToFit해결할 수없는 추가 요구 사항이 있습니다. 텍스트에 관계없이 버튼을 원래 위치의 중앙에 유지해야했습니다. 또한 버튼이 원래 크기보다 커지는 것을 원하지 않습니다.

따라서 최대 크기로 버튼을 레이아웃하고 컨트롤러에 해당 크기를 저장하고 텍스트가 변경 될 때 다음 방법을 사용하여 버튼의 크기를 조정하십시오.

+ (void) sizeButtonToText:(UIButton *)button availableSize:(CGSize)availableSize padding:(UIEdgeInsets)padding {    

     CGRect boundsForText = button.frame;

    // Measures string
    CGSize stringSize = [button.titleLabel.text sizeWithFont:button.titleLabel.font];
    stringSize.width = MIN(stringSize.width + padding.left + padding.right, availableSize.width);

    // Center's location of button
    boundsForText.origin.x += (boundsForText.size.width - stringSize.width) / 2;
    boundsForText.size.width = stringSize.width;
    [button setFrame:boundsForText];
 }

텍스트에 대한 높이 자동 크기 조정이있는이 단추 클래스 (Xamarin의 경우 다른 언어의 경우 다시 작성할 수 있음)

[Register(nameof(ResizableButton))]
public class ResizableButton : UIButton
{
    NSLayoutConstraint _heightConstraint;
    public bool NeedsUpdateHeightConstraint { get; private set; } = true;

    public ResizableButton(){}

    public ResizableButton(UIButtonType type) : base(type){}

    public ResizableButton(NSCoder coder) : base(coder){}

    public ResizableButton(CGRect frame) : base(frame){}

    protected ResizableButton(NSObjectFlag t) : base(t){}

    protected internal ResizableButton(IntPtr handle) : base(handle){}

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
        UpdateHeightConstraint();
        InvalidateIntrinsicContentSize();
    }

    public override void SetTitle(string title, UIControlState forState)
    {
        NeedsUpdateHeightConstraint = true;
        base.SetTitle(title, forState);
    }

    private void UpdateHeightConstraint()
    {
        if (!NeedsUpdateHeightConstraint)
            return;
        NeedsUpdateHeightConstraint = false;
        var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));

        var rect = new CGRect(Frame.X, Frame.Y, Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);

        if (_heightConstraint != null)
            RemoveConstraint(_heightConstraint);

        _heightConstraint = NSLayoutConstraint.Create(this, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1, rect.Height);
        AddConstraint(_heightConstraint);
    }

     public override CGSize IntrinsicContentSize
     {
         get
         {
             var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));
             return new CGSize(Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);
         }
     }
}

어떤 이유로 든 func sizeToFit()나를 위해 작동하지 않습니다. 내 설정은 내부의 버튼을 사용하고 있으며 UITableViewCell자동 레이아웃을 사용하고 있습니다.

나를 위해 일한 것은 다음과 같습니다.

1. 폭 제약을 얻는다
2. intrinsicContentSize이 문서 에 따르면 자동 레이아웃에서를 인식하지 못 하므로 너비를 가져옵니다 intrinsicContentSize. 받는 사람 너비 제약 조건을 설정 intrinsicContentSize폭

여기에 두 개의 제목이 있습니다 Debug View Hierachry

솔직히 말해서 스토리 보드에는 텍스트를 수용하기 위해 버튼의 크기를 조정하고 싶다고 말하는 간단한 확인란이 없다는 것이 부끄러운 일이라고 생각합니다. 뭐 ... 뭐든지

스토리 보드를 사용하는 가장 간단한 솔루션은 다음과 같습니다.

1. UIView를 배치하고 제약 조건을 설정하십시오. 예:

2. UILabel을 UIView 안에 넣으십시오. UIView의 가장자리에 구속 조건을 설정하십시오.

3. UIButton을 UIView 안에 넣으십시오. 동일한 제약 조건을 설정하여 UIView의 가장자리에 연결하십시오.

4. UILabel의 줄 수에 0을 설정하십시오.

5. 콘센트를 설정하십시오.

    @IBOutlet var button: UIButton!
    @IBOutlet var textOnTheButton: UILabel!

6. 길고 길고 긴 제목을 얻으십시오.

    let someTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

7. viewDidLoad에서 UILabel 및 UIButton에 대한 제목을 설정하십시오.

    override func viewDidLoad() {
        super.viewDidLoad()
        textOnTheButton.text = someTitle
        button.setTitle(someTitle, for: .normal)
        button.titleLabel?.numberOfLines = 0
    }

8. 버튼 크기를 조정하고 누를 수 있도록 실행하십시오.