Как мне создать UILabel с круглым углом на iPhone?
-
21-08-2019 - |
Вопрос
Существует ли встроенный способ создания UILabels с круглыми углами?Если ответ отрицательный, то как можно было бы создать такой объект?
Решение
iOS 3.0 и более поздние версии
iPhone OS 3.0 и более поздних версий поддерживает cornerRadius
собственность на CALayer
класс.Каждый вид имеет CALayer
экземпляр, которым вы можете манипулировать.Это означает, что вы можете получить закругленные углы в одной линии:
view.layer.cornerRadius = 8;
Вам нужно будет #import <QuartzCore/QuartzCore.h>
и ссылка на фреймворк QuartzCore, чтобы получить доступ к заголовкам и свойствам CALayer.
До iOS 3.0
Один из способов сделать это, который я использовал недавно, - создать подкласс UIView, который просто рисует закругленный прямоугольник, а затем создает UILabel или, в моем случае, UITextView , вложенный вид внутри него.В частности:
- Создать
UIView
создайте подкласс и назовите его как-то такRoundRectView
. - В
RoundRectView
'sdrawRect:
метод, нарисуйте контур вокруг границ представления, используя основные графические вызовы, такие как CGContextAddLineToPoint() для краев и CGContextAddArcToPoint() для закругленных углов. - Создать
UILabel
экземпляр и сделайте его подвидом RoundRectView. - Установите рамку метки так, чтобы она находилась на расстоянии нескольких пикселей от границ RoundRectView.(Например,
label.frame = CGRectInset(roundRectView.bounds, 8, 8);
)
Вы можете поместить RoundRectView в представление с помощью Interface Builder, если создадите универсальный UIView, а затем измените его класс с помощью инспектора.Вы не увидите прямоугольник, пока не скомпилируете и не запустите свое приложение, но, по крайней мере, вы сможете разместить вложенное представление и при необходимости подключить его к выходам или действиям.
Другие советы
Для устройств с iOS 7.1 или более поздней версией вам необходимо добавить:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Для Swift IOS8 и последующих версий на основе ответа ОСкарсВика:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
- у вас есть
UILabel
вызванный:myLabel
. - в вашем импорте файлов "m" или "h":
#import <QuartzCore/QuartzCore.h>
в вашем
viewDidLoad
напишите эту строчку:self.myLabel.layer.cornerRadius = 8;
- в зависимости от того, как вы хотите, вы можете изменить значение cornerRadius с 8 на другое число :)
Удачи вам
Таким образом, вы можете создать закругленную границу шириной с границей любого элемента управления:-
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]];
Просто замените lblName
с вашим UILabel
.
Примечание:- Не забудьте импортировать <QuartzCore/QuartzCore.h>
Другой метод заключается в размещении png за UILabel.У меня есть представления с несколькими метками, которые накладываются на один фоновый файл png, содержащий все иллюстрации для отдельных меток.
xCode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
Я сделал стремительный UILabel
подкласс для достижения этого эффекта.Кроме того, я автоматически устанавливаю цвет текста на черный или белый для максимального контраста.
Результат
Используемые SO-Посты:
- Как нарисовать границу вокруг UILabel?
- Добавьте границу за пределами пользовательского интерфейса
- Проверьте, какой UIColor - темный или яркий?
Игровая площадка
Просто вставьте это в игровую площадку 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];
Если вы хотите, чтобы объекты пользовательского интерфейса были закруглены, например (UILabel
, UIView
, UIButton
, UIImageView
) с помощью раскадровки, затем установите clip to bounds
истина и множество User Defined Runtime Attributes
Ключевой путь как
layer.cornerRadius
, тип = номер и значение = 9 (по вашему требованию)
В Monotouch / Xamarin.iOS я решил ту же проблему следующим образом:
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;
Идеально работает в 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
}
Вы пробовали использовать UIButton
из конструктора интерфейса (с закругленными углами) и экспериментирую с настройками, чтобы сделать его похожим на ярлык.если все, что вы хотите, это отобразить статический текст внутри.
Быстрый 3
Если вам нужна закругленная надпись с цветом фона, в дополнение к большинству других ответов вам необходимо установить layer
это также цвет фона.Это не работает при настройке view
цвет фона.
label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor
Если вы используете автоматическую разметку, хотите немного отступов вокруг метки и не хотите устанавливать размер метки вручную, вы можете создать подкласс UILabel и переопределить intrinsincContentSize
собственность:
class LabelWithPadding: UILabel {
override var intrinsicContentSize: CGSize {
let defaultSize = super.intrinsicContentSize
return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
}
}
Чтобы объединить эти два параметра, вам также нужно будет установить label.textAlignment = center
, в противном случае текст был бы выровнен по левому краю.
Отлично работает в Xcode 8.1.2 с Swift 3, протестирован в августе 2017 года
"cornerRadius" является ключевым свойством для установки закругленных краев, где, если вы используете один и тот же стиль для всех меток в вашем приложении, я бы рекомендовал использовать метод расширения.
Код:
// 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
}
}
Выходной сигнал:
Почему именно метод расширения?
Создайте файл Swift и добавьте следующий код, который имеет метод расширения к классу "UILabel", где этот метод определяется пользователем, но будет работать для всех меток в вашем приложении и поможет поддерживать согласованность и чистоту кода, если вы в будущем измените какой-либо стиль, который потребуется только в методе расширения.
В зависимости от того, что именно вы делаете, вы можете создать изображение и установить его в качестве фона программно.