Використовуйте аркуш розгортки, щоб замаскувати UIView та надати закруглені кути?


100

Багато питань, подібних до цього, пояснюють, як програмно створити маску та надати закруглені кути до UIView.

Чи є спосіб зробити це все в Storyboard? Запитання лише тому, що, здається, створення закруглених кутів у дошці розповідей забезпечує чіткіше розмежування між презентацією та логікою.


Відповіді:


264

Так, я дуже багато використовую, але на таке питання вже відповідали багато разів.

Але все одно в Interface Builder. Вам потрібно додати визначені користувачем атрибути на зразок цього:

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

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

і включити

Clips subviews

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

Результати:

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


де я можу додати визначені користувачем атрибути виконання?
Хенсон Фанг

Як я показую у перегляді вибору першого зображення, потім на правій панелі виберіть третю піктограму. Визначені користувачем атрибути. Клацніть пункт нижче, щоб додати ключовий шлях, тип, значення
Woraphot Chokratanasombat

1
Чи можете ви зробити радіус кордону динамічним, щоб він завжди був на 50% від ширини або це потрібно статичним цілим числом?
Crashalot

1
Наскільки мені відомо, фіксоване значення лише.
Woraphot Chokratanasombat

1
Просто FYI, якщо ви, як я, ви прийшли сюди, думаючи, що це буде працювати на LaunchScreen.storyboard, це не так. Ви отримаєте: Error: Launch screens may not use user defined runtime attributes. Схоже, якщо вам потрібне кругле зображення на LaunchScreen, у вас немає варіантів.
Кодекс Нокс

22

Ви можете це зробити на дошці розкадрування, використовуючи визначені користувачем властивості. Виберіть подання, яке ви хочете округлити, і відкрийте його інспектор ідентичності. У розділі Атрибути часу виконання, визначені користувачем , додайте наступні дві записи:

  • Основний шлях:, layer.cornerRadiusТип: Число, Значення: (незалежно від радіусу)
  • Ключовий шлях:, layer.masksToBoundsТип: логічне значення, значення: відмічено

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

EDIT: Приклад динамічного радіуса

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

Виберіть перегляд ви змінили Corner Rediuse, Border Widthe та Color Border також використовуючи 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

1
це встановлено cornerRadius за допомогою розкадровки, зберегти кодування написання в Project
Ananda Aiwale

Працював чудово
Хассан Тарек

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.