堆栈内存溢出
  繁体   English   中英

如何在 UIButton 上仅添加顶部边框？

[英]How to add only a TOP border on a UIButton?

 原文  2013-11-10 14:36:40  2   11    ios/ iphone/ cocoa-touch/ uibutton/ ios7

问题描述

我知道如何使用以下代码为 iOS 7 中的按钮添加边框：

[[myButton layer] setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[[myButton layer] setBorderWidth:1];
[[myButton layer] setCornerRadius:15];

但是我怎样才能只添加一个边框呢？ 我只想添加顶部边框。

11 个解决方案

解决方案1
 68 已采纳  2014-02-16 12:53:46

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）。

解决方案2
 23  2015-05-28 04:35:42

这是 masgar 在 Swift 中实现的解决方案：

var lineView = UIView(frame: CGRectMake(0, 0, btn.frame.size.width, 1))
lineView.backgroundColor=UIColor.redColor()
btn.addSubview(lineView)

解决方案3
 20  2016-05-03 07:51:11

在 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
 10  2018-08-27 08:50:46

斯威夫特 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)

解决方案5
 5  2013-11-10 16:19:25

自己画边框：

@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

解决方案6
 4  2016-10-15 13:52:13

其实我和你一样遇到这个问题，但我认为我的方法比你选择的答案更好。 您应该创建一个继承 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

解决方案7
 3  2018-10-15 10:23:30

如果使用约束，则可以添加具有所需约束的边框视图

// 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)

（受到这个答案的启发）

解决方案8
 2  2013-11-10 15:10:51

您不能使用此图层方法。
这里最好的解决方案是创建一个小图像（通过代码或 photoshop），使用 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode根据您想要的方面调整它的大小，并将其添加为背景图像。 这确实是一个很好的方法，因为它可以帮助您保持非常小的内存占用，并使您的图像适应所有按钮大小。
这里有一个很好的教程。

解决方案9
 0  2013-11-10 15:05:32

您必须创建一个新图层或视图 1pt 高，将其背景颜色设置为您想要边框的颜色，并将其添加为子视图/子图层。

解决方案10
 -1  2013-11-10 15:09:21

如果您需要除默认值以外的任何内容，则需要手动绘制它。

解决方案11
 -1  2015-08-19 06:26:23

最好和最简单的方法....

btnTest.selectiveBorderFlag = AUISelectiveBordersFlagBottom | AUISelectiveBordersFlagTop;
btnTest.selectiveBordersColor = [UIColor redColor];
btnTest.selectiveBordersWidth = 3.0;

使用过：这个开源代码

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使边框颜色仅在圆形的UIButton顶部？ 如何在顶部viewForHeaderInSection上添加UIButton 如何在iOS SDK中的UIButton中添加边框？ 如何将阴影添加到 UIButton 边框而不是文本 如何在 UIButton 中创建边框？ 如何将UIButton添加到UIButton UIButton上下边框附加线 如何在iOS的UiView中添加顶部或底部边框？ ios：如何在表视图中添加顶部和底部边框？ 如何在 UIView 的顶部添加边框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM