透明なテキストを持つようにボタンのスタイルを設定するにはどうすればよいですか？

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

「透過的な」テキストを望まないとお勧めします。代わりに、これをテキストの輪郭である「マスク」で白い視点と考えることができ、その下の画像を表示することができます。これは、マスクが実際に画像をマスクする方法（たとえば、「Facebookでログイン」のテキストがマスクではなく、周囲の空白など）から実際に反転されているため、少し複雑です。しかしCore Graphicsはこれを非常に簡単に行う方法を提供しています。だから、

、それはおそらくあなたの好きな画像編集ツールでこのグラフィックを作成するのが最も簡単ですが、あなたはプログラムでそれをやってみたかった場合、あなたはスウィフト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:...)の使用です。これにより、白いテキストと境界線を除いてすべてのイメージマスクを作成できます。最終的な画像を作成するときには、clip(to:mask:)でこの「画像マスク」にクリップすることができます。

一般に、画像をマスキングするときは、UIBezierRectなどの画像（非ゼロのアルファチャンネルでは、何を隠すべきか、そうでないことを明らかにします）でマスキングします。しかしここでは、Core Graphicsの「イメージマスク」を使用してマスクしています。画像マスクによるマスキングと画像によるマスキングの違いについては、Quartz 2D Programming GuideのMasking Imagesの章を参照してください。

スウィフト2のレンディションについては、previous revision of this answerを参照してください。

Answer 2

Adob​​e Fireworksのようなボタンをデザインし、テキストを透明にしてからGIFとして保存します。 ボタンの背景として設定することができます。

Answer 3

最初にあなたが希望の色としてtintcolorを設定することができます。

alphaを0に設定すると、表示が非表示になっていることを意味します。アルファを0に与えないでください。

あなたはclear colorのようなオプションがあります。背景色が表示されます。

色を使用したい場合は、アルファベット0.5またはアルファ0.5または0.2の他の色を使用して白色を取得する場合は、正確に0を使用しないでください。表示が見えなくなります。

これは基本的な部分でした。今の場合、あなたはこのようなことができます

たとえば、あなたのボタンのサイズは、そのボタンの大きなサイズで背景としてuiviewを取る必要があり、背景色として透明を設定し、そのビューにボタンを追加するよりも境界線や境界線として透明な色を指定すると、境界線の色やテキストの色が自動的に賢明に設定されます。

もう1つの簡単なオプションは、要件と正確に一致する画像を撮影して、画像としてカラーと画像をクリアし、その画像にボタンを追加することができます。

希望します。