Make view stand out from the surroundings. Border layer with inverse color?

user_1413169 0
Viewed 50

I have a view (a Button in this case) and the content behind/below it can move around (a ScrollView). The button is just plain white with black text and not bordered with anything. When the content behind the View is white it does not really stand out as I would like it to do. (I can fix this with a black border sure... but...)

I have this idea of having a border around the button that is the opposite color of the view (pixel) behind it. So the border would always contrast with the background and constantly change with the content behind it.

I have googled a bit and looked into visual effects layers and some more complicated (over the top of my head) graphics stuff I don't remember the terminology for.

If you have an idea of how to approach this please tell me. I just really want to see what it would look like.

and have a wonderful day!

layer swift ios
1 Answers

I don't think you can create a border that uses colors based on the color of the pixel from the layer behind the current layer using CALayer and borders.

What I would suggest doing is to add a second CALayer to your view's CALayer, inset by -1 in both dimensions (made 1 pixel bigger.) Let's call that the surroundLayer. Then make the surroundLayer's borderColor be white and the view's layer.borderColor be black (or visa-versa.) You can make the surroundLayer's borderColor be 50% opaque so it just lightens/darkens the pixels under it without completely obscuring them, and that is enough to increase the contrast and make your view's border show up regardless of the contents under it.

I've used this technique before and it works well.

Edit:

Check out the project https://github.com/DuncanMC/MaskableImageView.git. The project demonstrates using an image as a mask layer to hide/reveal the contents of a view.

The class MaskableView in that project draws a circular "cursor" that shows where it is revealing/masking the contents of its subview (an image and a label, in the example app.) The cursor is yellow in the middle, with a partly transparent black outer circle around it. This gives good contrast regardless of the colors in the part of the image it is being drawn over.

The MaskableView class has properties that let the caller set the colors use for the "cursor" circle.

Below I posted a short animation of what the eraser tool with a yellow inner circle and an outer, 1/2 transparent black circle looks like.

Without the outer dark circle the yellow inner circle tends to get lost in brighter parts of an image. With the combination of a bright colored inner circle and a partly transparent, dark outer circle, it's easy to see on ANY background:

enter image description here

user_2051850
Related