【问题标题】:UIButton with image on left and right side using IBDesignable in Swift 3.0在 Swift 3.0 中使用 IBDesignable 在左侧和右侧带有图像的 UIButton
【发布时间】:2017-08-14 04:30:20
【问题描述】:

如何使用 IBDesignable 在 UIButton 中用文字在左右两侧显示左右图像?

我试图用谷歌搜索找到任何答案,但没有找到任何明智的答案。我想通过故事板来做到这一点。请帮忙

所需输出:

【问题讨论】:

  • 您可以为标题文本集 ContentInsets 拍摄按钮图像,或者您可以在按钮上拍摄图像视图并设置 constarttaint

标签: ios swift3 uibutton autolayout ibdesignable


【解决方案1】:

您可以以此为基础。在 Attributes Inspector 中设置按钮后,这个 unbutton 子类将重置标题并将图像放在侧面(不要忘记检查所有边缘情况):

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var button: DoubleImageButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        button.layer.borderWidth = 2.0
        button.layer.borderColor = UIColor.black.cgColor
        button.layer.cornerRadius = button.bounds.height*0.5
    }
}


@IBDesignable
class DoubleImageButton: UIButton {
    /* Inspectable properties, once modified resets attributed title of the button */
    @IBInspectable var leftImg: UIImage? = nil {
        didSet {
            /* reset title */
            setAttributedTitle()
        }
    }

    @IBInspectable var rightImg: UIImage? = nil {
        didSet {
            /* reset title */
            setAttributedTitle()
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setAttributedTitle()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setAttributedTitle()
    }

    private func setAttributedTitle() {
        var attributedTitle = NSMutableAttributedString()

        /* Attaching first image */
        if let leftImg = leftImg {
            let leftAttachment = NSTextAttachment(data: nil, ofType: nil)
            leftAttachment.image = leftImg
            let attributedString = NSAttributedString(attachment: leftAttachment)
            let mutableAttributedString = NSMutableAttributedString(attributedString: attributedString)

            if let title = self.currentTitle {
                mutableAttributedString.append(NSAttributedString(string: title))
            }
            attributedTitle = mutableAttributedString
        }

        /* Attaching second image */
        if let rightImg = rightImg {
            let leftAttachment = NSTextAttachment(data: nil, ofType: nil)
            leftAttachment.image = rightImg
            let attributedString = NSAttributedString(attachment: leftAttachment)
            let mutableAttributedString = NSMutableAttributedString(attributedString: attributedString)
            attributedTitle.append(mutableAttributedString)
        }

        /* Finally, lets have that two-imaged button! */
        self.setAttributedTitle(attributedTitle, for: .normal)
    }
}

在属性检查器中:

结果(调整我的实现以达到最佳结果):

请务必检查仅选择右图像但没有选择左图像等情况。这是一个快速解决方案,not fully tested。 玩得开心,祝你好运! ;]

【讨论】:

  • 不要忘记检查所有边缘情况???这条线是什么意思?请解释。 @Oleh
  • 这个类给了我左右图像,但没有标题。
  • @SourabhSharma 我的意思是检查案例,例如当您只选择右图像但没有选择左图像等时。它没有经过全面测试/完美实施。它适用于选择的两个图像 - 100%。这就是我的意思:)
  • @SourabhSharma 为什么不呢?你有什么问题?无题?你是怎么设置标题的?
  • @SourabhSharma 你是如何设置标题的?
猜你喜欢
  • 1970-01-01
  • 2020-11-09
  • 2019-01-21
  • 2018-08-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-17
相关资源
最近更新 更多