Acabo de comenzar a aprender el desarrollo de iOS, no puedo encontrar cómo hacer un botón redondeado simple. Encuentro recursos para versiones antiguas. ¿Necesito establecer un fondo personalizado para un botón? En Android, solo usaría un parche 9, pero sé que iOS no tiene esta capacidad.
Respuestas:
Para hacerlo en el guión gráfico, debe usar una imagen para el botón.
Alternativamente, puede hacerlo en código:
btn.layer.cornerRadius = 10
btn.clipsToBounds = trueRespuesta corta: SI
Absolutamente puede hacer un botón redondeado simple sin la necesidad de una imagen de fondo adicional o escribir ningún código para el mismo. Simplemente siga la captura de pantalla que se muestra a continuación para establecer los atributos de tiempo de ejecución del botón y obtener el resultado deseado.
No se mostrará en el, Storyboardpero funcionará bien cuando ejecute el proyecto.
Nota:
La 'Ruta de la clave' layer.cornerRadius y el valor es 5. El valor debe cambiarse de acuerdo con la altura y el ancho del botón. La fórmula es la altura del botón * 0.50. Así que juegue con el valor para ver el botón redondeado esperado en el simulador o en el dispositivo físico. Este procedimiento se verá tedioso cuando tenga más de un botón para redondear en el guión gráfico.
clipsToBoundspara que esto funcione.
Puedes hacer algo como esto:
@IBDesignable class MyButton: UIButton
{
override func layoutSubviews() {
super.layoutSubviews()
updateCornerRadius()
}
@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}
func updateCornerRadius() {
layer.cornerRadius = rounded ? frame.size.height / 2 : 0
}
}Establezca la clase MyButtonen Identity Inspectory en IB tendrá la roundedpropiedad:
layer.masksToBounds = truetambién
Inserte el código en la clase RoundButton.
import UIKit
@IBDesignable
class RoundButton: UIButton {
@IBInspectable var cornerRadius: CGFloat = 0{
didSet{
self.layer.cornerRadius = cornerRadius
}
}
@IBInspectable var borderWidth: CGFloat = 0{
didSet{
self.layer.borderWidth = borderWidth
}
}
@IBInspectable var borderColor: UIColor = UIColor.clear{
didSet{
self.layer.borderColor = borderColor.cgColor
}
}
}Consulte la imagen.
Encontré que la forma más fácil de hacer esto es configurando cornerRadius a la mitad de la altura de la vista.
button.layer.cornerRadius = button.bounds.size.height/2Puede conectar su IBOutletbotón desde el guión gráfico.
Entonces puedes configurar corner radius su botón para hacer su esquina.
por ejemplo, tu outletes myButtonentonces,
Obj - C
self.myButton.layer.cornerRadius = 5.0 ;Rápido
myButton.layer.cornerRadius = 5.0Si quieres botón exacta redonda a continuación, el botón es widthy heightdebe ser equaly cornerRadiusdebe ser igual a la altura o anchura / 2 (la mitad de la anchura o altura).
Como otra respuesta ha sugerido para realizar la mayor parte de este trabajo en código, solo una respuesta proporcionó una forma de ver sus cambios en la interfaz IB del guión gráfico. Mi respuesta va más allá de esa respuesta al permitirle cambiar el radio de esquina de la vista, botón, imagen, etc.
Por favor, eche un vistazo al siguiente código. Para usar este código, cree un nuevo archivo rápido llamado RoundedView o como quiera llamarlo, luego vaya a su guión gráfico y cambie la clase a "RoundedView", "RoundedImageView" o "RoundedButton".
import UIKit
@IBDesignable class RoundedImage: UIImageView
{
override func layoutSubviews() {
super.layoutSubviews()
updateCornerRadius()
}
@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}
@IBInspectable var cornerRadius: CGFloat = 0.1 {
didSet {
updateCornerRadius()
}
}
func updateCornerRadius() {
layer.cornerRadius = rounded ? cornerRadius : 0
layer.masksToBounds = rounded ? true : false
}
}
@IBDesignable class RoundedView: UIView
{
override func layoutSubviews() {
super.layoutSubviews()
updateCornerRadius()
}
@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}
@IBInspectable var cornerRadius: CGFloat = 0.1 {
didSet {
updateCornerRadius()
}
}
func updateCornerRadius() {
layer.cornerRadius = rounded ? cornerRadius : 0
layer.masksToBounds = rounded ? true : false
}
}
@IBDesignable class RoundedButton: UIButton
{
override func layoutSubviews() {
super.layoutSubviews()
updateCornerRadius()
}
@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}
@IBInspectable var cornerRadius: CGFloat = 0.1 {
didSet {
updateCornerRadius()
}
}
func updateCornerRadius() {
layer.cornerRadius = rounded ? cornerRadius : 0
layer.masksToBounds = rounded ? true : false
}
}Al agregar layer.cornerRadiusel guión gráfico, asegúrese de no tener espacios iniciales o finales. Si copia y pega, es posible que se inserten espacios. Sería bueno si XCode dijera algún tipo de advertencia o error.
¡¡Prueba esto!!
override func viewDidLoad() {
super.viewDidLoad()
var button = UIButton.buttonWithType(.Custom) as UIButton
button.frame = CGRectMake(160, 100, 200,40)
button.layer.cornerRadius =5.0
button.layer.borderColor = UIColor.redColor().CGColor
button.layer.borderWidth = 2.0
button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
button.clipsToBounds = true
view.addSubview(button)
}
func OnClickroundButton() {
NSLog(@"roundButton Method Called");
}La extensión es la mejor opción para este problema. Crear una extensión de Vista o Botón
public extension UIView {
//Round the corners
func roundCorners(){
let radius = bounds.maxX / 16
layer.cornerRadius = radius
}
}Llámalo desde el código
button.roundCorners()
import UIKit
@IBDesignable class MyButton: UIButton
{
override func layoutSubviews() {
super.layoutSubviews()
}
func updateCornerRadius(radius:CGFloat) {
layer.cornerRadius = radius
}
@IBInspectable var cornerRadius:CGFloat = 0{
didSet{
updateCornerRadius(radius: cornerRadius)
}
}
}