web-dev-qa-db-fra.com

Comment créer un UILabel aux angles arrondis sur l'iPhone?

Existe-t-il un moyen intégré de créer des étiquettes UIL arrondies? Si la réponse est non, comment procéder pour créer un tel objet?

iosobjective-ccocoa-touchuilabelrounded-corners
149
newtonapple

iOS 3.0 et versions ultérieures

iPhone OS 3.0 et versions ultérieures prennent en charge la propriété cornerRadius de la classe CALayer. Chaque vue a une instance CALayer que vous pouvez manipuler. Cela signifie que vous pouvez obtenir des angles arrondis sur une seule ligne:

view.layer.cornerRadius = 8;

Vous aurez besoin de #import <QuartzCore/QuartzCore.h> Et de vous connecter au framework QuartzCore pour avoir accès aux en-têtes et aux propriétés de CALayer.

Avant iOS 3.0

Une façon de le faire, que j’ai utilisée récemment, est de créer une sous-classe UIView qui dessine simplement un rectangle arrondi, puis de transformer UILabel ou, dans mon cas, UITextView, une sous-vue à l’intérieur de celui-ci. Plus précisément:

  1. Créez une sous-classe UIView et nommez-la sous la forme RoundRectView.
  2. Dans la méthode drawRect: De RoundRectView, tracez un chemin autour des limites de la vue à l'aide d'appels Core Graphics tels que CGContextAddLineToPoint () pour les arêtes et CGContextAddArcToPoint () pour les angles arrondis.
  3. Créez une instance UILabel et faites-en une sous-vue de RoundRectView.
  4. Définissez le cadre de l'étiquette sur quelques pixels en dessous des limites de RoundRectView. (Par exemple, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Vous pouvez placer RoundRectView sur une vue à l'aide d'Interface Builder si vous créez un UIView générique, puis modifiez sa classe à l'aide de l'inspecteur. Vous ne verrez le rectangle que lorsque vous aurez compilé et exécuté votre application, mais vous pourrez au moins placer la sous-vue et la connecter à des prises ou à des actions si nécessaire.

227
benzado

Pour les appareils avec iOS 7.1 ou version ultérieure, vous devez ajouter:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
137
OscarWyck

Pour Swift IOS8 et suivants, en fonction de la réponse OScarsWyck:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
19
VBaarathi
  1. vous avez un UILabel appelé: myLabel.
  2. dans votre importation de fichier "m" ou "h": #import <QuartzCore/QuartzCore.h>

  3. dans votre viewDidLoad écrivez cette ligne: self.myLabel.layer.cornerRadius = 8;

    • dépend de la façon dont vous voulez, vous pouvez changer la valeur de cornerRadius de 8 en un autre nombre :)

Bonne chance

11
Gabriel

Vous pouvez faire une bordure arrondie avec une largeur de bordure de tout contrôle de cette manière: -

CALayer * l1 = [lblName layer];
[l1 setMasksToBounds:YES];
[l1 setCornerRadius:5.0];

// You can even add a border
[l1 setBorderWidth:5.0];
[l1 setBorderColor:[[UIColor darkGrayColor] CGColor]];


Remplacez simplement lblName par votre UILabel.

Note: - N'oubliez pas d'importer <QuartzCore/QuartzCore.h>

11
Piyush Dubey

xCode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
6
Ahmed Abdallah

Une autre méthode consiste à placer un png derrière UILabel. J'ai des vues avec plusieurs étiquettes qui superposent un seul png d'arrière-plan contenant toutes les illustrations pour les étiquettes individuelles.

6
Alpinista

J'ai créé une sous-classe Swift UILabel pour obtenir cet effet. De plus, je règle automatiquement la couleur du texte en noir ou en blanc pour un contraste maximal.

Résultat

colors-rounded-borders

Messages SO utilisés:

Terrain de jeux

Il suffit de coller ceci dans une aire de jeu iOS:

//: Playground - noun: a place where people can play

import UIKit

class PillLabel : UILabel{

    @IBInspectable var color = UIColor.lightGrayColor()
    @IBInspectable var cornerRadius: CGFloat = 8
    @IBInspectable var labelText: String = "None"
    @IBInspectable var fontSize: CGFloat = 10.5

    // This has to be balanced with the number of spaces prefixed to the text
    let borderWidth: CGFloat = 3

    init(text: String, color: UIColor = UIColor.lightGrayColor()) {
        super.init(frame: CGRectMake(0, 0, 1, 1))
        labelText = text
        self.color = color
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup(){
        // This has to be balanced with the borderWidth property
        text = "  \(labelText)".uppercaseString

        // Credits to https://stackoverflow.com/a/33015915/784318
        layer.borderWidth = borderWidth
        layer.cornerRadius = cornerRadius
        backgroundColor = color
        layer.borderColor = color.CGColor
        layer.masksToBounds = true
        font = UIFont.boldSystemFontOfSize(fontSize)
        textColor = color.contrastColor
        sizeToFit()

        // Credits to https://stackoverflow.com/a/15184257/784318
        frame = CGRectInset(self.frame, -borderWidth, -borderWidth)
    }
}


extension UIColor {
    // Credits to https://stackoverflow.com/a/29044899/784318
    func isLight() -> Bool{
        var green: CGFloat = 0.0, red: CGFloat = 0.0, blue: CGFloat = 0.0, alpha: CGFloat = 0.0
        self.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        let brightness = ((red * 299) + (green * 587) + (blue * 114) ) / 1000

        return brightness < 0.5 ? false : true
    }

    var contrastColor: UIColor{
        return self.isLight() ? UIColor.blackColor() : UIColor.whiteColor()
    }
}

var label = PillLabel(text: "yellow", color: .yellowColor())

label = PillLabel(text: "green", color: .greenColor())

label = PillLabel(text: "white", color: .whiteColor())

label = PillLabel(text: "black", color: .blackColor())
5
Besi
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
4
Gaurav Gilani

Si vous voulez un coin arrondi d'objets d'interface utilisateur comme (UILabel, UIView, UIButton, UIImageView) par storyboard, définissez clip to bounds vrai et mis User Defined Runtime Attributes Chemin clé en tant que layer.cornerRadius, tapez = nombre et valeur = 9 (selon vos besoins)

Set clip to bounds asSet User Defined Runtime Attributes as

3
Nikhlesh Bagdiya

Swift 3

Si vous voulez une étiquette arrondie avec la couleur de fond, en plus de la plupart des autres réponses, vous devez également définir la couleur de fond de layer. Cela ne fonctionne pas lorsque vous définissez view couleur d'arrière-plan.

label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor

Si vous utilisez la mise en page automatique, souhaitez un remplissage autour de l'étiquette et ne souhaitez pas définir la taille de l'étiquette manuellement, vous pouvez créer une sous-classe UILabel et remplacer la propriété intrinsincContentSize:

class LabelWithPadding: UILabel {
    override var intrinsicContentSize: CGSize {
        let defaultSize = super.intrinsicContentSize
        return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
    }
}

Pour combiner les deux, vous devrez également définir label.textAlignment = center, sinon le texte serait aligné à gauche.

2
Marián Černý

Fonctionne parfaitement dans Swift 2.0

    @IBOutlet var theImage: UIImageView! //you can replace this with any UIObject eg: label etc


    override func viewDidLoad() {
        super.viewDidLoad()
//Make sure the width and height are same
        self.theImage.layer.cornerRadius = self.theImage.frame.size.width / 2
        self.theImage.layer.borderWidth = 2.0
        self.theImage.layer.borderColor = UIColor.whiteColor().CGColor
        self.theImage.clipsToBounds = true

    }
2
Naishta

Fonctionne bien dans Xcode 8.1.2 avec Swift 3, testé au mois d'août 2017

"cornerRadius" est la propriété clé permettant de définir les bords arrondis. Si vous utilisez le même style pour toutes les étiquettes de votre application, je vous le recommande pour une méthode d'extension.

Code: 

 // extension Class
extension UILabel {

    // extension user defined Method
    func setRoundEdge() {
        let myGreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        //Width of border
        self.layer.borderWidth = 1.0
        //How much the Edge to be rounded
        self.layer.cornerRadius = 5.0

        // following properties are optional
        //color for border
        self.layer.borderColor = myGreenColor.cgColor
        //color for text
        self.textColor = UIColor.red
        // Mask the bound
        self.layer.masksToBounds = true
        //clip the pixel contents
        self.clipsToBounds = true
    }
}

Sortie:

enter image description here

Pourquoi une méthode d'extension?

Créez un fichier Swift et ajoutez le code suivant, qui contient la méthode Extention dans la classe "UILabel". Cette méthode est définie par l'utilisateur mais fonctionne pour tous les libellés de votre application. pour maintenir la cohérence et le code propre, si vous modifiez un style à l'avenir, n'exigez que dans la méthode d'extension.

2
BHUVANESH MOHANKUMAR

Dans Monotouch/Xamarin.iOS, j'ai résolu le même problème, comme ceci:

UILabel exampleLabel = new UILabel(new CGRect(0, 0, 100, 50))
        {
            Text = "Hello Monotouch red label"
        };
        exampleLabel.Layer.MasksToBounds = true;
        exampleLabel.Layer.CornerRadius = 8;
        exampleLabel.Layer.BorderColor = UIColor.Red.CGColor;
        exampleLabel.Layer.BorderWidth = 2;
2
Daniele D.

Avez-vous essayé d’utiliser le UIButton du générateur d’interface (dont les angles sont arrondis) et d’essayer avec les paramètres pour lui donner l’apparence d’une étiquette. si tout ce que vous voulez, c'est afficher du texte statique à l'intérieur.

2
Naren

Selon ce que vous faites exactement, vous pouvez créer une image et la définir comme arrière-plan par programmation.

0
Steven Mayer