iOS 镂空UILabel

在 iOS 开发中，UILabel 是常用的 UI 控件之一，用于展示文本内容。通常情况下，UILabel 的背景色是不透明的，文本会显示在一个矩形的背景框内。然而，在某些场景下，我们可能需要实现一个镂空的 UILabel，即将 UILabel 的背景设为透明，只显示文本内容，而不显示矩形背景框。

本文将介绍如何实现 iOS 镂空 UILabel，并提供相应的代码示例。

基本思路

要实现镂空 UILabel，我们可以通过以下步骤来实现：

  1. 创建一个 UIView，并将其背景色设置为透明。
  2. 将 UILabel 添加到这个 UIView 上。
  3. 使用 Core Graphics 绘制一个镂空的矩形，使 UILabel 的文字内容能够显示出来。

接下来，我们将详细介绍每个步骤的具体实现。

创建透明的 UIView

我们首先需要创建一个透明的 UIView，作为 UILabel 的容器。在 UIView 的背景色中，我们可以使用透明度属性 alpha 来将背景设为透明。

let transparentView = UIView()
transparentView.backgroundColor = UIColor.clear

添加 UILabel

将 UILabel 添加到我们创建的透明 UIView 上，以便将文本内容显示在 UILabel 上。

let label = UILabel()
label.text = "Hello World"
label.textColor = UIColor.black
label.font = UIFont.systemFont(ofSize: 16)
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false

transparentView.addSubview(label)

label.centerXAnchor.constraint(equalTo: transparentView.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: transparentView.centerYAnchor).isActive = true

在以上代码中，我们创建了一个 UILabel，设置了文本内容、字体、颜色和对齐方式，并将其添加到透明 UIView 上。此外，我们还使用了 Auto Layout 来对 UILabel 进行布局。

绘制镂空矩形

接下来，我们使用 Core Graphics 绘制一个镂空的矩形，以使 UILabel 的文本内容能够显示出来。

let maskLayer = CALayer()
maskLayer.frame = transparentView.bounds

let path = UIBezierPath(rect: transparentView.bounds)
let cutoutPath = UIBezierPath(roundedRect: label.frame, cornerRadius: label.layer.cornerRadius)
path.append(cutoutPath)
path.usesEvenOddFillRule = true

let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.fillRule = .evenOdd

transparentView.layer.mask = maskLayer

在以上代码中，我们首先创建了一个 CALayer，并将其大小设为透明 UIView 的大小。然后，我们使用 UIBezierPath 创建了一个矩形的路径，并通过 UIBezierPath 的 append 方法将 UILabel 的 frame 转化为一个圆角矩形的路径。最后，我们使用 CAShapeLayer 将路径设置为 mask，并将该 mask 应用到透明 UIView 上。

完整示例代码

import UIKit

class HollowLabelViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let transparentView = UIView()
        transparentView.backgroundColor = UIColor.clear
        transparentView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(transparentView)

        transparentView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        transparentView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        transparentView.widthAnchor.constraint(equalToConstant: 200).isActive = true
        transparentView.heightAnchor.constraint(equalToConstant: 100).isActive = true

        let label = UILabel()
        label.text = "Hello World"
        label.textColor = UIColor.black
        label.font = UIFont.systemFont(ofSize: 16)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false

        transparentView.addSubview(label)

        label.centerXAnchor.constraint(equalTo: transparentView.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: transparentView.centerYAnchor).isActive = true

        let maskLayer = CALayer()
        maskLayer.frame = transparentView.bounds

        let path = UIBezierPath(rect: transparentView.bounds)
        let cutoutPath = UIBezierPath(roundedRect: label.frame, cornerRadius: label.layer.cornerRadius)
        path.append(cutoutPath)
        path.usesEvenOddFillRule = true

        maskLayer.path = path.cgPath
        maskLayer.fillRule = .evenOdd

        transparentView.layer.mask = maskLayer
    }
}

结语

通过以上步骤，我们就能实现一个镂空的 UILabel。在这个