es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

haz que el UIButton sea redondeado, tenga sombra y gradiente

¿Alguien puede decirme por favor cómo hacer que el botón sea redondeado, tenga sombra y gradiente?

Aquí establezco el gradiente y la sombra para el botón, pero sin redondear:

@IBOutlet weak var info: UIButton! 

info.setTitle("INFO", for: .normal)
info.setTwoGradients(colorOne: Colors.OrangeGrad, colorTwo: Colors.OrangeGradSec)
info.setTitleColor(UIColor.black, for: .normal)
info.layer.shadowColor = UIColor.darkGray.cgColor
info.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
info.layer.shadowOpacity = 0.8
info.layer.shadowRadius = 2
view.addSubview(info)

Sé que la sombra desaparece debido al redondeo y encontré una forma de solucionarlo, por ejemplo:

final class CustomButton: UIButton {

    private var shadowLayer: CAShapeLayer!

    override func layoutSubviews() {
        super.layoutSubviews()

        if shadowLayer == nil {
            shadowLayer = CAShapeLayer()
            shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 10).cgPath

            shadowLayer.fillColor = UIColor.white.cgColor
            shadowLayer.shadowColor = UIColor.darkGray.cgColor
            shadowLayer.shadowPath = shadowLayer.path
            shadowLayer.shadowOffset = CGSize(width: 5.0, height: 2.0)
            shadowLayer.shadowOpacity = 0.7
            shadowLayer.shadowRadius = 2

            layer.insertSublayer(shadowLayer, at: 0)

        }
    }
}

Pero hay una línea:

shadowLayer.fillColor = UIColor.white.cgColor

Debido a la cual no puedo establecer el gradiente.

Por lo tanto, no puedo encontrar una forma en la que se cumplan las tres condiciones.

Tags:  ,

Answer

  1. Avatar for davy.ai

    Para hacer el botón redondeado, con sombra y con un degradado, puedes probar el siguiente código:


    @IBOutlet weak var info: UIButton! info.layer.cornerRadius = 10 info.layer.masksToBounds = false info.setTwoGradients(colorOne: Colors.OrangeGrad, colorTwo: Colors.OrangeGradSec) info.setTitleColor(UIColor.black, for: .normal) info.layer.shadowColor = UIColor.darkGray.cgColor info.layer.shadowOffset = CGSize(width: 2.0, height: 2.0) info.layer.shadowOpacity = 0.8 info.layer.shadowRadius = 2 view.addSubview(info)

    La propiedad cornerRadius establece el redondeo del botón, mientras que masksToBounds establecida en false garantiza que la sombra no se corte por los bordes redondeados. setTwoGradients establece el fondo del botón con un degradado, mientras que las propiedades restantes establecen la sombra para el botón. Con este código, deberías poder lograr un botón redondeado con un fondo degradado y una sombra.

Comments are closed.