iOS 7 runde gerahmte Taste

76

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"

Geben Sie hier die Bildbeschreibung ein

Wie ist das möglich?

h345k34cr
quelle

Antworten:

199

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>
Dima
quelle
Es sollte beachtet werden, dass dies die bevorzugte Methode ist, um runde rechteckige Ansichten zu erstellen, noch lange vor iOS 7.
Nicolas Miari
2
Ich habe eine Bibliothek erstellt, die beim Drücken genauso aussieht wie die Animation. Hoffe das hilft: github.com/yhpark/YHRoundBorderedButton
yhpark
Hallo, ich habe ein Problem. Ich muss nur die obere rechte und untere rechte Ecke meines Buttons abrunden. Wie kann ich das tun? Bitte schlagen Sie Danke im Voraus vor
Harshit Goel
90

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:

Geben Sie hier die Bildbeschreibung ein

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

Abbood
quelle
3
Ahh! Beachten Sie, dass Sie die Farbe von borderColor im Interface Builder NICHT einstellen können. Es gibt nur einen Typ für "Farbe". Es gibt keinen Typ für CGColor - also können Sie das leider nicht so machen! (Wenn Sie "schwarz" als CGColor wollen, können Sie es tun!)
Fattie
Es funktioniert für Eckradius, aber nicht für borderWidth und borderColor
vijayst
17

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

buyButton.layer.borderColor = buyButton.tintColor.CGColor;
Gideon King
quelle
8

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

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Hoffe es hilft jemandem

AlexWien
quelle
1
Das ist wirklich nicht nötig. Sie können ganz einfach einen Rahmen / Rahmen mit dem zugrunde liegenden CALayer des UIButton hinzufügen. Anweisungen finden Sie in meiner Antwort.
Dima
1
ah, ich erinnere mich, ich habe das Selbstzeichnen verwendet, um einen Farbverlauf zu verwenden.
AlexWien
2
Aktualisiert, um diese Antwort für fortgeschrittene Zeichnungen
einzuschränken
2
Diese Lösung bietet einige kleine Vorteile. +[UIBezierPath bezierPathWithRoundedRect:cornerRadius:]verwendet den neuen Eckenradiusstil. Sie können auch ein einzelnes Bild für alle Schaltflächen erstellen, um die GPU-Renderleistung zu verbessern.
Brian Nickel
1
Meine Lösung scheint etwas veraltet zu sein. Jetzt haben Sie UIBezierPath, das das für Sie löst. (Aber ich habe viel nach dem src gesucht, die 4 Bögen und Linien manuell zu zeichnen)
AlexWien
2

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.

Duncan C.
quelle
0

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
        }
    }
}
Ein Aal
quelle
0

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.

Geben Sie hier die Bildbeschreibung ein

Imanou Petit
quelle