Botón redondo enmarcado iOS 7

iOS App Store tiene un botón con marco azul redondo para comprar / descargar aplicaciones.

En mi aplicación, puede descargar contenido adicional y quiero tener un botón similar, simplemente porque le resulta familiar al usuario.

Si no sabes, lo que quiero decir es: estos botones, como “$ 3.99”

enter image description here

¿Cómo es esto posible?

Puede manipular el CALayer de su botón para hacerlo con bastante facilidad.

 // assuming you have a UIButton or more generally a UIView called buyButton buyButton.layer.cornerRadius = 2; buyButton.layer.borderWidth = 1; buyButton.layer.borderColor = [UIColor blueColor].CGColor; // (note - may prefer to use the tintColor of the control) 

puede ajustar cada uno de ellos para obtener el efecto de color y borde que desee.

También deberá agregar una importación en cualquier archivo que desee usar CALayers

 #import  

Si eres un gran fan de usar storyboards para tu diseño de interfaz de usuario con iOS … puedes establecer el radio de la esquina (y cualquier otro parámetro como se menciona en la respuesta de Dima, aunque desafortunadamente no es el color, ya que es CGColor y Apple actualmente no tener esa opción en la ventana emergente) en el identity inspector -> user defined runtime attributes en el guión gráfico, como se muestra aquí:

enter image description here

bonificación: utiliza atributos de tiempo de ejecución para el color de texto de marcador de posición UIButton (consulte aquí ) y para cambiar las fonts de UILabel , UITextField y UIButton también (consulte aquí )

Para elementos de control iOS estándar como UIButton , UILabel , debe usar la propiedad UIView tintColor :

 buyButton.layer.borderColor = buyButton.tintColor.CGColor; 

Para un borde simple como el que describió, use la respuesta de Dima usando CALAyer.

Si quieres más, por ejemplo, un rectángulo redondeado con degradado, utiliza este enfoque como base:

Cree una vista personalizada que dibuje un rectángulo redondeado y colóquelo sobre el botón. Utiliza la función de búsqueda aquí para buscar el rectángulo redondeado. El dibujo funciona dibujando 4 arcos con radio definido (esquinas) y 4 líneas rectas.


FTR, así es como se hace una UIView con las esquinas redondeadas iOS7 correctas, según Alex y Brian.

Estoy bastante seguro de que CGPathCreateWithRoundedRect no te da las “nuevas” esquinas redondeadas. Debe usar bezierPathWithRoundedRect para las “nuevas” esquinas.

 #import "UIViewWithIOS7RoundedCorners.h" @implementation UIViewWithIOS7RoundedCorners -(void)drawRect:(CGRect)rect { // for a filled shape... UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:4]; [[UIColor blueColor] setFill]; [path fill]; // for just a border... int thickness=2; UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect: CGRectInset(self.bounds, thickness/2, thickness/2) cornerRadius: 4]; path.lineWidth = thickness; [[UIColor blueColor] setStroke]; [path stroke]; } @end // ps don't forget to set .backgroundColor=[UIColor clearColor] // perhaps in initWithCoder/initWithFrame 

enter image description here

enter image description here

Espero que ayude a alguien

He implementado el botón de estilo AppStore aquí para su referencia: ASButton.m

y el proyecto está aquí

Espero ayudar:]

Para extender la excelente respuesta de @abbood, en realidad es posible establecer el color del borde y el color de fondo de la capa de una vista desde IB, pero requiere un poco de preparación para hacerlo.

Creé una categoría personalizada en NSView, CALayer + setUIColor.h.

El que establece los colores del borde solo tiene un método, setBorderUIColor. Toma un UIColor como entrada, recupera el NSColor subyacente de UIColor y aplica ese color a la capa de la vista.

Luego, en IB, solo agrega un atributo de tiempo de ejecución definido por el usuario como este:

KeyPath layer.borderUIColor Tipo color Valor El color deseado.

En tiempo de ejecución, el sistema invoca su método, transfiriendo el UIColor definido en IB. La categoría obtiene el CGColor del UIColor y lo aplica a la capa.

Puedes ver esto en un proyecto de trabajo en un proyecto github mío llamado

RandomBlobs

También hice lo mismo para establecer la propiedad de color de fondo de una capa, pero no en el proyecto anterior.

Y para la versión rápida de la extensión de Duncan C de la respuesta de abbood:

 extension CALayer { var borderUIColor: UIColor? { get { if let borderColor = borderColor { return UIColor(CGColor: borderColor) } return nil } set { borderColor = newValue?.CGColor ?? nil } } } 

Con Swift 3 / iOS 10, puede crear una subclase de UIButton para tener un botón personalizado que se verá como el botón azul de borde redondeado en la aplicación iOS AppStore.

El siguiente código muestra cómo administrar correctamente el color del tinte (cuando el botón aparece detrás de la vista atenuada de un UIAlertController ), el color del título, el color de fondo resaltado, el estilo del borde, el color del borde y las inserciones de contenido.


CustomButton.swift:

 import UIKit class CustomButton: UIButton { override init(frame: CGRect) { super.init(frame: frame) setProperties() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) // Make sure to set CustomButton as the class of the UIButton in Identity inspector of storyboard // Make sure to set Custom as the type of the UIButton in Attributes inspector of storyboard setProperties() } func setProperties() { // Set tintColor (only if you want to replace the system default tintColor) // tintColor = .red // Set the border's color layer.borderColor = tintColor?.cgColor // Set colors for title's states setTitleColor(tintColor, for: .normal) setTitleColor(.white, for: .highlighted) // Add some margins between the title (content) and the border contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10) } override var isHighlighted: Bool { didSet { // Toggle the background color according to button's highlighted state backgroundColor = super.isHighlighted ? tintColor : nil } } override func tintColorDidChange() { super.tintColorDidChange() // When the tint color is changed by the system (eg when the button appears below the dimmed view of a UIAlertController), we have to manually update border color and title's text color layer.borderColor = tintColor?.cgColor titleLabel?.textColor = tintColor } override func draw(_ rect: CGRect) { // Draw the border layer.borderWidth = 1 layer.cornerRadius = 4 layer.masksToBounds = true } } 

ViewController.swift (creando un botón personalizado mediante progtwigción):

 import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let button = CustomButton() button.setTitle("Normal", for: .normal) button.setTitle("Highlighted", for: .highlighted) button.addTarget(self, action: #selector(presentAlert(_:)), for: .touchUpInside) view.addSubview(button) // auto layout button.translatesAutoresizingMaskIntoConstraints = false button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true button.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true } /// Present alert when button is tapped func presentAlert(_ sender: UIButton) { let alertController = UIAlertController(title: "Title", message: "Message", preferredStyle: .alert) let alertAction = UIAlertAction(title: "OK", style: .default) alertController.addAction(alertAction) present(alertController, animated: true, completion: nil) } } 

ViewController.swift (alternativa para crear un botón personalizado en el guión gráfico):

 import UIKit class ViewController: UIViewController { @IBOutlet weak var button: CustomButton! override func viewDidLoad() { super.viewDidLoad() button.setTitle("Normal", for: .normal) button.setTitle("Highlighted", for: .highlighted) } /// Present alert when button is tapped @IBAction func presentAlert(_ sender: UIButton) { let alertController = UIAlertController(title: "Title", message: "Message", preferredStyle: .alert) let alertAction = UIAlertAction(title: "OK", style: .default) alertController.addAction(alertAction) present(alertController, animated: true, completion: nil) } } 

La imagen a continuación muestra cómo aparecerá el botón personalizado en estado normal, cuando el sistema tinColor se tinColor (detrás de la vista atenuada de un UIAlertController ) y en estado highlighted .

enter image description here