web-dev-qa-db-ja.com

IphoneのUiButtonにテキストマージン/パディングを与える

次のレイアウトがあり、左右にパディングを追加しようとしています。

コントロールは、いくつかの無効なUibuttonです。 enter image description here

ボタンを作成するための私のコードはこれです：

        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];
iphoneuibuttonpaddingmargin
54
PartySoft
@property(nonatomic) UIEdgeInsets titleEdgeInsets;

このプロパティを使用して、ボタンタイトルの有効な描画四角形のサイズと位置を変更します。 4つのインセット（上、左、下、右）のそれぞれに異なる値を指定できます。正の値はそのEdgeを縮小または挿入し、ボタンの中央に近づけます。負の値は、そのEdgeを展開または開始します。 UIEdgeInsetsMake関数を使用して、このプロパティの値を作成します。デフォルト値はUIEdgeInsetsZeroです。

スイフト：

var titleEdgeInsets: UIEdgeInsets!
71
AechoLiu

トロの答えは完璧です。ストーリーボードまたはxib内のサイズインスペクターからインセット値を設定することもできます。

enter image description here

84
Egor T

content insetsを設定すると、UIButtonのタイトルが縮小/切り捨てられなくなり、テキストの余白にパディングが追加されます。

content edges

30
J. Doe

受け入れられた答えに伴う課題は、Appleのドキュメントに記載されているように、titleEdgeInsetsの設定が制限であることです。

このプロパティは、レイアウト中にタイトルを配置するためにのみ使用されます。 >ボタンは、このプロパティを使用して、intrinsicContentSizeおよび> sizeThatFits（_ :)を決定しません。

これは、タイトルラベルとマージンに合わせてボタンのサイズが明示的に設定されている場合にのみ、マージンの設定が機能することを意味します。タイトルが長すぎるか、余白が大きすぎる場合、タイトルテキストがクリップされることがあります。これはコンパイル時に知っているタイトルのボタンでは問題ありませんが、可変長のボタンタイトルでは問題を引き起こす可能性があります。

可変タイトル長に対応する別のアプローチは、titleEdgeInsetsをデフォルト値のままにすることです。ボタンのタイトルを設定したら、ボタンのタイトルラベルと追加のマージンに対応する明示的な幅と高さの制約を追加します。例えば：

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

さらに高さまたは幅の制約を追加せずにボタンを配置すると、タイトルの長さに関係なく適切に表示されます。

7
user3847320

Swift 4 NoteはtitleEdgeInsetsではなくcontentEdgeInsetsを使用します

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

それはボタンがそのテキストをラップし、それのためのスペースがある限り1行を維持します+周りにパディングを追加します

4
Daniel Raouf

このオプションは、UIButtonサブクラスを使用するのが面倒ではない場合にも実行可能です。

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

次に、必要に応じてtitleEdgeInsetsを使用します

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

これ link はcontentHorizontalAlignmentプロパティを持つチャームのように動作します

2
Abhilash Reddy

テキストボタンに境界線を追加する簡単な方法を見つけました（左右の余白があります）。

  1. タイトル付きのボタンを作成します。

  2. ストーリーボードにボタンを配置し、必要な場所に揃えてから、偶数の強制幅制約を追加します（20を使用したため、各辺に10ポイントが追加されます）。これにより、作成した幅の周りに境界線が強制されます。

  3. コードを使用して境界線を作成します。例えば：

    myTextButton.backgroundColor = .clear
myTextButton.layer.cornerRadius = 5
myTextButton.layer.borderWidth = 2
myTextButton.layer.borderColor = UIColor.white.cgColor

  4. エディター（現在はサイズインスペクターの下）またはコードを使用して、左のtitleInsetを2に設定します。これはテキストを中央に配置するように見えますが、この値はさまざまなテキストとテキストサイズによって異なる場合があります。

この投稿はXCode 8.1およびSwift 3。

1
Abhi

上記のソリューションでは、ボタンの周りに境界線がある場合、テキストの一部が切り取られました。たとえば、「何かを削除」という名前のボタンラベルは、「削除中」と表示されます。この問題が発生している場合、これが解決策です。

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