How to add only a TOP border on a UIButton?

Question

I know how to add border to a button in iOS 7, with the following code :

[[myButton layer] setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5]          


        

Answer 1

Actually I meet this questions as you,but I think my method is better than the answer which you choose. You should create a class inherit the UIControl like UIButton.

@interface customButton : UIButton

and rewrite the drawrect method like this:

- (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);
}

By the way~ your purpose UIControl should use your class in xib's setting

[![this setting][1]][1]

Last~ show you my custom UIButton. I think we should choose this method and combine UIBezierPath's API to finish our demand.

[![enter image description here][2]][2]

Thank you for watching~ hope to study and discuss together~ From a iOS fisherman -- vvlong [1]: https://i.stack.imgur.com/ywIZk.png [2]: https://i.stack.imgur.com/mmfOB.png

Answer 2

If you use constraints then you can add a border view with the required constraints

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

Then set it something like the below

myButton.addBorder(side: .left, color: UIColor.lightGray, width: 1)

(inspired by this answer)

Answer 3

If you need anything other than the default, you need to manually draw it.

Answer 4

You can't using this layer methods.
The best solution here is create a small image (by code or photoshop), use the - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode to resize it according to the aspect that you want give and add it as a background image. This is really a good approach because it helps you to keep a very small memory footprint and that adapts your image to all button sizes.
Here a good tutorial.

Answer 5

Best and simple way....

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

Have did it using : this open source code

Answer 6

Just draw the border yourself:

@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