How to set a gradient border on UIView?

拟墨画扇 提交于 2020-01-20 19:42:49

问题


It's very easy to put a simple border on a UIView. You simply link to QuartzCore, import it, and use:

self.view.layer.borderColor = [UIColor redColor].CGColor;
self.view.layer.borderWidth = 2.0f;

My question is... Is there a way to make this border use a gradient. I know how to apply a gradient mask to the entire view, but not just to its border. I'm assuming this could involve a custom view and CoreGraphics drawing inside drawRect:, but I'm not sure where to start.


回答1:


I'm not entirely sure of what you mean by "gradient". Since you've said you've used core graphics to apply a gradient to a shape, then I'll assume you mean that (and not the shadow the previous answer is referring to).

You can't apply a gradient to a border. However, you can create your own border by using a custom shape. The easiest way to do this is to create two paths, an outer path and an inner path. For simplicity sake, let's assume that the path is a simple rect (the rect given in drawRect):

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];

The second path is going to be an inner path smaller than the first one (enough to make a border):

//To create a 1.0f borderWidth
CGRect innerRect = rect;
innerRect.origin.x += 1.0f;
innerRect.origin.y += 1.0f;
innerRect.size.width -= 2.0f;
innerRect.size.height -= 2.0f;
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRect:innerRect];

Now, append the inner path to the normal path and make sure the path uses the evenOddFillRule. The evenOddFillRule will tell core graphics to only fill the outer portion, leaving the inner portion alone. Oh, and you'll want to clip to the path:

[path appendPath:innerPath];
path.usesEvenOddFillRule = YES;
[path addClip];

If you apply a gradient to this shape, it will fill outside the inner path and inside the outer path, making a border with a gradient.

UPDATE

If you're targeting iOS 5.0 there may be better way to do this. I discovered a remarkable new path function called CGPathCreateCopyByStrokingPath(). See the link for details, but basically it creates a new path that is the stoke(s) of the original, so that if you fill the new path, it would create the same image as stroking the old path. This is fantastic because instead of filling the new path, you can clip to it and then fill with a gradient, giving you a gradient border. This is much easier than the previous method I mentioned, but of course, it's only available in iOS 5.0. This will also make it much easier to create new complex shapes.




回答2:


I created a second gradient layer with the colors reversed in the array, and then made the frame of the second layer slightly smaller than the first layer. Creates the appearance of a border.



来源:https://stackoverflow.com/questions/10200814/how-to-set-a-gradient-border-on-uiview

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!