der iOS App Store verfügt über eine blaue runde Schaltfläche zum Kauf/Download von Apps.
In meiner App können Sie zusätzliche Inhalte herunterladen und ich möchte eine ähnliche Schaltfläche haben, 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 so anpassen, dass dies ganz einfach funktioniert.
// 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 jeden von ihnen anpassen, um die gewünschte Farbe und den gewünschten Randeffekt zu erhalten.
Sie müssen auch einen Import in jede Datei hinzufügen, die Sie mit CALayers verwenden möchten
#import <QuartzCore/QuartzCore.h>
Wenn Sie ein großer Fan von der Verwendung von Storyboards für Ihr UI-Design mit iOS sind, können Sie den Eckenradius festlegen (und welche anderen Parameter in Dimas answer - erwähnt werden, obwohl dies leider nicht die Farbe ist, da es sich um eine CGColor-Komponente handelt Apple hat diese Option derzeit nicht im Popup) im identity inspector
-> user defined runtime attributes
im Storyboard, wie hier gezeigt:
bonus: Sie verwenden Laufzeitattribute für UIButton
Platzhaltertextfarbe (siehe hier ) und zum Ändern von Schriftarten von UILabel
, UITextField
und UIButton
(siehe hier ).
Für Standard-iOS-Steuerelemente wie UIButton
, UILabel
, Sie sollten die Eigenschaft UIView
tintColor
verwenden:
buyButton.layer.borderColor = buyButton.tintColor.CGColor;
Verwenden Sie für einen einfachen Rahmen, den Sie beschrieben haben, die Antwort von Dima mit CALAyer.
Wenn Sie mehr wollen, 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, um nach abgerundeten Rechtecken zu suchen. Die Zeichnung funktioniert, indem Sie 4 Bögen mit definiertem Radius (Ecken) und 4 gerade zeichnen Zeilen.
FTR, so erstellen Sie eine UIView mit den richtigen abgerundeten iOS7-Ecken pro Alex und Brian.
Ich bin mir ziemlich sicher, dass CGPathCreateWithRoundedRect nicht Ihnen die "neuen" abgerundeten Ecken gibt. Für die "neuen" Ecken müssen Sie bezierPathWithRoundedRect 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 den App Store-Style-Button als Referenz eingefügt: AS Button.m
und das Projekt ist hier
Hoffnung zu helfen:]
Um die hervorragende Antwort von @abbood zu erweitern, ist es tatsächlich möglich, die Rand- und Hintergrundfarbe der Ebene einer Ansicht von IB aus festzulegen. Dies erfordert jedoch ein wenig Vorarbeit.
Ich habe eine benutzerdefinierte Kategorie für NSView erstellt, CALayer + setUIColor.h.
Die Rahmenfarben, für die Rahmen eingestellt werden, haben nur eine Methode, setBorderUIColor. Es nimmt eine UIColor als Eingabe, ruft die darunter 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 von mir genannten Github-Projekt sehen
Das gleiche habe ich auch für das Festlegen der Hintergrundfarbeigenschaft einer Ebene gemacht, jedoch nicht für das obige Projekt.
Mit Swift 3/iOS 10 können Sie eine Unterklasse von UIButton
erstellen, um eine benutzerdefinierte Schaltfläche zu erhalten, die wie die blaue abgerundete Schaltfläche in der iOS AppStore-App aussieht.
Der folgende Code zeigt, wie die Tönungsfarbe richtig verwaltet wird (wenn die Schaltfläche hinter der abgeblendeten Ansicht einer UIAlertController
angezeigt wird), die Titelfarbe, die hervorgehobene Hintergrundfarbe, der Randstil, die Randfarbe und die Inhaltsinserts.
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)
// Make sure to set CustomButton as the class of the UIButton in Identity inspector of storyboard
// Make sure to set Custom as the type of the UIButton in Attributes inspector of storyboard
setProperties()
}
func setProperties() {
// Set tintColor (only if you want to replace the system default tintColor)
// tintColor = .red
// Set the border's color
layer.borderColor = tintColor?.cgColor
// 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 (eg 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
titleLabel?.textColor = tintColor
}
override func draw(_ rect: CGRect) {
// Draw the border
layer.borderWidth = 1
layer.cornerRadius = 4
layer.masksToBounds = true
}
}
ViewController.Swift (programmgesteuerte Erstellung einer benutzerdefinierten Schaltfläche):
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
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
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)
}
}
ViewController.Swift (Alternative zum Erstellen einer benutzerdefinierten Schaltfläche im Storyboard):
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: CustomButton!
override func viewDidLoad() {
super.viewDidLoad()
button.setTitle("Normal", for: .normal)
button.setTitle("Highlighted", for: .highlighted)
}
/// Present alert when button is tapped
@IBAction 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)
}
}
Das Bild unten zeigt, wie die benutzerdefinierte Schaltfläche im Normalzustand angezeigt wird, wenn das System tinColor
(hinter der abgeblendeten Ansicht einer UIAlertController
) und im highlighted
-Status geändert wird.
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
}
}
}