UILabel的每个单词周围都有边框 [英] Border around every word of UILabel

问题描述

有没有一种方法可以在UILabel的每个单词周围绘制边框.假设UILabel包含字符串"This is Line 1".

Is there a way i can draw border around every word of UILabel. Suppose UILabel contains the string " This is the Line 1".

我想在5个字左右设置5个不同的边框

I want 5 different border around 5 words

1. 此
2. 是
3. the
4. 行
5. 1

1. This
2. Is
3. the
4. Line
5. 1

推荐答案

我不知道用于UILabel的易于使用的代码，但是对于UITextView:

I am not aware of an easy to use code for UILabel, but for 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

使用正则表达式获取每个单词的匹配项:

use regular expressions get a match for every word:

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))

获取每个匹配项的矩形的函数(从此答案移植):

function to get a rect for each match (ported from 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)
}

在每个匹配项上重复，获取其框架，使用其创建背景视图，并将其添加到文本视图:

iterate over each match, get its frame, use it to create a view for the background, add it to the text view:

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)

}

但是，这可能并没有达到您期望的结果.为了获得更好的控件，可以使用属性字符串.

But possibly this doesn't give the result you were expecting. To get a better controls, you could use attributed strings.

与使用属性字符串的代码相同

Here the same code with using attributed strings

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添加到顶部

Also helpful to create beautiful styles would be to add the views to a background view and add that textview on top

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)

为了增加单词之间的间隔，我们可以更改空白的字距

to increase the space between the words we can alter the kerning of the whitespace

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)

这篇关于UILabel的每个单词周围都有边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！