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?
ios
objective-c
cocoa-touch
uibutton
h345k34cr
quelle
quelle
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 attributes
im Storyboard wie hier gezeigt:Bonus: Sie verwenden Laufzeitattribute für
UIButton
Platzhalter Textfarbe (siehe hier ) und Änderungen der SchriftenUILabel
,UITextField
undUIButton
auch (siehe hier )quelle
Für Standardelemente iOS Kontrolle mögen
UIButton
,UILabel
sollten Sie die VerwendungUIView
tintColor
Eigenschaft:quelle
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
quelle
+[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.Ich habe hier die AppStore- Stilschaltfläche als Referenz implementiert : ASButton.m
und das projekt ist da
Ich hoffe zu helfen:]
quelle
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.
quelle
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 } } }
quelle
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
tinColor
geändert wird (hinter der abgeblendeten Ansicht von aUIAlertController
) und imhighlighted
Status.quelle