如何为 iOS UIButton 对象实现此 UI/UX 设计

Question

看看 "Forgot your login details? Get help signing in." 按钮的绝妙 UI 技巧。他们如何将按钮分成可点击和不可点击的部分？如果不是单个按钮而是一个标签和一个按钮，那么，他们是如何让按钮的第二行居中的？

Answer 1

使用属性字符串设置按钮标题。请参阅下面的代码以供参考。

    func attributedText(){
            // create attributed string
        let attributedString = NSMutableAttributedString(string:"Don't have an account? ")
        let myString = "Sign Up"
        let myAttribute = [ NSForegroundColorAttributeName: UIColor(red: 194/255, green: 159/255, blue: 74/255, alpha: 1.0) ]
        let myAttrString = NSAttributedString(string: myString, attributes: myAttribute) 
        attributedString.append(myAttrString)    
        myCustomButton.setAttributedTitle(attributedString, for: .normal)

    }

Answer 2

你也可以这样试试：

这里我使用了两个标签，并在另一个标签上放了一个按钮，我想让它可以点击。

Answer 3

这是蓝色文本上方没有名称的标签和按钮，因此将标签拖到故事板并将其连接到 swift 文件（我将其命名为 labelText）和文本上方的按钮你要。

然后在您的 viewDidLoad 函数中放入以下行：

    // You can change the color as you want
    let color: UIColor = UIColor(red: 2/255.0, green: 202/255.0, blue: 246/255.0, alpha: 1.0)

    let string_to_color = "Get help signing in."

    let titleStr: String = labelText.text!

    let range: NSRange = (titleStr as NSString).rangeOfString(string_to_color)

    let str: NSMutableAttributedString = NSMutableAttributedString(string: titleStr)
    str.addAttribute(NSForegroundColorAttributeName, value: color, range: range)
    //Below line is if you want a line under your colored text
    //str.addAttribute(NSUnderlineStyleAttributeName, value: NSUnderlineStyle.StyleSingle.rawValue, range: range)

    labelText.attributedText = str

现在您可以开始了。

编码愉快。

如何为 iOS UIButton 对象实现此 UI/UX 设计

How to achieve this UI/UX design for an iOS UIButton object

user-interface

uibutton

ios

uistoryboard

swift