iOS 7 runde gerahmte Taste

Der iOS App Store verfügt über eine blaue runde Schaltfläche zum Kaufen / Herunterladen von Apps.

In meiner App können Sie zusätzliche Inhalte herunterladen, und ich möchte eine ähnliche Schaltfläche, nur weil sie dem Benutzer bekannt vorkommt.

Wenn Sie nicht wissen, was ich meine: diese Schaltflächen, wie "$ 3.99"

Wie ist das möglich?

Sie können den CALayer Ihrer Schaltfläche manipulieren, um dies ziemlich einfach zu tun.

// assuming you have a UIButton or more generally a UIView called buyButton

buyButton.layer.cornerRadius = 2;
buyButton.layer.borderWidth = 1;
buyButton.layer.borderColor = [UIColor blueColor].CGColor;
// (note - may prefer to use the tintColor of the control)

Sie können jede dieser Optionen anpassen, um den gewünschten Farb- und Randeffekt zu erzielen.

Sie müssen auch einen Import in jede Datei hinzufügen, die Sie CALayers verwenden möchten

#import <QuartzCore/QuartzCore.h>

Wenn Sie ein großer Fan von Storyboards für Ihr UI-Design mit iOS sind, können Sie den Eckenradius (und alle anderen Parameter, wie in Dimas Antwort erwähnt, einstellen - obwohl dies leider nicht die Farbe ist, da es sich um eine CGColor handelt und Apple dies derzeit nicht tut habe diese Option im Popup) im identity inspector-> user defined runtime attributesim Storyboard wie hier gezeigt:

Bonus: Sie verwenden Laufzeitattribute für UIButtonPlatzhalter Textfarbe (siehe hier ) und Änderungen der Schriften UILabel, UITextFieldund UIButtonauch (siehe hier )

Für Standardelemente iOS Kontrolle mögen UIButton, UILabelsollten Sie die Verwendung UIView tintColorEigenschaft:

buyButton.layer.borderColor = buyButton.tintColor.CGColor;

Verwenden Sie für einfache Rahmen, wie Sie sie beschrieben haben, die Antwort von Dima mit CALAyer.

Wenn Sie mehr möchten, z. B. ein abgerundetes Rechteck mit Farbverlauf, verwenden Sie diesen Ansatz als Basis:

Erstellen Sie eine benutzerdefinierte Ansicht, die ein abgerundetes Rechteck zeichnet, und platzieren Sie es über der Schaltfläche. Verwenden Sie die Suchfunktion hier, um nach gerundeten Rechtecken zu suchen. Die Zeichnung zeichnet 4 Bögen mit definiertem Radius (Ecken) und 4 Geraden.

FTR, hier erfahren Sie, wie Sie ein UIView mit den richtigen abgerundeten iOS7-Ecken für Alex und Brian erstellen.

Ich bin mir ziemlich sicher , dass CGPathCreateWithRoundedRect nicht macht Sie geben die „neuen“ abgerundeten Ecken. Sie müssen bezierPathWithRoundedRect für die "neuen" Ecken verwenden.

#import "UIViewWithIOS7RoundedCorners.h"
@implementation UIViewWithIOS7RoundedCorners
-(void)drawRect:(CGRect)rect
    {
    // for a filled shape...

    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:4];
    [[UIColor blueColor] setFill];
    [path fill];

    // for just a border...

    int thickness=2;
    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:
            CGRectInset(self.bounds, thickness/2, thickness/2)
            cornerRadius: 4];
    path.lineWidth = thickness;
    [[UIColor blueColor] setStroke];
    [path stroke];
    }

@end
// ps don't forget to set .backgroundColor=[UIColor clearColor]
// perhaps in initWithCoder/initWithFrame

Hoffe es hilft jemandem

Ich habe hier die AppStore- Stilschaltfläche als Referenz implementiert : ASButton.m

und das projekt ist da

Ich hoffe zu helfen:]

Um die hervorragende Antwort von @abbood zu erweitern, ist es tatsächlich möglich, die Rahmenfarbe und die Hintergrundfarbe der Ebene einer Ansicht über IB festzulegen. Dies erfordert jedoch einige Vorbereitungsarbeiten.

Ich habe eine benutzerdefinierte Kategorie in NSView erstellt, CALayer + setUIColor.h.

Das, das Rahmenfarben festlegt, hat nur eine Methode, setBorderUIColor. Es nimmt eine UIColor als Eingabe, ruft die zugrunde liegende NSColor der UIColor ab und wendet diese Farbe auf die Ebene der Ansicht an.

Dann fügen Sie in IB einfach ein benutzerdefiniertes Laufzeitattribut wie folgt hinzu:

KeyPath layer.borderUIColor Typ Farbe Wert Die gewünschte Farbe.

Zur Laufzeit ruft das System Ihre Methode auf und übergibt die in IB definierte UIColor. Die Kategorie erhält die CGColor von der UIColor und wendet sie auf die Ebene an.

Sie können dies in einem Arbeitsprojekt in einem meiner Github-Projekte sehen

RandomBlobs

Dasselbe habe ich auch für das Festlegen der Hintergrundfarbeneigenschaft einer Ebene getan, jedoch nicht im obigen Projekt.

Und für die schnelle Version von Duncan Cs Erweiterung von Abboods Antwort:

extension CALayer {
    var borderUIColor: UIColor? {
        get {
            if let borderColor = borderColor {
                return UIColor(CGColor: borderColor)
            }
            return nil
        }
        set {
            borderColor = newValue?.CGColor ?? nil
        }
    }
}

Mit Swift 5.1 / iOS 13 können Sie eine Unterklasse von erstellen UIButton, um eine benutzerdefinierte Schaltfläche zu erhalten, die wie die blaue Schaltfläche mit abgerundeten Rändern in der iOS AppStore-App aussieht.

Der folgende Code zeigt, wie die Farbtonfarbe (wenn die Schaltfläche hinter der abgeblendeten Ansicht von a angezeigt wird UIAlertController), die Farbe des Titels, die hervorgehobene Hintergrundfarbe, der Stil des Rahmens, die Farbe des Rahmens und die Inhaltseinfügungen ordnungsgemäß verwaltet werden.

CustomButton.swift:

import UIKit

class CustomButton: UIButton {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setProperties()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setProperties()
    }

    func setProperties() {
        // Set the layer's properties
        layer.borderColor = tintColor?.cgColor
        layer.borderWidth = 1
        layer.cornerRadius = 4

        // Set colors for title's states
        setTitleColor(tintColor, for: .normal)
        setTitleColor(.white, for: .highlighted)

        // Add some margins between the title (content) and the border
        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    override var isHighlighted: Bool {
        didSet {
            // Toggle the background color according to button's highlighted state
            backgroundColor = super.isHighlighted ? tintColor : nil
        }
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        // When the tint color is changed by the system (e.g. when the button appears below the dimmed view of a UIAlertController), we have to manually update border color and title's text color
        layer.borderColor = tintColor?.cgColor
        setTitleColor(tintColor, for: .normal)
    }

}

ViewController.swift:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .secondarySystemBackground

        let button = CustomButton()
        button.setTitle("Normal", for: .normal)
        button.setTitle("Highlighted", for: .highlighted)
        button.addTarget(self, action: #selector(presentAlert(_:)), for: .touchUpInside)
        view.addSubview(button)

        // auto layout
        button.translatesAutoresizingMaskIntoConstraints = false
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
    }

    /// Present alert when button is tapped
    @objc func presentAlert(_ sender: UIButton) {
        let alertController = UIAlertController(title: "Title", message: "Message", preferredStyle: .alert)
        let alertAction = UIAlertAction(title: "OK", style: .default)
        alertController.addAction(alertAction)
        present(alertController, animated: true, completion: nil)
    }

}

Die folgenden Bilder zeigen, wie die benutzerdefinierte Schaltfläche im Normalzustand angezeigt wird, wenn das System tinColorgeändert wird (hinter der abgeblendeten Ansicht von a UIAlertController) und im highlightedStatus.