Comment puis-je créer un rond acculé UILabel sur l'iPhone?

iOS 3.0 et plus tard

iPhone OS 3.0 et versions ultérieures prennent en charge le cornerRadius bien sur la CALayer classe. Chaque point de vue a un CALayer exemple que vous pouvez manipuler. Cela signifie que vous pouvez obtenir des coins arrondis en une seule ligne:

view.layer.cornerRadius = 8;

Vous aurez besoin de #import <QuartzCore/QuartzCore.h> et un lien vers le QuartzCore cadre pour obtenir l'accès à CALayer les en-têtes et les propriétés.

Avant iOS 3.0

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

1. Créer un UIView sous-classe et le nom de quelque chose comme RoundRectView.
2. Dans RoundRectView's drawRect: méthode, dessiner un chemin à travers les limites de l'affichage à l'aide de Graphiques de Base des appels comme CGContextAddLineToPoint() pour les bords et et CGContextAddArcToPoint() pour les coins arrondis.
3. Créer un UILabel instance et d'en faire une sous-vue de la RoundRectView.
4. Définir le cadre de l'étiquette à quelques pixels de l'encart de la RoundRectView de limites. (Par exemple, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Vous pouvez placer le RoundRectView sur une vue à l'aide de l'Interface Builder si vous créez un générique UIView et puis le changement de sa classe à l'aide de l'inspecteur. Vous ne verrez pas le rectangle jusqu'à ce que vous compilez et exécutez votre application, mais au moins vous serez en mesure de placer la sous-vue et de se connecter aux points de vente ou des actions si nécessaire.

Pour Swift IOS8 partir basée sur OScarsWyck réponse:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0

Vous pouvez faire des bords arrondis avec la largeur de la frontière 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]];

Il suffit de remplacer lblName avec votre UILabel.

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

J'ai fait une swift UILabel sous-classe pour obtenir cet effet. En outre, j'ai automatiquement la couleur du texte pour qu'il soit noir ou blanc pour un maximum de contraste.

Résultat

Utilisé ce Messages:

• Comment tracer la frontière autour d'un UILabel?
• Ajouter une bordure à l'extérieur d'une UIView
• Vérifier si UIColor est sombre ou lumineux?

Aire de jeux

Il suffit de coller ce dans une aire de Jeux 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())

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];

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;

Avez-vous essayez d'utiliser la UIButton à partir de l'Interface builder (qui a arrondi les angles) et d'expérimenter avec les paramètres pour la faire ressembler à une étiquette. si vous désirez vous afficher texte statique à l'intérieur.

Fonctionne très bien dans Xcode 8.1.2 avec Swift 3, Testé durant le mois d'AOÛT 2017

"cornerRadius" est la propriété de clé pour définir les bords arrondis, où si vous utilisez le même style pour toutes les étiquettes dans votre application, je 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
}
}

De sortie:

Pourquoi la méthode d'Extension?

Créer rapidement un fichier et ajoutez le code suivant, qui a l'Extension de la méthode de la "UILabel" de la classe, où cette méthode est définie par l'utilisateur, mais fonctionne pour tous les étiquette dans votre demande et vous aider à maintenir la cohérence et la propreté du code, si vous modifiez un style à l'avenir exiger que dans la méthode d'extension.