it-swarm.com.de

runder, gerahmter Knopf für iOS 7

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"

enter image description here

Wie ist das möglich?

77
h345k34cr

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>
198
Dima

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:

enter image description here

bonus: Sie verwenden Laufzeitattribute für UIButton Platzhaltertextfarbe (siehe hier ) und zum Ändern von Schriftarten von UILabel, UITextField und UIButton (siehe hier ).

90
abbood

Für Standard-iOS-Steuerelemente wie UIButton, UILabel, Sie sollten die Eigenschaft UIViewtintColor verwenden:

buyButton.layer.borderColor = buyButton.tintColor.CGColor;
17
Gideon King

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

enter image description here

enter image description here

Hoffe es hilft jemandem

8
AlexWien

Ich habe hier den App Store-Style-Button als Referenz eingefügt: AS Button.m

und das Projekt ist hier

Hoffnung zu helfen:]

2
jianpx

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 

RandomBlobs

Das gleiche habe ich auch für das Festlegen der Hintergrundfarbeigenschaft einer Ebene gemacht, jedoch nicht für das obige Projekt.

2
Duncan C

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.

 enter image description here

0
Imanou Petit

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
        }
    }
}
0
Aneel