UIView with 2 sides rounded corners, border and shadow

OnnoJOnnoJ NLUniversity ✭✭

The app we are building contains background panels with all rounden corners, this all works great if you use just 1 UIView with rounded corners and give it a border and a shadow radius.

But when using this in a UITableView I would like to cut this background panel in 3 pieces to be able to use them in different cells:

  • the top (with the top 2 corners rounded) without the border and shadow on the bottom
  • the middle (normal rectangle with only borders and shadow on left and right, but not top and bottom)
  • the bottom view which is the opposite of the top view

To illustrate what I mean by that I attached an image.

Now my question is, what is the best way to do this? Should I really try to get this right by using a mask layer and a UIBezierPath? Or should I just go with using an image as background (easier but not sure about scaling the border, and no idea about performance with scrolling this way).

I have seen both solutions around when googling, but none of those that I found had a solution for removing the border on one specific side.

Thanks in advance!

Onno.

Tagged:

Best Answer

Answers

  • OnnoJOnnoJ NLUniversity ✭✭

    Thanks for the quick reply Adam!

    The strechable image approach it is then, for those that would also like an example, I have found this chat example that does about the same thing :

    https://developer.xamarin.com/samples/monotouch/chat/

    Which I found from this blog post: http://tirania.org/monomac//archive/2012/Jan.html

    Are there any other nice examples I could have a look at?

    Cheers, Onno.

Sign In or Register to comment.