圍繞UILabel的每一個字的邊框

Question

有沒有一種方法可以在UILabel的每個單詞上繪製邊框。假設UILabel包含字符串「This is the Line 1」。

我想圍繞5個字

1. 5種不同的邊框此
2. 是
3. 的
4. 線

Answer 1

你會必須爲每個單詞創建一個標籤....通過編程來完成！我現在做了，請測試！希望你享受:-)

進口的UIKit

class ViewController: UIViewController { 

var arrayStrings = [String]() 
var x : CGFloat = 0 
var labelReference = 0 

override func viewDidLoad() { 
    super.viewDidLoad() 


    let space = " " 
    let string = "This is the line 1" 
    var word = string.componentsSeparatedByString(space) 
    print (word[0]) // prints "This" 
    print(word[1]) // print "is" 

    for var i = 0; i < word.count ; i++ { 


     arrayStrings.append(word[i]) 


     let characteresCount = word[i].characters.count 


     // change de "9" based on your font size 
     let label = UILabel(frame: CGRectMake(CGFloat(32 + x), 30, CGFloat(characteresCount * 9), 25)) 
     x += label.frame.size.width + 2 
     label.text = word[i] 
     label.layer 
     label.layer.borderWidth = 1.0 
     label.layer.cornerRadius = 10 
     view.addSubview(label) 


     } 

    } 

} 

Answer 2

我不知道一個易於使用的代碼的UILabel，但對於UITextView的：

斯威夫特遊樂場

設置：

import UIKit 

let string = "Lorem ipsum dolor sit amet" 

let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) 
textView.text = string 

使用正則表達式獲得每個單詞的匹配：

let pattern = "[a-zA-Z0-9]+" 
let regex = try! NSRegularExpression(pattern: pattern, options: []) 
let matches = regex.matchesInString(string, options: [], range: NSMakeRange(0, string.characters.count)) 

函數來獲得用於每個匹配（來自this answer移植）一個矩形：

func frameOfTextInRange(range:NSRange, inTextView textView:UITextView) -> CGRect { 
    let beginning = textView.beginningOfDocument 
    let start = textView.positionFromPosition(beginning, offset: range.location)! 
    let end = textView.positionFromPosition(start, offset: range.length)! 
    let textRange = textView.textRangeFromPosition(start, toPosition: end)! 
    let rect = textView.firstRectForRange(textRange) 
    return textView.convertRect(rect, fromView: textView) 
} 

迭代在每個匹配，得到其幀，用它來建立用於背景的圖，將其添加到文本視圖：

for m in matches { 
    let range = m.range 
    let frame = frameOfTextInRange(range, inTextView: textView) 
    let v = UIView(frame: frame) 
    v.layer.borderWidth = 1 
    v.layer.borderColor = UIColor.blueColor().CGColor 
    textView.addSubview(v) 

} 

---

但可能這並不能給出你期待的結果。爲了獲得更好的控制，你可以使用屬性字符串。

這裏使用歸因串

import UIKit 

let string = "Lorem ipsum dolor sit amet" 

let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) 

let attributedString = NSMutableAttributedString(string: string) 
let paragraphStyle = NSMutableParagraphStyle() 
paragraphStyle.lineHeightMultiple = 1.25 
attributedString.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, string.characters.count)) 

textView.attributedText = attributedString 

let pattern = "[a-zA-Z0-9]+" 
let regex = try! NSRegularExpression(pattern: pattern, options: []) 
let matches = regex.matchesInString(string, options: [], range: NSMakeRange(0, string.characters.count)) 

func frameOfTextInRange(range:NSRange, inTextView textView:UITextView) -> CGRect { 
    let beginning = textView.beginningOfDocument 
    let start = textView.positionFromPosition(beginning, offset: range.location)! 
    let end = textView.positionFromPosition(start, offset: range.length)! 
    let textRange = textView.textRangeFromPosition(start, toPosition: end)! 
    let rect = textView.firstRectForRange(textRange) 
    return textView.convertRect(rect, fromView: textView) 
} 

for m in matches { 
    let range = m.range 
    var frame = frameOfTextInRange(range, inTextView: textView) 
    frame = CGRectInset(frame, CGFloat(-1.2), CGFloat(2)) 
    frame = CGRectOffset(frame, CGFloat(0), CGFloat(2)) 
    let v = UIView(frame: frame) 
    v.layer.borderWidth = 1 
    v.layer.borderColor = UIColor.blueColor().CGColor 
    textView.addSubview(v) 

} 

---

相同的代碼也有利於創造美麗的風格將意見添加到背景視圖，並添加頂部

說的TextView

import UIKit 

let string = "Lorem ipsum dolor sit amet" 

let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) 
let textViewBG = UIView(frame: textView.bounds) 
textViewBG.backgroundColor = UIColor.whiteColor() 
let attributedString = NSMutableAttributedString(string: string) 
let paragraphStyle = NSMutableParagraphStyle() 
paragraphStyle.lineHeightMultiple = 1.25 
attributedString.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, string.characters.count)) 
attributedString.addAttribute(NSForegroundColorAttributeName, value: UIColor.whiteColor(), range: NSMakeRange(0, string.characters.count)) 
textView.attributedText = attributedString 
textView.backgroundColor = UIColor.clearColor() 

let pattern = "[a-zA-Z0-9]+" 
let regex = try! NSRegularExpression(pattern: pattern, options: []) 
let matches = regex.matchesInString(string, options: [], range: NSMakeRange(0, string.characters.count)) 

func frameOfTextInRange(range:NSRange, inTextView textView:UITextView) -> CGRect { 
    let beginning = textView.beginningOfDocument 
    let start = textView.positionFromPosition(beginning, offset: range.location)! 
    let end = textView.positionFromPosition(start, offset: range.length)! 
    let textRange = textView.textRangeFromPosition(start, toPosition: end)! 
    let rect = textView.firstRectForRange(textRange) 
    return textView.convertRect(rect, fromView: textView) 
} 

for m in matches { 
    let range = m.range 
    var frame = frameOfTextInRange(range, inTextView: textView) 
    frame = CGRectInset(frame, CGFloat(-1.2), CGFloat(2)) 
    frame = CGRectOffset(frame, CGFloat(0), CGFloat(2)) 
    let v = UIView(frame: frame) 
    v.layer.cornerRadius = 2 
    v.backgroundColor = UIColor(hue: 0.66, saturation: 0.6, brightness: 1, alpha: 1) 
    textViewBG.addSubview(v) 

} 
textViewBG.addSubview(textView) 

---

增加單詞之間的空間，我們可以改變的空白

import UIKit 

func frameOfTextInRange(range:NSRange, inTextView textView:UITextView) -> CGRect { 
    let beginning = textView.beginningOfDocument 
    let start = textView.positionFromPosition(beginning, offset: range.location)! 
    let end = textView.positionFromPosition(start, offset: range.length)! 
    let textRange = textView.textRangeFromPosition(start, toPosition: end)! 
    let rect = textView.firstRectForRange(textRange) 
    return textView.convertRect(rect, fromView: textView) 
} 

let string = "Lorem ipsum dolor sit amet" 

let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) 
textView.backgroundColor = UIColor.clearColor() 

textView.attributedText = { 
    let attributedString = NSMutableAttributedString(string: string) 
    let paragraphStyle = NSMutableParagraphStyle() 
    paragraphStyle.lineHeightMultiple = 1.25 
    attributedString.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, string.characters.count)) 
    attributedString.addAttribute(NSForegroundColorAttributeName, value: UIColor.whiteColor(), range: NSMakeRange(0, string.characters.count)) 

    let regex = try! NSRegularExpression(pattern: "\\s", options: []) 
    let matches = regex.matchesInString(string, options: [], range: NSMakeRange(0, string.characters.count)) 
    for m in matches { 
     attributedString.addAttribute(NSKernAttributeName, value: 6, range: m.range) 
    } 
    return NSAttributedString(attributedString: attributedString) 
}() 

let textViewBG = UIView(frame: textView.bounds) 
textViewBG.backgroundColor = UIColor.whiteColor() 


let pattern = "[^ ]+" 
let regex = try! NSRegularExpression(pattern: pattern, options: []) 
let matches = regex.matchesInString(string, options: [], range: NSMakeRange(0, string.characters.count)) 

for m in matches { 
    textViewBG.addSubview({ 
     let range = m.range 
     var frame = frameOfTextInRange(range, inTextView: textView) 
     frame = CGRectInset(frame, CGFloat(-3), CGFloat(2)) 
     frame = CGRectOffset(frame, CGFloat(0), CGFloat(3)) 
     let v = UIView(frame: frame) 
     v.layer.cornerRadius = 2 
     v.backgroundColor = UIColor(hue: 211.0/360.0, saturation: 0.35, brightness: 0.78 , alpha: 1) 
     return v 
    }()) 
} 

textViewBG.addSubview(textView)