1. ホーム
  2. アイオス

[解決済み】Autolayout - UIButtonの固有サイズにタイトルインセットが含まれない

2022-04-07 19:10:30

質問

UIButtonをautolayoutで配置した場合、コンテンツに合わせてサイズがきれいに調整されます。

として画像を設定すると 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)