[英]How to add only a TOP border on a UIButton?
我知道如何使用以下代碼為 iOS 7 中的按鈕添加邊框:
[[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,記得在添加子視圖后釋放UIViews(或者使用autorelease)。
這是 masgar 在 Swift 中實現的解決方案:
var lineView = UIView(frame: CGRectMake(0, 0, btn.frame.size.width, 1))
lineView.backgroundColor=UIColor.redColor()
btn.addSubview(lineView)
在 Swift 中為 UIView 類添加一個擴展,如下所示:
**斯威夫特 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 bottom border?
然后像這樣調用函數
var innerView : UIView?
let borderWidth: CGFloat = 1.0
let borderColor : UIColor = UIColor.redColor()
innerView!.addTopBorderWithColor(borderColor, width: borderWidth)
對於自適應布局使用這個
斯威夫特 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)
斯威夫特 4
UIButton 頂部邊框
var lineView = UIView(frame: CGRect(x: 0, y: 0, width: button.frame.size.width, height: 2))
lineView.backgroundColor= UIColor.black
button.addSubview(lineView)
UIButton 底部邊框
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)
自己畫邊框:
@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
其實我和你一樣遇到這個問題,但我認為我的方法比你選擇的答案更好。 您應該創建一個繼承 UIControl 的類,如 UIButton。
@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 的設置中使用你的類
[![此設置][1]][1]
最后~給你看看我的自定義 UIButton。 我覺得我們應該選擇這種方式,結合 UIBezierPath 的 API 來完成我們的需求。
[![在此處輸入圖像描述][2]][2]
謝謝收看~希望一起學習討論~來自一個iOS漁民——vvlong [1]: https://i.stack.imgur.com/ywIZk.png [2]: https://i.stack. imgur.com/mmfOB.png
如果使用約束,則可以添加具有所需約束的邊框視圖
// MARK: - Add a border to one side of a view
public enum BorderSide {
case top, bottom, left, right
}
extension UIView {
public func addBorder(side: BorderSide, color: UIColor, width: CGFloat) {
let border = UIView()
border.translatesAutoresizingMaskIntoConstraints = false
border.backgroundColor = color
self.addSubview(border)
let topConstraint = topAnchor.constraint(equalTo: border.topAnchor)
let rightConstraint = trailingAnchor.constraint(equalTo: border.trailingAnchor)
let bottomConstraint = bottomAnchor.constraint(equalTo: border.bottomAnchor)
let leftConstraint = leadingAnchor.constraint(equalTo: border.leadingAnchor)
let heightConstraint = border.heightAnchor.constraint(equalToConstant: width)
let widthConstraint = border.widthAnchor.constraint(equalToConstant: width)
switch side {
case .top:
NSLayoutConstraint.activate([leftConstraint, topConstraint, rightConstraint, heightConstraint])
case .right:
NSLayoutConstraint.activate([topConstraint, rightConstraint, bottomConstraint, widthConstraint])
case .bottom:
NSLayoutConstraint.activate([rightConstraint, bottomConstraint, leftConstraint, heightConstraint])
case .left:
NSLayoutConstraint.activate([bottomConstraint, leftConstraint, topConstraint, widthConstraint])
}
}
}
然后將其設置為如下所示
myButton.addBorder(side: .left, color: UIColor.lightGray, width: 1)
(受到這個答案的啟發)
您不能使用此圖層方法。
這里最好的解決方案是創建一個小圖像(通過代碼或 photoshop),使用 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
根據您想要的方面調整它的大小,並將其添加為背景圖像。 這確實是一個很好的方法,因為它可以幫助您保持非常小的內存占用,並使您的圖像適應所有按鈕大小。
這里有一個很好的教程。
您必須創建一個新圖層或視圖 1pt 高,將其背景顏色設置為您想要邊框的顏色,並將其添加為子視圖/子圖層。
如果您需要除默認值以外的任何內容,則需要手動繪制它。
最好和最簡單的方法....
btnTest.selectiveBorderFlag = AUISelectiveBordersFlagBottom | AUISelectiveBordersFlagTop;
btnTest.selectiveBordersColor = [UIColor redColor];
btnTest.selectiveBordersWidth = 3.0;
使用過:這個開源代碼
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.