如何使用 FontAwesome 制作多行的 UIButton?

Posted

技术标签:

【中文标题】如何使用 FontAwesome 制作多行的 UIButton?【英文标题】:How can I make an UIButton with more than one line using FontAwesome? 【发布时间】:2016-10-27 11:56:09 【问题描述】:

我需要一个多行的UIButton。第一行将有一个FontAwesome 图标,第二行是一个解释图标的词。

另外,两行的字体大小必须在每一行中不同。

这是我目前拥有的:

@IBOutlet weak var btnProfile: UIButton!

let paraStyle = NSMutableParagraphStyle()
paraStyle.lineBreakMode = NSLineBreakMode.byWordWrapping
paraStyle.alignment = NSTextAlignment.center

let icon = NSMutableAttributedString(string: "\uf082", attributes: [NSFontAttributeName: UIFont.init(name: "FontAwesome", size: 40)])
let text = NSMutableAttributedString(string:"\nProfile", attributes: [NSFontAttributeName:UIFont.systemFont(ofSize: 12.0)])
        
icon.append(text)
icon.addAttribute(NSParagraphStyleAttributeName, value: paraStyle, range: NSRange(location:0,length: icon.length))
        
btnProfile.setAttributedTitle(icon, for: .normal)

但我收到以下错误:

由于未捕获的异常“NSInvalidArgumentException”而终止应用程序,原因:'-[_SwiftValue renderingMode]:无法识别的选择器已发送到实例

我也尝试过使用带有询问符号的正方形而不是"\uf082",但问题是一样的。

我知道问题出在最后两行,因为如果我评论它们,应用程序不会抛出任何异常。

我也尝试过使用情节提要:

它几乎可以正常工作。这两行都显示为图标+文本,但文本具有图标的字体和字体大小,我希望它们有所不同。截图如下:

我做错了什么?我不在乎我是通过代码还是通过故事板来解决这个问题。

提前致谢!

【问题讨论】:

button.titleLabel!.lineBreakMode = NSLineBreakMode.ByWordWrapping;button.titleLabel!.numberOfLines = 2//如果你想要无限的行数,你可以设置标题图标\nyourText...希望这有帮助 @Joe 我不想要无限的行数。就2。我尝试将行数设置为0,但它也不起作用,出现同样的错误。 【参考方案1】:

试试这个代码:

在 Swift 3 中测试。

override func viewDidLoad() 
    super.viewDidLoad()

     //applying the line break mode
    btnProfile?.titleLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping;

    let buttonText: NSString = "⭐️ Favourite\nProfile"

    //getting the range to separate the button title strings
    let newlineRange: NSRange = buttonText.range(of: "\n")

    //getting both substrings
    var substring1: NSString = ""
    var substring2: NSString = ""

    if(newlineRange.location != NSNotFound) 
        substring1 = buttonText.substring(to: newlineRange.location) as NSString
        substring2 = buttonText.substring(from: newlineRange.location) as NSString
    


    //assigning diffrent fonts to both substrings
    let font:UIFont? = UIFont(name: "Chalkduster", size: 50.0)
    let attrString = NSMutableAttributedString(string: substring1 as String, attributes: NSDictionary(object: font!, forKey: NSFontAttributeName as NSCopying) as? [String : Any])        
    let font1:UIFont? = UIFont(name: "Noteworthy-Light", size: 30.0)
    let attrString1 = NSMutableAttributedString(string: substring2 as String, attributes: NSDictionary(object: font1!, forKey: NSFontAttributeName as NSCopying) as? [String : Any]) 

    //appending both attributed strings
    attrString.append(attrString1)

    //assigning the resultant attributed strings to the button
    btnProfile.setAttributedTitle(attrString, for: UIControlState.normal)
    btnProfile.titleLabel?.textAlignment = .center


输出:

【讨论】:

如何在第一行和第二行添加不同的字体大小?我不希望它们使用相同的字体大小。 我爱你。你应该得到 1000 多个代表。它就像一个魅力!谢谢!

以上是关于如何使用 FontAwesome 制作多行的 UIButton?的主要内容,如果未能解决你的问题,请参考以下文章

如何将位于 UI View 中的长文本标签制作成 Swift 中的多行?

如何使用 React Material-UI、fontAwesome 图标和 Tailwind.css 左对齐所有列表项

如何使用 fontAwesome 图标和 Tailwind.css 对齐 React Material-UI 列表项

fontawesome 图标怎么安装

如何使用 Eureka 制作多行标签

React FontAwesome 图标不喜欢 Material-UI 工具提示