how to set boarder for only top, left and right with corner radius with top-left and top-right in UIView?

Question

I am using below methods to add boarder to left , right and top of the view after that I am set the corner radius to view and I won't give appropriate result.

-(void)addLeftBorder:(UIView *)viewName
{
    CALayer *leftBorder = [CALayer layer];
    leftBorder.backgroundColor = [UIColor redColor].CGColor;
    leftBorder.frame = CGRectMake(0,0,1.0,viewName.frame.size.height);
    viewName.clipsToBounds = true;
    leftBorder.cornerRadius = 25.0;
    [viewName.layer addSublayer:leftBorder];
}
-(void)addRightBorder:(UIView *)viewName
{
    CALayer *rightBorder = [CALayer layer];
    rightBorder.backgroundColor = [UIColor redColor].CGColor;
    rightBorder.frame = CGRectMake(viewName.frame.size.width - 1.0,0,1.0,viewName.frame.size.height);
    viewName.clipsToBounds = true;
    rightBorder.cornerRadius = 25.0;
    [viewName.layer addSublayer:rightBorder];
}
-(void)addtopBorder:(UIView *)viewName
{
    CALayer *topBorder = [CALayer layer];
    topBorder.backgroundColor = [UIColor redColor].CGColor;
    topBorder.frame = CGRectMake(0,0,viewName.frame.size.width,1.0);
    viewName.clipsToBounds = true;
    topBorder.cornerRadius = 25.0;
    [viewName.layer addSublayer:topBorder];
}

Here we are setting corner radius to view.

-(void)setupUI{
    [self addLeftBorder:self.replyContainerView];
    [self addRightBorder:self.replyContainerView];
    [self addtopBorder:self.replyContainerView];
    self.replyContainerView.layer.cornerRadius = self.comment.bounds.size.height/2;
    self.replyContainerView.clipsToBounds = true;
    self.replyContainerView.layer.maskedCorners = kCALayerMaxXMinYCorner | kCALayerMinXMinYCorner;

}

For reference purpose , I attached screen shot for above issue.

Help in swift also appreciated.

score 1 · Answer 1 · answered Jan 21 '20 at 09:18

Here is a demo in swift iOS Playground of possible approach

enter image description here

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .yellow

        // example view to have top-side rounded borders
        let label = UILabel()
        label.frame = CGRect(x: 100, y: 200, width: 200, height: 200)
        label.textColor = .black
        label.backgroundColor = .white

        // radius constant
        let radius: CGFloat = 25

        // initial part of path to have rounded top cornders
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: radius * 2)) // << border height just for demo
        path.addLine(to: CGPoint(x: 0, y: radius))
        path.addArc(withCenter: CGPoint(x: radius, y: radius), radius: radius, startAngle: -.pi, endAngle: -.pi/2, clockwise: true)
        path.addLine(to: CGPoint(x: label.bounds.maxX - radius, y: 0))
        path.addArc(withCenter: CGPoint(x: label.bounds.maxX - radius, y: radius), radius: radius, startAngle: -.pi/2.0, endAngle: 0, clockwise: true)
        path.addLine(to: CGPoint(x: label.bounds.maxX, y: radius * 2))  // << border height just for demo

        // shape layer to drop rounded corners
        var shape = CAShapeLayer()
        shape.path = path.cgPath
        shape.strokeColor = UIColor.red.cgColor
        shape.lineWidth = 2.0
        shape.fillColor = UIColor.clear.cgColor
        label.layer.addSublayer(shape)

        // ... extending path to complete view bounds to mask
        path.addLine(to: CGPoint(x: label.bounds.maxX, y: label.bounds.maxY))
        path.addLine(to: CGPoint(x: 0, y: label.bounds.maxY))
        path.close()
        // ... shape to mask target view
        shape = CAShapeLayer()
        shape.path = path.cgPath
        shape.fillColor = UIColor.black.cgColor
        label.layer.mask = shape

        view.addSubview(label)
        self.view = view
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

score 0 · Answer 2 · answered Jan 21 '20 at 07:24

I don't think this is possible in the Storyboard. However you can extend UIView to automatically draw the top-left and top-right border and border-colors on init. Then assign it in your storyboard.

@IBDesignable class BottomSheetView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        drawBorder()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        drawBorder()
    }

    private func drawBorder() {
        let path = UIBezierPath(
            roundedRect: bounds,
            byRoundingCorners: [.topRight, .topLeft],
            cornerRadii: CGSize(width: 16, height: 16))
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.cgPath
        layer.mask = maskLayer
    }
}

For drawing borders on one-side, you can have a look here. You can choose which sides, which section of the side and size of the border.

let topBorder: CALayer = CALayer()
topBorder.frame = CGRect(x: 0, y: 0, width: myView.frame.size.width, height: 1)
topBorder.backgroundColor = UIColor.purple.cgColor
myView.layer.addSublayer(topBorder)

how to set boarder for only top, left and right with corner radius with top-left and top-right in UIView?

2 Answers2