Как создать круглый угол UILabel на iPhone?

голоса
139

Есть ли встроенный способ создания круглой треугольной UILabels? Если ответ нет, как бы один идти о создании такого объекта?

Задан 04/02/2009 в 08:19
источник пользователем
На других языках...                            


16 ответов

голоса
223

прошивка 3.0, а затем

iPhone OS 3.0 и выше поддерживает cornerRadiusсвойство на CALayerклассе. Каждый вид имеет CALayerэкземпляр , который вы можете манипулировать. Это означает , что вы можете получить закругленные углы в одной строке:

view.layer.cornerRadius = 8;

Вам нужно #import <QuartzCore/QuartzCore.h>и ссылка рамок QuartzCore , чтобы получить доступ к заголовкам и свойствам CALayer в.

Перед прошивкой 3.0

Один из способов сделать это, который я использовал в последнее время, является создание UIView подкласс, который просто рисует прямоугольник с закругленными углами, а затем сделать UILabel или, в моем случае, UITextView, подвид внутри него. В частности:

  1. Создайте UIViewподкласс и назовите его что - то подобное RoundRectView.
  2. В RoundRectView«ы drawRect:методы, нарисовать путь вокруг границы элемента зрения с использованием Core Graphics , как называет CGContextAddLineToPoint () для краев и CGContextAddArcToPoint и () для закругленных углов.
  3. Создать UILabelэкземпляр и сделать его подвид из RoundRectView.
  4. Установите рамку этикетки , чтобы быть несколько пикселей врезки границ в RoundRectView в. (Например, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Вы можете разместить RoundRectView на представлении с помощью Interface Builder, если вы создаете общий UIView, а затем изменить его класс с помощью инспектора. Вы не увидите прямоугольник, пока не скомпилировать и запустить приложение, но, по крайней мере, вы будете иметь возможность поместить подвид и подключить его к розеткам или действий, если это необходимо.

Ответил 04/02/2009 в 10:22
источник пользователем

голоса
130

Для устройств с прошивкой 7.1 или более поздней версией, необходимо добавить:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Ответил 04/04/2014 в 08:54
источник пользователем

голоса
17

Для Swift IOS8 года на основе OScarsWyck ответа:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Ответил 17/08/2015 в 16:08
источник пользователем

голоса
11

Вы можете сделать округлую границу с шириной границы какого-либо контроля таким образом: -

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>

Ответил 13/02/2014 в 09:09
источник пользователем

голоса
11
  1. у вас есть UILabelпод названием: myLabel.
  2. в вашем «м» или «ч» импорта файла: #import <QuartzCore/QuartzCore.h>
  3. в вашей viewDidLoadзаписи этой строки:self.myLabel.layer.cornerRadius = 8;

    • зависит от того, как вы хотите, вы можете изменить значение cornerRadius с 8 по другому номеру :)

Удачи

Ответил 04/12/2012 в 11:08
источник пользователем

голоса
6

Xcode 7.3.1 IOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
Ответил 21/07/2016 в 11:22
источник пользователем

голоса
6

Другой метод заключается в размещении PNG позади UILabel. У меня есть представления с несколькими лейблами, которые перекрывают одну фоновую PNG, который имеет все художественные работы для отдельных этикеток.

Ответил 04/02/2009 в 18:24
источник пользователем

голоса
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
Ответил 21/05/2014 в 07:44
источник пользователем

голоса
3

Если вы хотите , закругленный угол пользовательского интерфейса объекты , такие как ( UILabel, UIView, UIButton, UIImageView) с помощью раскадровки затем установить clip to boundsистинный и набор User Defined Runtime Attributesключей путь как layer.cornerRadius, тип = Число и значение = 9 (как ваше требование)

Установить клип рамки как Set User Defined выполнения атрибутов, как

Ответил 28/06/2017 в 10:49
источник пользователем

голоса
3

Я сделал быстрые UILabelподклассы для достижения этого эффекта. Кроме того , я автоматически установить цвет текста в черный или белый для максимального контраста.

результат

цветы-округло-граница

Используются SO-сообщения:

Детская площадка

Просто вставьте в ИОС Playground:

//: 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())
Ответил 30/03/2016 в 14:16
источник пользователем

голоса
2

Прекрасно работает в 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», где этот метод определяется пользователь, но будет работать на все этикетку в приложении, и поможет поддерживать согласованность и чистый код, если вы изменить любой стиль в будущем требуется только в методе расширения.

Ответил 15/08/2017 в 13:25
источник пользователем

голоса
2

В 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;
Ответил 14/01/2016 в 14:23
источник пользователем

голоса
2

Пробовали ли вы с помощью UIButtonот застройщика интерфейса (который имеет закругленные углы) и экспериментировать с настройками , чтобы сделать его похожим на этикетке. если все , что вы хотите, чтобы отобразить статический текст внутри.

Ответил 09/03/2009 в 21:45
источник пользователем

голоса
1

Swift 3

Если вы хотите округлую этикетку с цветом фона, в дополнение к большинству других ответов, вы должны установить layer«s цвет фона , а также. Она не работает при настройке 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, в противном случае текст будет выравнивание по левому краю.

Ответил 29/05/2017 в 21:52
источник пользователем

голоса
1

Работает совершенен в 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

    }
Ответил 16/04/2016 в 22:02
источник пользователем

голоса
0

В зависимости от того, что именно вы делаете, вы могли бы сделать изображение и установить его в качестве фона программно.

Ответил 05/11/2011 в 01:55
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more