Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
173 views
in Technique[技术] by (71.8m points)

ios - Round out the top right and left corners of a view?

I'm trying to figure out how to mask a UIView to display a shape that represents a Square with half of a circle sitting ontop of it.

Basically, it would be like applying a border radius to only the top two corners to round them out and create an arc.

I'm using swift, and this is driving me crazy.

EDIT: CornerRadius does not do what I want. I feel like I'll have to use a CGShapeLayer but I'm not sure how to create the arc.

EDIT2: enter image description here

EDIT3:

Considering explaining what I want, providing pictures, and explaining that I didn't understand what I needed to do, or how I needed to do it isn't enough for some people, here's what I've tried:

Attempted setting the layer.cornerRadius property, while pushing the bottom of the view out past the screen to hide the bottom corners from appearing cut off, this type of masking was too circular and did not provide the proper arc results.

I've attempted using UIBezierPath setting the top two corners to use a cornerRadii of the views width / 2. This also did not yield proper results. Upon attempting to hardcode values into the cornerRadii, I noticed that regardless of the value, I could not seem to obtain the results that I had wanted.

What other options are there? Or am I just using the BezierPath incorrectly?

EDIT 4:

Here is my original code.

override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)

    let bezierPath = UIBezierPath(roundedRect: navBarView.bounds, byRoundingCorners: [.TopLeft, .TopRight], cornerRadii: CGSizeMake(navBarView.bounds.width / 2, navBarView.bounds.width / 2)).CGPath;

    let shapeLayer = CAShapeLayer();
    shapeLayer.bounds = navBarView.bounds
    shapeLayer.path = bezierPath
    navBarView.layer.mask = shapeLayer

    updateUI() // <-- Label text, etc. 
}

Also, as stated before, had attempted doing navBarView.layer.cornerRadius = x

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Try this:

let path = UIBezierPath(roundedRect:self.view.bounds, byRoundingCorners:[.TopLeft, .TopRight], cornerRadii: CGSizeMake(20, 20))
    let maskLayer = CAShapeLayer()
    maskLayer.frame = self.view.bounds;
    maskLayer.path = path.CGPath
    self.view.layer.mask = maskLayer;

The UIBezierPath class lets you define a path consisting of straight and curved line segments and render that path in your custom views.

  1. Generate rounded corners of the path in UIBezierPath
  2. To generate a CAShapeLayer, it is set to one of the path
  3. layer to the view that you want to on one side only rounded corners 2 as the mask layer

Example:

let DynamicView=UIView(frame: CGRectMake(50, 200, 200, 300))
        DynamicView.backgroundColor=UIColor.redColor()
        let path = UIBezierPath(roundedRect:DynamicView.bounds, byRoundingCorners:[.TopLeft, .TopRight], cornerRadii: CGSizeMake(20, 20))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = DynamicView.bounds;
        maskLayer.path = path.CGPath
        DynamicView.layer.mask = maskLayer;


        self.view.addSubview(DynamicView)

Result:

Blockquote


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...