UIButton Text Margin / Padding

后端 未结 9 1121
名媛妹妹
名媛妹妹 2021-01-31 13:39

I have the following layout, and I\'m trying to add a padding to the left and right..

The controls are a disabled UIButton.

相关标签:
9条回答
  • 2021-01-31 13:45

    The contentHorizontalAlignment property works like a charm, as explained here:

    How to set the title of UIButton as left alignment?

    0 讨论(0)
  • 2021-01-31 13:52

    In Swift 4, note the use of contentEdgeInsets not titleEdgeInsets:

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

    That will make the button wrap its text and keep it one line as long as there is a space for it + adding some padding around

    0 讨论(0)
  • 2021-01-31 13:53

    This option is also viable if its not too annoying to use a UIButton subclass

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

    Then use titleEdgeInsets as desired

     let button = Button()
     ... configure button
     button.titleEdgeInsets = ...
    
    0 讨论(0)
  • 2021-01-31 13:55
    // Swift
    var titleEdgeInsets: UIEdgeInsets!
    
    // Objective-C
    @property(nonatomic) UIEdgeInsets titleEdgeInsets;
    

    Use this property to resize and reposition the effective drawing rectangle for the button title. You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge. Use the UIEdgeInsetsMake function to construct a value for this property. The default value is UIEdgeInsetsZero.

    https://developer.apple.com/documentation/uikit/uibutton/1624010-titleedgeinsets

    0 讨论(0)
  • 2021-01-31 13:55

    Setting the content insets will prevent the UIButton's title to shrink or truncated, giving the text margin a padding.

    0 讨论(0)
  • 2021-01-31 14:00

    The challenge with the accepted answer is that setting the titleEdgeInsets is the limitation, as noted in Apple's documentation:

    This property is used only for positioning the title during layout. The >button does not use this property to determine intrinsicContentSize and >sizeThatFits(_:).

    This means that setting the margins only works if the button is explicitly sized to fit the title label and the margins. If a title is too long or the margins too large, the title text may be clipped. This is OK for a button whose title you know at compile time, but for a variable length button title, can pose a problem.

    An alternate approach accommodating variable title length is to leave the titleEdgeInsets as the default value. Once the button's title is set, add explicit width and height constraints that accommodate the button's title label and the additional margins. For example:

    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
    

    Position the button without adding further height or width constraints and it will appear properly regardless of title length.

    0 讨论(0)
提交回复
热议问题