如何设置按钮的样式以具有透明文本？

Question

我目前正在制作欢迎页面，我发现了这个有趣的设计：

我正在尝试在底部制作一个按钮，其中的文本会穿过它后面的半透明视图。我尝试了以下代码，但它似乎不起作用：

let transparent = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
let semiwhite = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.15)        
bottomView.backgroundColor = semiwhite
loginButton.backgroundColor = semiwhite
loginButton.setTitleColor(transparent, forState: .Normal)
loginButton.layer.cornerRadius = 10
loginButton.layer.masksToBounds = true
loginButton.layer.borderWidth = 2.5
loginButton.layer.borderColor = transparent.CGColor

有人知道怎么做吗？

Answer 1

我会在类似 Adobe Fireworks 的软件中设计按钮，使文本保持透明，然后将其另存为 GIF。然后您可以将其设置为按钮的背景。

Answer 2

首先您可以将 tintcolor 设置为您想要的颜色。

如果您将 alpha 设置为 0 那么这意味着视图被隐藏了。所以不要给 0.

alpha

你有类似的选项，你可以使用clear color。所以背景颜色会显示。

第二件事，如果你想使用颜色，那么使用 alpha 0.5 的白色或其他 alpha 0.5 或 0.2 的颜色同样不要取精确的 0。它会使视图不可见。

这是基础部分。现在在你的情况下你可以做这样的事情，

例如，您的按钮尺寸为 30 x 100，您应该将 uiview 作为背景，该按钮的尺寸更大，并将清晰颜色设置为背景颜色，并在该视图上添加按钮，这样边框颜色或文本颜色将自动设置为明智的如果你给清晰的颜色作为色调或边框。

另一个简单的选择是你可以拍摄与要求完全匹配的图像并拍摄图像视图并将背景设置为清晰的颜色和图像作为你的图像并在该图像上添加按钮以关闭颜色清晰且没有文本的按钮因为文本覆盖在图片本身

希望这会有所帮助:)

Answer 3

我建议您不要 "transparent" 文字。相反，您可能希望将其视为带有 "mask" 的白色视图，它是文本的轮廓，允许显示下面的图像。这有点复杂，因为遮罩实际上与我们通常遮罩图像的方式相反（例如，"Sign in with Facebook" 文本不是遮罩，而是它周围的白色 space）。但是 Core Graphics 提供了很容易做到这一点的方法。

因此，虽然在您最喜欢的图像编辑工具中创建此图形可能最简单，但如果您想以编程方式进行，您可以在 Swift 3 或更高版本中执行类似以下操作：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let image1 = maskedImage(size: button1.bounds.size, text: "Sign in with Facebook")
    button1.setImage(image1, for: .normal)

    let image2 = maskedImage(size: button2.bounds.size, text: "Sign-up with Email")
    button2.setImage(image2, for: .normal)
}

func maskedImage(size: CGSize, text: String) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(size, true, 0)

    let context = UIGraphicsGetCurrentContext()
    context?.scaleBy(x: 1, y: -1)
    context?.translateBy(x: 0, y: -size.height)

    // draw rounded rectange inset of the button's entire dimensions

    UIColor.white.setStroke()
    let pathRect = CGRect(origin: .zero, size: size).insetBy(dx: 10, dy: 10)
    let path = UIBezierPath(roundedRect: pathRect, cornerRadius: 5)
    path.lineWidth = 4
    path.stroke()

    // draw the text

    let attributes: [NSAttributedStringKey: Any] = [
        .font: UIFont.preferredFont(forTextStyle: .caption1),
        .foregroundColor: UIColor.white
    ]
    let textSize = text.size(withAttributes: attributes)
    let point = CGPoint(x: (size.width - textSize.width) / 2, y: (size.height - textSize.height) / 2)
    text.draw(at: point, withAttributes: attributes)

    // capture the image and end context

    let maskImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // create image mask

    guard let cgimage = maskImage?.cgImage, let dataProvider = cgimage.dataProvider else { return nil }

    let bytesPerRow = cgimage.bytesPerRow
    let bitsPerPixel = cgimage.bitsPerPixel
    let width = cgimage.width
    let height = cgimage.height
    let bitsPerComponent = cgimage.bitsPerComponent

    guard let mask = CGImage(maskWidth: width, height: height, bitsPerComponent: bitsPerComponent, bitsPerPixel: bitsPerPixel, bytesPerRow: bytesPerRow, provider: dataProvider, decode: nil, shouldInterpolate: false) else { return nil }

    // create the actual image

    let rect = CGRect(origin: .zero, size: size)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    UIGraphicsGetCurrentContext()?.clip(to: rect, mask: mask)
    UIColor.white.withAlphaComponent(0.9).setFill()
    UIBezierPath(rect: rect).fill()
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // return image

    return image
}

这里要注意的技巧是CGImage(maskWidth:...), which lets us create an image mask out everything except the white text and border that we drew. Then when we create the final image, we can clip it to this "image mask" with clip(to:mask:)的使用。

通常，当我们谈论屏蔽图像时，我们是用 UIBezierRect 或其他图像屏蔽它们（其中非零 alpha 通道显示应该屏蔽什么，不应该屏蔽什么）。但在这里我们使用 Core Graphics "image mask" 进行遮罩，这给了我们更多的控制权。有关使用图像掩码和使用图像进行掩码之间差异的讨论，请参阅 Quartz 2D 编程指南的 Masking Images 章节。

对于 Swift 2 版本，请参阅 previous revision of this answer。

如何设置按钮的样式以具有透明文本？

How do I style a button to have transparent text?

core-graphics

transparent

uibutton

ios

swift