如何在UIButton上只添加一个TOP边框?
我知道如何将边框添加到iOS 7中的button,使用以下代码:
[[myButton layer] setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; [[myButton layer] setBorderWidth:1]; [[myButton layer] setCornerRadius:15];
但是,我怎样才能添加一个边框? 我只想添加顶部边框 。
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, btn.frame.size.width, 1)]; lineView.backgroundColor = [UIColor redColor]; [btn addSubview:lineView];
你可以为每个边界做同样的事情。 添加多个UIViews你可以添加底部和左边或顶部和右边或任何你想要的边界。
即底部和左侧:
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];
如果你不使用ARC,记得在添加子视图(或者使用autorelease)后发布UIViews。
这里是斯威夫特实施的masgar解决scheme:
var lineView = UIView(frame: CGRectMake(0, 0, btn.frame.size.width, 1)) lineView.backgroundColor=UIColor.redColor() btn.addSubview(lineView)
在Swift中,像这样添加一个UIView类的扩展:
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) } }
我从这个链接得到了这个扩展: UIView底部边框?
然后像这样调用函数
var innerView : UIView? let borderWidth: CGFloat = 1.0 let borderColor : UIColor = UIColor.redColor() innerView!.addTopBorderWithColor(borderColor, width: borderWidth)
对于自适应布局使用这一个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)) } }
用法:
button!.addTopBorder(UIColor(red: 247.0/255.0, green: 147.0/255.0, blue: 29.0/255.0, alpha: 0.5), height: borderWidth)
只要自己画边框:
@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
你不能使用这个图层方法。
最好的解决scheme是创build一个小图片(通过代码或者photoshop),使用 – (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
根据你想要的方面调整它的大小,并将其添加为一个背景图像。 这是一个非常好的方法,因为它可以帮助您保持非常小的内存空间,并使图像适应所有button尺寸。
这里有一个好的教程 。
其实我也遇到过这个问题,但是我觉得我的方法比你select的答案要好。 你应该创build一个inheritance像UIButton这样的UIControl的类。
@interface customButton : UIButton
并重写像这样的drawrect方法:
- (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);
}
顺便说一下〜你的目的UIControl应该在xib的设置中使用你的类
最后〜显示你我的习惯UIButton。 我认为我们应该select这种方法,并结合UIBezierPath的API来完成我们的需求。
感谢您的收看〜希望一起学习和讨论〜来自iOS的渔夫 – vvlong
您必须创build一个新图层或查看1pt高,将其背景色设置为您想要的边框颜色,然后将其添加为子视图/子图层。
如果您需要默认以外的任何东西,您需要手动绘制它。
最好和简单的方法….
btnTest.selectiveBorderFlag = AUISelectiveBordersFlagBottom | AUISelectiveBordersFlagTop; btnTest.selectiveBordersColor = [UIColor redColor]; btnTest.selectiveBordersWidth = 3.0;
有没有使用它: 这个开源代码