Используйте Storyboard, чтобы замаскировать UIView и придать закругленные углы?


100

Многие вопросы, подобные этому, объясняют, как программно создать маску и предоставить скругленные углы для UIView.

Есть ли способ сделать все это в Storyboard? Просто спрашиваю, потому что кажется, что создание закругленных углов в Storyboard позволяет более четко разграничить представление и логику.


Ответы:


266

Да, я часто этим пользуюсь, но на такой вопрос уже много раз ответили.

Но все равно в Интерфейсном Разработчике. Вам необходимо добавить определяемые пользователем атрибуты времени выполнения следующим образом:

layer.masksToBounds Boolean YES
layer.cornerRadius Number {View's Width/2}

введите описание изображения здесь

и включить

Clips subviews

введите описание изображения здесь

Полученные результаты:

введите описание изображения здесь


где я могу добавить определяемые пользователем атрибуты времени выполнения?
Henson Fang

Как я показываю на первом изображении, выберите вид, затем на правой панели выберите третий значок. Пользовательские атрибуты времени выполнения. Щелкните элемент ниже, чтобы добавить ключевой путь, тип, значение
Woraphot Chokratanasombat

1
Можно ли сделать радиус границы динамическим, чтобы он всегда составлял 50% ширины, или он должен быть статическим целым числом?
Crashalot

1
Насколько мне известно, только фиксированное значение.
Woraphot Chokratanasombat

1
К вашему сведению, если, как и я, вы пришли сюда, думая, что это сработает на LaunchScreen.storyboard, это не так. Вы получите: Error: Launch screens may not use user defined runtime attributes. Похоже, если вам нужно круглое изображение на LaunchScreen, у вас нет вариантов.
Code Knox

22

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

  • Путь к ключу:, layer.cornerRadiusТип: Число, Значение: (любой радиус, который вы хотите)
  • Путь к ключу:, layer.masksToBoundsТип: Boolean, Значение: проверено

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

РЕДАКТИРОВАТЬ: Пример динамического радиуса

extension UIView {

    /// The ratio (from 0.0 to 1.0, inclusive) of the view's corner radius
    /// to its width. For example, a 50% radius would be specified with
    /// `cornerRadiusRatio = 0.5`.
    @IBDesignable public var cornerRadiusRatio: CGFloat {
        get {
            return layer.cornerRadius / frame.width
        }

        set {
            // Make sure that it's between 0.0 and 1.0. If not, restrict it
            // to that range.
            let normalizedRatio = max(0.0, min(1.0, newValue))
            layer.cornerRadius = frame.width * normalizedRatio
        }
    }

}

Я убедился, что это работает на детской площадке.


1
Можно ли сделать радиус границы динамическим, чтобы он всегда составлял 50% ширины, или он должен быть статическим целым числом?
Crashalot

5
Можно, но только в коде. Однако интересным обходным путем является добавление свойства IBInspectable к классу вашего представления, которое имеет числовое значение от 0 до 100 и указывает процент ширины, которой должен быть радиус. Например, значение 50 означает, что радиус должен составлять 50% ширины. Поскольку это вычисляемое (не сохраненное) свойство, вы даже можете добавить его в расширение UIView, чтобы все представления могли иметь свойство.
NRitH

@NRitH, мне было бы интересно увидеть что-нибудь подобное. Как вы думаете, можно разместить здесь код?
Коби Фишер

17

Выбрать вид вы также изменили Rediuse углов, Border Widthe и Border Color с помощью StoryBord

extension UIView {

    @IBInspectable var cornerRadiusV: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidthV: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColorV: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

3
зачем использовать cornerRadiusV вместо cornerRadius?
luhuiya 07

1
он установлен cornerRadius с использованием раскадровки, сохраните кодировку письма в Project
Ананда Айвале

Сработал отлично
Хасан Тарек

0

Даже после внесения всех изменений в раскадровку ответ Ворафота не работает для меня.

Это сработало для меня:

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

Длинный ответ:

Закругленные углы UIView / UIButton и т. Д.

customUIView.layer.cornerRadius = 10

Толщина границы

pcustomUIView.layer.borderWidth = 1

Цвет границы

customUIView.layer.borderColor = UIColor.blue.cgColor

Это не попытка ответить на вопрос, а просто дубликат вашего другого ответа здесь .
прокладка
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.