web-dev-qa-db-fra.com

bouton rond iOS 7

l'App Store iOS a un bouton rond bleu encadré pour acheter/télécharger des applications.

Dans mon application, vous pouvez télécharger du contenu supplémentaire et je veux avoir un bouton similaire, simplement parce qu'il semble familier à l'utilisateur.

Si vous ne savez pas ce que je veux dire: ces boutons, comme "3,99 $"

enter image description here

Comment est-ce possible?

iosobjective-ccocoa-touchuibutton
77
h345k34cr

Vous pouvez manipuler le calque de votre bouton pour le faire assez facilement.

// 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)

vous pouvez modifier chacun de ceux-ci pour obtenir la couleur et l'effet de bordure souhaités.

Vous devrez également ajouter une importation dans le fichier que vous souhaitez utiliser.

#import <QuartzCore/QuartzCore.h>
198
Dima

Si vous êtes un grand amateur d’utilisation de scénarimages pour la conception de votre interface utilisateur avec iOS .. vous pouvez définir le rayon du coin (et les autres paramètres mentionnés dans dima's answer - bien que, malheureusement, pas la couleur, car il s’agit d’un CGColor et Apple n'a actuellement pas cette option dans la fenêtre contextuelle) dans le identity inspector-> user defined runtime attributes dans le storyboard, comme indiqué ici:

enter image description here

bonus: vous utilisez les attributs d'exécution pour la couleur du texte d'espace réservé UIButton (voir ici ) et pour changer les polices de caractères UILabel, UITextField et UIButton (voir ici )

90
abbood

Pour les éléments de contrôle iOS standard tels que UIButton, UILabel, vous devriez utiliser la propriété UIViewtintColor:

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

Pour une bordure simple comme celle que vous avez décrite, utilisez la réponse de Dima à l'aide de CALAyer.

Si vous voulez plus, par exemple un rectangle arrondi avec un dégradé, utilisez cette approche comme base:

Créez une vue personnalisée qui dessine un rectangle arrondi et placez-le sur le bouton . Utilisez la fonction de recherche ici pour rechercher un rectangle arrondi . Le dessin fonctionne en traçant 4 arcs avec un rayon défini (angles) et 4 droites lignes.

FTR, voici comment créer un UIView avec les angles arrondis corrects pour iOS7, par Alex et Brian.

Je suis à peu près sûr que CGPathCreateWithRoundedRect ne donne pas vous donne les "nouveaux" coins arrondis. Vous devez utiliser bezierPathWithRoundedRect pour les "nouveaux" coins.

#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

J'espère que ça aide quelqu'un

8
AlexWien

J'ai implémenté le bouton de style App Store ici pour référence: AS Button.m

et le projet est ici

J'espère aider:]

2
jianpx

Pour prolonger l'excellente réponse de @abbood, il est en fait possible de définir la couleur de la bordure et la couleur de fond du calque d'une vue depuis IB, mais cela nécessite un peu de préparation.

J'ai créé une catégorie personnalisée sur NSView, CALayer + setUIColor.h.

La méthode qui définit les couleurs de bordure ne possède qu'une seule méthode, setBorderUIColor. Il prend une entrée UIColor, récupère la NSColor sous-jacente d'UIColor et applique cette couleur au calque de la vue.

Ensuite, dans IB, vous ajoutez simplement un attribut d’exécution défini par l’utilisateur, comme suit:

KeyPath layer.borderUIColor Type couleur Valeur La couleur désirée.

Au moment de l'exécution, le système appelle votre méthode en lui transmettant l'UIColor défini dans IB. La catégorie obtient le CGColor de l'UIColor et l'applique au calque.

Vous pouvez le voir dans un projet de travail dans un de mes projets github appelé 

RandomBlobs

J'ai également fait la même chose pour définir la propriété de couleur d'arrière-plan d'un calque, mais pas dans le projet ci-dessus.

2
Duncan C

Avec Swift 3/iOS 10, vous pouvez créer une sous-classe de UIButton afin d’avoir un bouton personnalisé qui ressemblera au bouton de bordure arrondie bleue dans l’application iOS AppStore.

Le code suivant montre comment gérer correctement la couleur de teinte (lorsque le bouton apparaît derrière la vue atténuée d'une UIAlertController), la couleur du titre, la couleur d'arrière-plan mise en surbrillance, le style de la bordure, la couleur de la bordure et les incrustations de contenu.

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 (création d'un bouton personnalisé par programme):

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 pour créer un bouton personnalisé dans le 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)
    }

}

L'image ci-dessous montre comment le bouton personnalisé apparaîtra dans un état normal, lorsque la variable système tinColor sera modifiée (derrière la vue atténuée d'une UIAlertController) et dans l'état highlighted.

 enter image description here

0
Imanou Petit

Et pour la version Swift de l'extension de Duncan C de la réponse de abbood:

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