ios - Use o Storyboard para mascarar o UIView e fornecer cantos arredondados?




xcode swift (3)

Mesmo depois de fazer todas as alterações no storyboard, a resposta de Woraphot não funciona para mim.

Isso funcionou para mim:

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

Resposta longa :

Cantos arredondados de UIView / UIButton etc

customUIView.layer.cornerRadius = 10

Espessura da borda

pcustomUIView.layer.borderWidth = 1

Cor da borda

customUIView.layer.borderColor = UIColor.blue.cgColor

Muitas perguntas como esta explicam como criar programaticamente uma máscara e fornecer cantos arredondados para um UIView.

Existe uma maneira de fazer tudo isso no Storyboard? Apenas perguntar, porque parece que criar cantos arredondados no Storyboard mantém uma demarcação mais clara entre apresentação e lógica.


Selecionar visualização

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
        }
    }
}

Você pode fazer isso em um storyboard usando propriedades definidas pelo usuário. Selecione a vista que você deseja arredondar e abra seu Identity Inspector. Na seção Atributos de Tempo de Execução Definidos pelo Usuário , adicione as duas entradas a seguir:

  • Caminho da chave: layer.cornerRadius , Tipo: Número, Valor: (qualquer raio que você quiser)
  • Caminho da chave: layer.masksToBounds , Tipo: Boolean, Valor: marcado

Talvez você precise importar o QuartzKit no arquivo de classe correspondente da sua exibição (se houver), mas eu juro que o fiz funcionar sem isso. Seus resultados podem variar.

EDIT: Exemplo de um raio dinâmico

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
        }
    }

}

Eu verifiquei que isso funciona em um playground.





autolayout