framework - learn ios
¿Cómo agregar solo un borde SUPERIOR en un UIButton? (10)
Aquí está la solución de Masgar implementada en Swift:
var lineView = UIView(frame: CGRectMake(0, 0, btn.frame.size.width, 1))
lineView.backgroundColor=UIColor.redColor()
btn.addSubview(lineView)
Sé cómo agregar borde a un botón en iOS 7, con el siguiente código:
[[myButton layer] setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[[myButton layer] setBorderWidth:1];
[[myButton layer] setCornerRadius:15];
¿Pero cómo puedo agregar solo un borde? Quiero agregar solo el borde superior .
De hecho, conozco estas preguntas como usted, pero creo que mi método es mejor que la respuesta que elija. Debería crear una clase que herede el UIControl como UIButton.
@interface customButton : UIButton
y reescribe el método drawrect así:
- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, 1.5); //线宽
CGContextSetAllowsAntialiasing(context, true);
CGContextSetRGBStrokeColor(context, 193/255.0, 205/255.0, 193/255.0, 1.0); //线的颜色
CGContextBeginPath(context);
CGContextMoveToPoint(context, 0, 0); //起点坐标
CGContextAddLineToPoint(context, self.frame.size.width, 0); //终点坐标
CGContextStrokePath(context);
}
Por cierto ~ su propósito UIControl debería usar su clase en la configuración de xib
Última ~ mostrarle mi UIButton personalizado. Creo que deberíamos elegir este método y combinar la API de UIBezierPath para finalizar nuestra demanda.
Gracias por ver ~ espero estudiar y discutir juntos ~ De un pescador de iOS - vvlong
Debe crear una nueva capa o ver 1 pt alto, establecer el color de fondo en el color que desea que tenga su borde y agregarlo como subvista / subcapa.
En Swift agrega una extensión para la clase UIView de esta manera:
Swift 2 *
import Foundation
import UIKit
extension UIView {
func addTopBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.CGColor
border.frame = CGRectMake(0, 0, self.frame.size.width, width)
self.layer.addSublayer(border)
}
func addRightBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.CGColor
border.frame = CGRectMake(self.frame.size.width - width, 0, width, self.frame.size.height)
self.layer.addSublayer(border)
}
func addBottomBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.CGColor
border.frame = CGRectMake(0, self.frame.size.height - width, self.frame.size.width, width)
self.layer.addSublayer(border)
}
func addLeftBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.CGColor
border.frame = CGRectMake(0, 0, width, self.frame.size.height)
self.layer.addSublayer(border)
}
}
Swift 3 *
extension UIView {
func addTopBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.cgColor
border.frame = CGRect(x:0,y: 0, width:self.frame.size.width, height:width)
self.layer.addSublayer(border)
}
func addRightBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.cgColor
border.frame = CGRect(x: self.frame.size.width - width,y: 0, width:width, height:self.frame.size.height)
self.layer.addSublayer(border)
}
func addBottomBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.cgColor
border.frame = CGRect(x:0, y:self.frame.size.height - width, width:self.frame.size.width, height:width)
self.layer.addSublayer(border)
}
func addLeftBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.cgColor
border.frame = CGRect(x:0, y:0, width:width, height:self.frame.size.height)
self.layer.addSublayer(border)
}
}
Obtuve esta extensión desde este enlace: UIView borde inferior?
Luego llama a la función de esta manera
var innerView : UIView?
let borderWidth: CGFloat = 1.0
let borderColor : UIColor = UIColor.redColor()
innerView!.addTopBorderWithColor(borderColor, width: borderWidth)
Para el diseño adaptativo use este Swift 2.
extension UIView {
func addTopBorder(color: UIColor, height: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Height,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.Height,
multiplier: 1, constant: height))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Top,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Top,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Leading,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Leading,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Trailing,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Trailing,
multiplier: 1, constant: 0))
}
func addBottomBorder(color: UIColor, height: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Height,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.Height,
multiplier: 1, constant: height))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Bottom,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Bottom,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Leading,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Leading,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Trailing,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Trailing,
multiplier: 1, constant: 0))
}
func addLeftBorder(color: UIColor, width: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Width,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.Width,
multiplier: 1, constant: width))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Leading,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Leading,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Bottom,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Bottom,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Top,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Top,
multiplier: 1, constant: 0))
}
func addRightBorder(color: UIColor, width: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Width,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.Width,
multiplier: 1, constant: width))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Trailing,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Trailing,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Bottom,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Bottom,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.Top,
relatedBy: NSLayoutRelation.Equal,
toItem: self,
attribute: NSLayoutAttribute.Top,
multiplier: 1, constant: 0))
}
}
button!.addTopBorder(UIColor(red: 247.0/255.0, green: 147.0/255.0, blue: 29.0/255.0, alpha: 0.5), height: borderWidth)
Swift 3
extension UIView {
func addTopBorder(_ color: UIColor, height: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.height,
relatedBy: NSLayoutRelation.equal,
toItem: nil,
attribute: NSLayoutAttribute.height,
multiplier: 1, constant: height))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.top,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.top,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.leading,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.leading,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.trailing,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.trailing,
multiplier: 1, constant: 0))
}
func addBottomBorder(_ color: UIColor, height: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.height,
relatedBy: NSLayoutRelation.equal,
toItem: nil,
attribute: NSLayoutAttribute.height,
multiplier: 1, constant: height))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.bottom,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.bottom,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.leading,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.leading,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.trailing,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.trailing,
multiplier: 1, constant: 0))
}
func addLeftBorder(_ color: UIColor, width: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.width,
relatedBy: NSLayoutRelation.equal,
toItem: nil,
attribute: NSLayoutAttribute.width,
multiplier: 1, constant: width))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.leading,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.leading,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.bottom,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.bottom,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.top,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.top,
multiplier: 1, constant: 0))
}
func addRightBorder(_ color: UIColor, width: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(border)
border.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.width,
relatedBy: NSLayoutRelation.equal,
toItem: nil,
attribute: NSLayoutAttribute.width,
multiplier: 1, constant: width))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.trailing,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.trailing,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.bottom,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.bottom,
multiplier: 1, constant: 0))
self.addConstraint(NSLayoutConstraint(item: border,
attribute: NSLayoutAttribute.top,
relatedBy: NSLayoutRelation.equal,
toItem: self,
attribute: NSLayoutAttribute.top,
multiplier: 1, constant: 0))
}
}
Uso:
button!.addTopBorder(UIColor(red: 247.0/255.0, green: 147.0/255.0, blue: 29.0/255.0, alpha: 0.5), height: borderWidth)
La mejor y más simple ...
btnTest.selectiveBorderFlag = AUISelectiveBordersFlagBottom | AUISelectiveBordersFlagTop;
btnTest.selectiveBordersColor = [UIColor redColor];
btnTest.selectiveBordersWidth = 3.0;
Lo he hecho usando: este código fuente abierto
No puedes usar los métodos de esta capa.
La mejor solución aquí es crear una imagen pequeña (por código o photoshop), usar el - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
para cambiar el tamaño de acuerdo con el aspecto que desea dar y agregarlo como una imagen de fondo. Este es realmente un buen enfoque porque le ayuda a mantener un espacio de memoria muy pequeño y que adapta su imagen a todos los tamaños de botón.
Aquí un buen tutorial .
Si necesita algo diferente al predeterminado, debe dibujarlo manualmente.
Solo dibuja el borde tú mismo:
@implementation TopBorderButton
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextFillRect(context, CGRectMake(0.0f, 0.0, self.frame.size.width, 1.0));
}
@end
Swift 4
UIButton Top Border
var lineView = UIView(frame: CGRect(x: 0, y: 0, width: button.frame.size.width, height: 2))
lineView.backgroundColor= UIColor.black
button.addSubview(lineView)
UIButton Bottom Border
var lineView = UIView(frame: CGRect(x: 0, y: button.frame.size.height, width: button.frame.size.width, height: 2))
lineView.backgroundColor= UIColor.black
button.addSubview(lineView)
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, btn.frame.size.width, 1)];
lineView.backgroundColor = [UIColor redColor];
[btn addSubview:lineView];
puedes hacer lo mismo para cada frontera. Al agregar múltiples UIViews puede agregar abajo, izquierda o arriba y derecha o cualquier borde que desee.
es decir, abajo y a la izquierda:
UIView *bottomBorder = [[UIView alloc] initWithFrame:CGRectMake(0, btn.frame.size.height - 1.0f, btn.frame.size.width, 1)];
bottomBorder.backgroundColor = [UIColor redColor];
UIView *leftBorder = [[UIView alloc] initWithFrame:CGRectMake(1, 0, 1, btn.frame.size.height)];
leftBorder.backgroundColor = [UIColor redColor];
[btn addSubview:bottomBorder];
[btn addSubview:leftBorder];
si no usa ARC, recuerde liberar UIViews después de agregar subvistas (o use la liberación automática).