Existe-t-il un moyen intégré de créer des étiquettes UIL à coins arrondis? Si la réponse est non, comment procéderait-on pour créer un tel objet?
Existe-t-il un moyen intégré de créer des étiquettes UIL à coins arrondis? Si la réponse est non, comment procéderait-on pour créer un tel objet?
Réponses:
iPhone OS 3.0 et versions ultérieures prend en charge la cornerRadius
propriété sur la CALayer
classe. Chaque vue a une CALayer
instance que vous pouvez manipuler. Cela signifie que vous pouvez obtenir des coins arrondis en une seule ligne:
view.layer.cornerRadius = 8;
Tu devras #import <QuartzCore/QuartzCore.h>
connecter au framework QuartzCore pour accéder aux en-têtes et propriétés de CALayer.
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 créer l'UILabel ou, dans mon cas, UITextView, une sous-vue à l'intérieur. Plus précisément:
UIView
sous-classe et nommez-la quelque chose comme RoundRectView
.RoundRectView
la drawRect:
méthode de, tracez un chemin autour des limites de la vue en utilisant des appels Core Graphics comme CGContextAddLineToPoint () pour les arêtes et CGContextAddArcToPoint () pour les coins arrondis.UILabel
instance et faites-en une sous-vue de RoundRectView.label.frame = CGRectInset(roundRectView.bounds, 8, 8);
)Vous pouvez placer le 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 pas le rectangle tant que vous n'aurez pas compilé et exécuté votre application, mais au moins vous pourrez placer la sous-vue et la connecter à des prises ou à des actions si nécessaire.
Pour les appareils équipés d'iOS 7.1 ou version ultérieure, vous devez ajouter:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Pour Swift IOS8 à partir de la réponse OScarsWyck:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
YES
pour true
.
UILabel
appelé: myLabel
.#import <QuartzCore/QuartzCore.h>
dans votre viewDidLoad
écrivez cette ligne:self.myLabel.layer.cornerRadius = 8;
Bonne chance
Vous pouvez créer une bordure arrondie avec la largeur de la bordure de n'importe quel 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
.
Remarque: - N'oubliez pas d'importer<QuartzCore/QuartzCore.h>
J'ai créé une UILabel
sous-classe rapide pour obtenir cet effet. De plus, je règle automatiquement la couleur du texte sur noir ou blanc pour un contraste maximal.
Postes SO utilisés:
Collez simplement ceci dans un Playground 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())
xCode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
Si vous voulez coin arrondi d'objets comme interface utilisateur ( UILabel
, UIView
, UIButton
, UIImageView
) par storyboard puis définissez clip to bounds
true et définissez User Defined Runtime Attributes
chemin clé comme
layer.cornerRadius
, type = Nombre et valeur = 9 (comme votre exigence)
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];
Si vous voulez une étiquette arrondie avec une couleur d'arrière-plan, en plus de la plupart des autres réponses, vous devez également définir layer
la couleur d'arrière-plan de. Cela ne fonctionne pas lors de la définition de la 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 peu de 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 intrinsincContentSize
propriété:
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.
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;
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
}
Fonctionne très bien dans Xcode 8.1.2 avec Swift 3, testé en août 2017
"cornerRadius" est la propriété clé pour définir les bords arrondis, où si vous utilisez le même style pour toutes les étiquettes de votre application, je recommanderais 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
}
}
Production:
Pourquoi la méthode d'extension?
Créez un fichier Swift et ajoutez le code suivant, qui a la méthode Extention à la classe "UILabel", où cette méthode est définie par l'utilisateur mais fonctionnera pour toutes les étiquettes de votre application et aidera à maintenir la cohérence et le code propre, si vous changer n'importe quel style à l'avenir ne nécessite que dans la méthode d'extension.
En fonction de ce que vous faites exactement, vous pouvez créer une image et la définir comme arrière-plan par programme.