Wie style ich eine Schaltfläche, um transparenten Text zu haben?

Question

ich arbeite derzeit an einer Begrüßungsseite und ich kam in diesem interessanten Design:

Ich versuche, einen Knopf an der Unterseite mit Text zu machen, die dahinter durch die halbtransparente Ansicht geht . Ich habe den folgenden Code ausprobiert, aber es scheint nicht zu funktionieren:

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 

Weiß jemand, wie man das macht?

Answer 1

ich würde vorschlagen, dass Sie nicht wollen, „transparent“ Text. Stattdessen sollten Sie dies als eine weiße Ansicht mit einer "Maske" betrachten, die den Umriss des Textes darstellt und es ermöglicht, das darunter liegende Bild zu enthüllen. Dies ist ein wenig kompliziert, weil die Maske tatsächlich invertiert wird, wie wir Bilder im Allgemeinen maskieren (z. B. ist der Text "Mit Facebook anmelden" nicht die Maske, sondern der weiße Raum um sie herum). Aber Core Graphics bietet Möglichkeiten, dies sehr einfach zu tun.

So, während es wahrscheinlich am einfachsten diese Grafik in Ihrem bevorzugten Bildbearbeitungstool zu erstellen, wenn Sie es programmatisch tun wollen, könnte man so etwas wie die folgende in Swift 3 oder später tun:

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 
} 

Die Technik, auf die hier zu achten ist, ist die Verwendung von CGImage(maskWidth:...), mit der wir eine Bildmaske erstellen können, außer dem weißen Text und der Grenze, die wir gezeichnet haben. Wenn wir dann das endgültige Bild erstellen, können wir es mit clip(to:mask:) an diese "Bildmaske" anhängen.Wenn wir über das Maskieren von Bildern sprechen, maskieren wir sie im Allgemeinen mit UIBezierRect oder anderen Bildern (wo ein Alpha-Kanal ungleich null anzeigt, was maskiert werden soll und was nicht). Aber hier maskieren wir eine "Image Mask" von Core Graphics, die uns mehr Kontrolle gibt. Eine Erläuterung der Unterschiede zwischen der Maskierung mit einer Bildmaske und der Maskierung mit einem Bild finden Sie im Kapitel Masking Images des Quartz 2D-Programmierhandbuchs .

Für Swift 2-Wiedergabe siehe previous revision of this answer.

Answer 2

Ich würde die Schaltfläche in etwas wie Adobe Fireworks entwerfen, den Text transparent lassen und dann als GIF speichern. Sie können es dann als Hintergrund für Ihre Schaltfläche festlegen.

Answer 3

Als erstes können Sie tintcolor als Ihre gewünschte Farbe einstellen.

und wenn Sie alpha auf 0 setzen, bedeutet dies, dass die Ansicht ausgeblendet wird. Geben Sie kein Alpha an 0.

Sie haben eine Option wie, können Sie clear color verwenden. so wird Hintergrundfarbe zeigen.

zweite Sache, wenn Sie Farbe verwenden möchten, nehmen Sie weiße Farbe mit Alpha 0.5 oder andere Farbe mit Alpha 0,5 oder 0,2 nehmen Sie auch nicht genau 0. es macht Ansicht unsichtbar.

Dies war ein grundlegender Teil. Jetzt in Ihrem Fall können Sie etwas wie das tun,

zum Beispiel Ihre Schaltfläche Größe ist 30 x 100 als Sie sollten uiview als Hintergrund mit größerer Größe dieser Schaltfläche und setzen Sie klare Farbe als Hintergrundfarbe und Schaltfläche in dieser Ansicht hinzufügen Die Rahmenfarbe oder Textfarbe wird automatisch so eingestellt, dass Sie eine klare Farbe als Tönung oder Rahmenfarbe angeben.

eine andere einfache Option ist, können Sie Bild genau mit der Anforderung und nehmen Sie imageview und Hintergrund festlegen, um Farbe und Bild als Bild zu löschen und Schaltfläche auf das Bild einfügen off Schaltfläche mit klarer Farbe und ohne Text, weil Text im Bild abdeckt

selbst

hoffen, dass dies helfen :)