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以降では、これは ' Auto-layouting / Constraints ' を使用して実行できるようになりました。

主な利点は次のとおりです。

1. プログラムでフレームを設定する必要はまったくありません！
2. 正しく行われていれば、向きを変更するためにフレームをリセットする必要はありません。
3. また、デバイスの変更に煩わされる必要はありません（読み取り、画面サイズごとに個別にコーディングする必要はありません）。

いくつかの欠点：

1. 下位互換性はありません-iOS 6以降でのみ機能します。
2. 慣れる必要があります（ただし、後で時間を節約できます）。

最もクールなことは、次のようなインテントの宣言に集中できることです。

• これら2つのボタンの幅を同じにしたいのですが。または
• このビューを垂直方向の中央に配置し、スーパービューの端から最大10ポイントの範囲に拡張する必要があります。あるいは、
• このボタン/ラベルを、表示しているラベルに合わせてサイズ変更したい！

これは、自動レイアウトを紹介する簡単なチュートリアルです。

詳細については。

最初は少し時間がかかりますが、努力する価値があるように思えます。

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は単に画面の中央に配置されるように設定されています（2つの制約のみ、水平/垂直）。

それは完全に自動的に幅を変更します：

幅や高さを設定する必要はありません-それは完全に自動です。

小さな黄色の四角が単純に接続されていることに注意してください（ゼロの「間隔」）。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. テキストとともに自動サイズのボタンをお楽しみください。

Swift 4.2

神に感謝、これは解決しました。ボタンにテキストを設定した後、UIViewから自然なサイズである組み込みコンテンツサイズを取得できます（公式ドキュメントはこちらです）。UIButtonの場合、以下のように使用できます。

button.intrinsicContentSize.width

参考までに、幅が適切に見えるように調整しました。

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

シミュレーター

builtContentSizeを持つUIButton

出典：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幅

ここから2つのタイトルがあります Debug View Hierachry

正直言って、ストーリーボードにテキストに合わせてボタンのサイズを変更したいという単純なチェックボックスがないのは本当に残念だと思います。まあ...何でも。

これは、ストーリーボードを使用する最も簡単なソリューションです。

1. UIViewを配置して制約を設定します。例：

2. UILabelをUIView内に配置します。UIViewのエッジにアタッチするように制約を設定します。

3. UIView内にUIButtonを配置します。同じ制約を設定して、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. それを実行して、ボタンのサイズが変更され、押すことができることを確認します。