Autolayout-UIButtonの固有サイズにはタイトルインセットが含まれません

自動レイアウトを使用してUIButtonを配置している場合、そのサイズはコンテンツに合わせて適切に調整されます。

画像を次のように設定した場合 button.image、本来のサイズがこれを考慮しているようです。

しかし、私が微調整した場合 titleEdgeInsetsボタンのと、レイアウトはこれを考慮せず、ボタンのタイトルを切り捨てます。

ボタンの固有の幅がインセットを占めるようにするにはどうすればよいですか？

編集：

私は以下を使用しています：

[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

目標は、画像とテキストの間にいくらかの分離を加えることです。

これを解決するには、メソッドをオーバーライドしたり、任意の幅制約を設定したりする必要はありません。次のように、Interface Builderですべて実行できます。

• 固有のボタンの幅は、タイトルの幅とアイコンの幅に加えて、左右のコンテンツエッジインセットから算出されます。

• ボタンに画像とテキストの両方がある場合、それらはグループとして中央揃えされ、間にパディングはありません。

• 左のコンテンツインセットを追加すると、テキスト+アイコンではなく、テキストを基準に計算されます。

• 負の左画像インセットを設定すると、画像は左に引き出されますが、ボタン全体の幅は影響を受けません。

• 負の左画像インセットを設定すると、実際のレイアウトはその値の半分を使用します。したがって、-20ポイントの左インセットを取得するには、Interface Builderで-40ポイントの左インセット値を使用する必要があります。

したがって、必要な左インセットとアイコンとテキストの間の内部パディングの両方のためのスペースを作成するのに十分な大きさの左コンテンツインセットを提供し、アイコンとテキストの間に必要なパディングの量を2倍にして、アイコンを左にシフトします。その結果、左と右のコンテンツインセットが等しいボタンと、テキストとアイコンのペアがグループとして中央に配置され、その間に特定のパディングが挿入されます。

いくつかの例の値：

// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)

ネガティブとポジティブのタイトルとコンテンツインセットの組み合わせを使用することで、これをInterface Builderで（コードを記述せずに）機能させることができます。

更新：Xcode 7には、[ Rightインセット]フィールドに負の値を入力できないというバグがありますが、横にあるステッパーコントロールを使用して値を減らすことができます。（ありがとうスチュアート）

これを行うと、画像とタイトルの間に8ptのスペースが追加され、ボタンの固有の幅が同じ量だけ増加します。このような：

intrinsicContentSizeUIViewでメソッドをオーバーライドしないのはなぜですか？例えば：

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
                      s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}

これにより、自動レイアウトシステムにボタンのサイズを大きくしてインセットを許可し、テキスト全体を表示するように指示します。私は自分のコンピューターではないので、これをテストしていません。

インセットの設定方法を指定していないため、titleEdgeInsetsを使用していると思います。これは、同じ効果が得られるためです。代わりにcontentEdgeInsetsを使用すると、正しく動作します。

- (IBAction)ChangeTitle:(UIButton *)sender {
    self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
    [self.button setTitle:@"Long Long Title" forState:UIControlStateNormal];
}

そしてSwiftにとってこれは働いた：

extension UIButton {
    override open var intrinsicContentSize: CGSize {
        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)
    }
}

Love U Swift

このスレッドは少し古いですが、私は自分でこれに遭遇し、ネガティブインセットを使用して解決できました。たとえば、ここで目的のパディング値に置き換えます。

UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
                                            -desiredRightPadding,
                                            -desiredTopPadding,
                                            -desiredLeftPadding);

適切な自動レイアウト制約と組み合わせると、画像とテキストを含む自動サイズ変更ボタンが作成されます。desiredLeftPadding10に設定して以下を参照してください。

ボタンの実際のフレームはラベルを囲んでいないことがわかります（ラベルは境界の外側で10ポイント右にシフトされているため）が、テキストと画像の間に10ポイントのパディングが達成されています。

pegpegの回答に基づくSwift 3の場合：

extension UIButton {

    override open var intrinsicContentSize: CGSize {

        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)

    }

}

上記のすべてがiOS 9以降では機能しませんでした。

• 幅の制約を追加します（ボタンにテキストがない場合の最小幅用。テキストが指定されている場合、ボタンは自動スケーリングされます）
• 関係をより大きいか等しいに設定する

ボタンの周囲にボーダーを追加するには、次のメソッドを使用します。

button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);

UIButtonアイコンとラベルの間に5ポイントのスペースを追加したいと思いました。これは私がそれを達成した方法です：

UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
// more button config etc
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);
infoButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, -5);

contentEdgeInsets、titleEdgeInsets、およびimageEdgeInsetsを相互に関連付ける方法には、各インセットから少しのギブアンドテイクが必要です。したがって、タイトルの左側にインセットを追加する場合は、右側に負のインセットを追加し、コンテンツの右側に（正のインセットを介して）スペースを追加する必要があります。

タイトルインセットのシフトに合わせて適切なコンテンツインセットを追加することで、テキストがボタンの境界の外に出ることはありません。

このオプションは、インターフェイスビルダーでも使用できます。挿入図を参照してください。左右を3に設定しました。

私が使用する解決策は、ボタンに幅の制約を追加することです。次に、初期化のどこかで、テキストを設定した後、幅の制約を次のように更新します。

self.buttonWidthConstraint.constant = self.shareButton.intrinsicContentSize.width + 8;

ここで、8はインセットが何であってもです。

sizeToFit（）を呼び出すと、contentEdgeInsetが有効になります。

extension UIButton {

   open override func draw(_ rect: CGRect) { 
       self.contentEdgeInsets = UIEdgeInsets(top: 10, left: 40, bottom: 10, right: 40)
       self.sizeToFit()
   }
}