[英]Border around every word of UILabel
有沒有辦法可以在UILabel
每個單詞周圍繪制邊框。 假設UILabel
包含字符串“This is the Line 1”。
我想要 5 個不同的邊框圍繞 5 個單詞
- 這個
- 是
- 這
- 線
- 1
我不知道 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))
為每個匹配獲取矩形的函數(從這個答案移植):
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)
}
將視圖添加到背景視圖並在頂部添加該文本視圖也有助於創建漂亮的樣式
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)
SWIFT 4 版本
這是使用 UITextView 的vikingosegundo Answer的 swift 4 版本,包括一些其他調整,包括:
• 來自數組的單詞列表
• 在 textView 中居中
• 可調整字數限制
• 自定義字體
//: Playground - noun: a place where people can play
import UIKit
var array = [String]()
array = ["WORD1", "WORD2", "WORD3", "WORD4", "WORD4", "LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONGWORD", "WORD5"]
var stringarr = String()
for i in 0...(array.count-1) {
if array[i].count > 20 {
let count = array[i].count
let dropCount = count-20
let dropCharacters = array[i].dropLast(dropCount)
var shortenedWord = "\(dropCharacters)"
shortenedWord = "\(shortenedWord)..."
print(shortenedWord)
array[i] = shortenedWord
}
}
stringarr = array.joined(separator: " ")
func frameOfTextInRange(range:NSRange, inTextView textView:UITextView) -> CGRect {
let beginning = textView.beginningOfDocument
let start = textView.position(from: beginning, offset: range.location)
let end = textView.position(from: start!, offset: range.length)
let textRange = textView.textRange(from: start!, to: end!)
let rect = textView.firstRect(for: textRange!)
return textView.convert(rect, from: textView)
}
let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 375, height: 200))
textView.backgroundColor = UIColor.clear
let lineSpacing: CGFloat = 0.0
textView.attributedText = {
let attributedString = NSMutableAttributedString(string: stringarr)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineHeightMultiple = 1.5
paragraphStyle.lineSpacing = lineSpacing
attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSRange(location: 0, length: stringarr.count))
attributedString.addAttribute(.foregroundColor, value: UIColor.white, range: NSRange(location: 0, length: stringarr.count))
attributedString.addAttribute(.font, value: UIFont(name: "AvenirNext-Regular", size: 10.0)!, range: NSRange(location: 0, length: stringarr.count))
let regex = try! NSRegularExpression(pattern: "\\s", options: [])
let matches = regex.matches(in: stringarr, options: [], range: NSRange(location: 0, length: stringarr.count))
for m in matches {
attributedString.addAttribute(.kern, value: 6, range: m.range)
}
return NSAttributedString(attributedString: attributedString)
}()
textView.textAlignment = .center
let textViewBG = UIView(frame: textView.bounds)
textViewBG.backgroundColor = UIColor.white
let pattern = "[^ ]+"
let regex = try! NSRegularExpression(pattern: pattern, options: [])
let matches = regex.matches(in: stringarr, options: [], range: NSRange(location: 0, length: stringarr.count))
for m in matches {
textViewBG.addSubview({
let range = m.range
let frame = frameOfTextInRange(range: range, inTextView: textView).insetBy(dx: CGFloat(-2), dy: CGFloat(3)).offsetBy(dx: CGFloat(0), dy: CGFloat(3))
let v = UIView(frame: frame)
v.layer.cornerRadius = 0
v.backgroundColor = UIColor.black
return v
}())
}
textViewBG.addSubview(textView)
//: End of playground
希望有幫助!
您必須為每個單詞創建一個標簽……以編程方式進行! 我現在做到了,請測試! 希望你喜歡:-)
導入 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)
}
}
}
SWIFT 5. 替代解決方案
解決方案邏輯
你可以在這里找到實現:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.