Is there a way to blur/fade out the border of a UIView?
i have done very little to none with core graphics so far.
You might try setting the UIView's CALayer with a large shadow radius and transparency. Something like:
#include <QuartzCore/QuartzCore.h>
...
CALayer *layer = myView.layer;
layer.shadowOpacity = .5;
layer.shadowColor = [[UIColor blackColor] CGColor];
layer.shadowOffset = CGSizeMake(0,0);
layer.shadowRadius = 10;
Adding an example with the swift version:
btnSignIn.layer.cornerRadius = btnSignIn.frame.height * 0.5
btnSignIn.layer.shadowColor = UIColor.darkGray.cgColor
btnSignIn.layer.shadowRadius = 4.0
btnSignIn.layer.shadowOpacity = 1.0
btnSignIn.layer.shadowOffset = CGSize(width: 0, height: 0)
Result:
Keep in mind that if you change the shadow settings in the ib editor, it will change the text's shadow, not the view's border.
Also you can make a class and set it in IB Builder:
class UIRoundedWhiteButton: UIButton {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
layer.cornerRadius = frame.height * 0.5
layer.shadowColor = UIColor.darkGray.cgColor
layer.shadowRadius = 4.0
layer.shadowOpacity = 1.0
layer.shadowOffset = CGSize(width: 0, height: 0)
}...
Related
In my custom view, i have code as below:
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
//Drawing code here.
[self setWantsLayer: YES];
[self.layer setBorderWidth: 1];
[self.layer setBorderColor:[NSColor colorWithRed:205/255.0 green:211/255.0 blue:232/255.0 alpha:1.0].CGColor];
[self.layer setCornerRadius: 10];
}
This is OK to set border line and color for my NSView, but i want to set a dash line, anyone know how to do this?
And i tried some codes from the web search, but it doens't draw a border at all.
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
// Drawing code here.
CGFloat dashPattern[] = {10,4}; //make your pattern here
NSBezierPath *textViewSurround = [NSBezierPath bezierPathWithRoundedRect:self.frame xRadius:10 yRadius:10];
[textViewSurround setLineWidth:2.0f];
[textViewSurround setLineDash:dashPattern count:2 phase:0];
[[NSColor colorWithRed:205/255.0 green:211/255.0 blue:232/255.0 alpha:1.0] set];
[textViewSurround stroke];
}
here is a complete example using a subclass of NSView in Swift 3:
class BorderedView: NSView {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
// dash customization parameters
let dashHeight: CGFloat = 3
let dashLength: CGFloat = 10
let dashColor: NSColor = .red
// setup the context
let currentContext = NSGraphicsContext.current()!.cgContext
currentContext.setLineWidth(dashHeight)
currentContext.setLineDash(phase: 0, lengths: [dashLength])
currentContext.setStrokeColor(dashColor.cgColor)
// draw the dashed path
currentContext.addRect(bounds.insetBy(dx: dashHeight, dy: dashHeight))
currentContext.strokePath()
}
}
In case you want to setup line border with CAShapeLayer (Swift 4.2):
class StrokeWithDashedLineView: NSView {
private let shapeLayer = CAShapeLayer()
private let fillLayer = CALayer()
private let textLabel = NSTextField().autolayoutView()
override init(frame frameRect: NSRect) {
super.init(frame: frameRect)
setupUI()
setupLayout()
}
required init?(coder decoder: NSCoder) {
fatalError()
}
override var intrinsicContentSize: NSSize {
return CGSize(intrinsicHeight: 76)
}
override func layout() {
super.layout()
updateLayers()
}
private func updateLayers() {
layer?.cornerRadius = 0.5 * bounds.height // Making ourselves rounded.
// Stroke Layer
let shapeBounds = CGRect(width: bounds.width - shapeLayer.lineWidth, height: bounds.height - shapeLayer.lineWidth)
let shapeRadius = 0.5 * shapeBounds.height
let path = CGMutablePath()
path.addRoundedRect(in: shapeBounds, cornerWidth: shapeRadius, cornerHeight: shapeRadius)
shapeLayer.path = path
shapeLayer.bounds = shapeBounds
shapeLayer.position = CGPoint(x: 0.5 * shapeLayer.lineWidth, y: 0.5 * shapeLayer.lineWidth)
// Fill Layer
let fillBounds = CGRect(width: bounds.width - 2 * shapeLayer.lineWidth, height: bounds.height - 2 * shapeLayer.lineWidth)
fillLayer.cornerRadius = 0.5 * fillBounds.height
fillLayer.bounds = fillBounds
fillLayer.position = CGPoint(x: shapeLayer.lineWidth, y: shapeLayer.lineWidth)
}
private func setupUI() {
wantsLayer = true
layer?.masksToBounds = true
shapeLayer.lineWidth = 3
shapeLayer.strokeColor = NSColor.red.cgColor
shapeLayer.fillColor = nil
shapeLayer.lineDashPattern = [11.2, 11.2]
shapeLayer.lineCap = .round
shapeLayer.anchorPoint = .zero
fillLayer.backgroundColor = NSColor.yellow.cgColor
fillLayer.anchorPoint = .zero
layer?.addSublayer(shapeLayer)
layer?.addSublayer(fillLayer)
addSubview(textLabel)
textLabel.text = "Drag Xib or Storyboard files onto\nthis window to open them"
textLabel.alignment = .center
textLabel.textColor = .black
textLabel.font = NSFont.semibold(size: 13)
textLabel.isEditable = false
textLabel.drawsBackground = false
textLabel.isBezeled = false
}
private func setupLayout() {
textLabel.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
textLabel.centerYAnchor.constraint(equalTo: centerYAnchor).activate()
}
}
Result:
You can do this through CGContext Here is an answer that worked for me:
how to make dashed line moveable
And my result:
You can do this like,
[yourView.layer setBorderWidth:5.0];
[yourView.layer setBorderColor:[[UIColor colorWithPatternImage:[UIImage imageNamed:#"DotedImage.png"]] CGColor]];
Add dashed image in project and import QuartzCore/QuartzCore.hin project,
#import <QuartzCore/QuartzCore.h>
Update :
Image size and View size should be same.
I'm working on a design application that has a section for selecting colors by three sliders for RGB.
As we can see in xcode, where we want to select a color by RGB values, the slider tint color is a gradient color that changes when we change the sliders. I want to use this in my application. but I have no idea about how to do this?
I've found this code in a blog. but didn't work for me.
- (void)setGradientToSlider:(UISlider *)Slider WithColors:(NSArray *)Colors{
UIView * view = (UIView *)[[Slider subviews]objectAtIndex:0];
UIImageView * maxTrackImageView = (UIImageView *)[[view subviews]objectAtIndex:0];
CAGradientLayer * maxTrackGradient = [CAGradientLayer layer];
CGRect rect = maxTrackImageView.frame;
rect.origin.x = view.frame.origin.x;
maxTrackGradient.frame = rect;
maxTrackGradient.colors = Colors;
[maxTrackGradient setStartPoint:CGPointMake(0.0, 0.5)];
[maxTrackGradient setEndPoint:CGPointMake(1.0, 0.5)];
[[maxTrackImageView layer] insertSublayer:maxTrackGradient atIndex:0];
/////////////////////////////////////////////////////
UIImageView * minTrackImageView = (UIImageView *)[[view subviews]objectAtIndex:1];
CAGradientLayer * minTrackGradient = [CAGradientLayer layer];
rect = minTrackImageView.frame;
rect.size.width = maxTrackImageView.frame.size.width;
rect.origin.x = 0;
rect.origin.y = 0;
minTrackGradient.frame = rect;
minTrackGradient.colors = Colors;
[minTrackGradient setStartPoint:CGPointMake(0.0, 0.5)];
[minTrackGradient setEndPoint:CGPointMake(1.0, 0.5)];
[minTrackImageView.layer insertSublayer:minTrackGradient atIndex:0];
}
I would appreciate any helps. Thanks.
While it didnt give me the desired results here is a down and dirty Swift version of the answer above for those that want to try it.
func setSlider(slider:UISlider) {
let tgl = CAGradientLayer()
let frame = CGRectMake(0, 0, slider.frame.size.width, 5)
tgl.frame = frame
tgl.colors = [UIColor.blueColor().CGColor, UIColor.greenColor().CGColor, UIColor.yellowColor().CGColor, UIColor.orangeColor().CGColor, UIColor.redColor().CGColor]
tgl.startPoint = CGPointMake(0.0, 0.5)
tgl.endPoint = CGPointMake(1.0, 0.5)
UIGraphicsBeginImageContextWithOptions(tgl.frame.size, tgl.opaque, 0.0);
tgl.renderInContext(UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
image.resizableImageWithCapInsets(UIEdgeInsetsZero)
slider.setMinimumTrackImage(image, forState: .Normal)
//slider.setMaximumTrackImage(image, forState: .Normal)
}
UPDATE for Swift 4.0
func setSlider(slider:UISlider) {
let tgl = CAGradientLayer()
let frame = CGRect.init(x:0, y:0, width:slider.frame.size.width, height:5)
tgl.frame = frame
tgl.colors = [UIColor.blue.cgColor, UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.orange.cgColor, UIColor.red.cgColor]
tgl.startPoint = CGPoint.init(x:0.0, y:0.5)
tgl.endPoint = CGPoint.init(x:1.0, y:0.5)
UIGraphicsBeginImageContextWithOptions(tgl.frame.size, tgl.isOpaque, 0.0);
tgl.render(in: UIGraphicsGetCurrentContext()!)
if let image = UIGraphicsGetImageFromCurrentImageContext() {
UIGraphicsEndImageContext()
image.resizableImage(withCapInsets: UIEdgeInsets.zero)
slider.setMinimumTrackImage(image, for: .normal)
}
}
Here is possible solution:
Usage:
//array of CGColor objects, color1 and color2 are UIColor objects
NSArray *colors = [NSArray arrayWithObjects:(id)color1.CGColor, (id)color2.CGColor, nil];
//your UISlider
[slider setGradientBackgroundWithColors:colors];
Implementation:
Create category on UISlider:
- (void)setGradientBackgroundWithColors:(NSArray *)colors
{
CAGradientLayer *trackGradientLayer = [CAGradientLayer layer];
CGRect frame = self.frame;
frame.size.height = 5.0; //set the height of slider
trackGradientLayer.frame = frame;
trackGradientLayer.colors = colors;
//setting gradient as horizontal
trackGradientLayer.startPoint = CGPointMake(0.0, 0.5);
trackGradientLayer.endPoint = CGPointMake(1.0, 0.5);
UIImage *trackImage = [[UIImage imageFromLayer:trackGradientLayer] resizableImageWithCapInsets:UIEdgeInsetsZero];
[self setMinimumTrackImage:trackImage forState:UIControlStateNormal];
[self setMaximumTrackImage:trackImage forState:UIControlStateNormal];
}
Where colors is array of CGColor.
I have also created a category on UIImage which creates image from layer as you need an UIImage for setting gradient on slider.
+ (UIImage *)imageFromLayer:(CALayer *)layer
{
UIGraphicsBeginImageContextWithOptions(layer.frame.size, layer.opaque, 0.0);
[layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return outputImage;
}
For Swift 3 and to prevent the slider from scaling the Min image, apply this when setting the its image. Recalculating the slider's left side is not necessary. Only recalc if you can changing the color of the gradient. The Max image does not seem to scale, but you should probably apply the same setting for consistency. There is a slight difference on the Max image when not applying its insets.
slider.setMinimumTrackImage(image?.resizableImage(withCapInsets:.zero), for: .normal)
For some reason it only works properly when resizableImage(withCapInsets:.zero) is all done at the same time. Running that part separate does not allow the image to work and gets scaled.
Here is the entire routine in Swift 3:
func setSlider(slider:UISlider) {
let tgl = CAGradientLayer()
let frame = CGRect(x: 0.0, y: 0.0, width: slider.bounds.width, height: 5.0 )
tgl.frame = frame
tgl.colors = [ UIColor.yellow.cgColor,UIColor.black.cgColor]
tgl.endPoint = CGPoint(x: 1.0, y: 1.0)
tgl.startPoint = CGPoint(x: 0.0, y: 1.0)
UIGraphicsBeginImageContextWithOptions(tgl.frame.size, false, 0.0)
tgl.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
slider.setMaximumTrackImage(image?.resizableImage(withCapInsets:.zero), for: .normal)
slider.setMinimumTrackImage(image?.resizableImage(withCapInsets:.zero), for: .normal)
}
This is a really effective approach that I've found after a lot of web search. So it's better to share it here as a complete answer. The following code is a Swift Class That you can use to create and use gradients as UIView or UIImage.
import Foundation
import UIKit
class Gradient: UIView{
// Gradient Color Array
private var Colors: [UIColor] = []
// Start And End Points Of Linear Gradient
private var SP: CGPoint = CGPoint.zeroPoint
private var EP: CGPoint = CGPoint.zeroPoint
// Start And End Center Of Radial Gradient
private var SC: CGPoint = CGPoint.zeroPoint
private var EC: CGPoint = CGPoint.zeroPoint
// Start And End Radius Of Radial Gradient
private var SR: CGFloat = 0.0
private var ER: CGFloat = 0.0
// Flag To Specify If The Gradient Is Radial Or Linear
private var flag: Bool = false
// Some Overrided Init Methods
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
// Draw Rect Method To Draw The Graphics On The Context
override func drawRect(rect: CGRect) {
// Get Context
let context = UIGraphicsGetCurrentContext()
// Get Color Space
let colorSpace = CGColorSpaceCreateDeviceRGB()
// Create Arrays To Convert The UIColor to CG Color
var colorComponent: [CGColor] = []
var colorLocations: [CGFloat] = []
var i: CGFloat = 0.0
// Add Colors Into The Color Components And Use An Index Variable For Their Location In The Array [The Location Is From 0.0 To 1.0]
for color in Colors {
colorComponent.append(color.CGColor)
colorLocations.append(i)
i += CGFloat(1.0) / CGFloat(self.Colors.count - 1)
}
// Create The Gradient With The Colors And Locations
let gradient: CGGradientRef = CGGradientCreateWithColors(colorSpace, colorComponent, colorLocations)
// Create The Suitable Gradient Based On Desired Type
if flag {
CGContextDrawRadialGradient(context, gradient, SC, SR, EC, ER, 0)
} else {
CGContextDrawLinearGradient(context, gradient, SP, EP, 0)
}
}
// Get The Input Data For Linear Gradient
func CreateLinearGradient(startPoint: CGPoint, endPoint: CGPoint, colors: UIColor...) {
self.Colors = colors
self.SP = startPoint
self.EP = endPoint
self.flag = false
}
// Get The Input Data For Radial Gradient
func CreateRadialGradient(startCenter: CGPoint, startRadius: CGFloat, endCenter: CGPoint, endRadius: CGFloat, colors: UIColor...) {
self.Colors = colors
self.SC = startCenter
self.EC = endCenter
self.SR = startRadius
self.ER = endRadius
self.flag = true
}
// Function To Convert Gradient To UIImage And Return It
func getImage() -> UIImage {
// Begin Image Context
UIGraphicsBeginImageContext(self.bounds.size)
// Draw The Gradient
self.drawRect(self.frame)
// Get Image From The Current Context
let image = UIGraphicsGetImageFromCurrentImageContext()
// End Image Context
UIGraphicsEndImageContext()
// Return The Result Gradient As UIImage
return image
}
}
SOLUTION: Here is the GitHub link for the class I eventually created / will expand on https://github.com/ckalas/SimpleSwiftBarGraph
I'm trying to (in playground) draw a bar graph using Core Graphics. I'm basing it off this code in Obj-C:
- (void)drawRect:(CGRect)rect {
CGFloat height = self.bounds.size.height;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
CGFloat barWidth = 30;
int count = 0;
for (NSNumber *num in values) {
CGFloat x = count * (barWidth + 10);
CGRect barRect = CGRectMake(x, height - ([num floatValue] * height), barWidth, [num floatValue] * height);
CGContextAddRect(context, barRect);
count++;
}
CGContextFillPath(context);
}
I'm trying to convert this, but at the second line, Xcode doesn't know about UIGraphicsGetCurrentContext(). Can anyone offer help?
EDIT: Here is my current code...issues now are in the for loop where I commented, no matter what combination of stuff I try I cannot get that line to work. Just errors can't convert type to type, I've tried declaring the array as an [NSNumber], no luck.
class CustomView: UIView {
init(frame: CGRect) {
super.init(frame: frame)
}
override func drawRect(rect: GCRect) {
let values: [UInt8] = [1,2,3]
let height = self.bounds.size.height
let context = UIGraphicsGetCurrentContext()
CGContextClearRect(context, self.frame)
CGContextSetFillColorWithColor(context, UIColor.grayColor().CGColor!);
let barWidth = 30.0 as CGFloat
var count = 0 as CGFloat
for number in values {
let x = count * (barWidth + 10) as CGFloat
let barRect = CGRectMake(x, (height - number*height), barWidth, number*height) // issues here can't convert one type to another
CGContextAddRect(context, barRect)
count++
}
CGContextFillPath(context)
}
Declare your values array to be of type [CGFloat]. I made a few other stylistic changes (removed semicolons, CGColor is already implicitly unwrapped so ! is not needed, and prefer type declaration to cast).
class CustomView: UIView {
init(frame: CGRect) {
super.init(frame: frame)
}
override func drawRect(rect: CGRect) {
let values: [CGFloat] = [0.3, 0.6, 0.9]
let height = self.bounds.size.height
let context = UIGraphicsGetCurrentContext()
CGContextClearRect(context, self.frame)
CGContextSetFillColorWithColor(context, UIColor.grayColor().CGColor)
let barWidth:CGFloat = 30.0
var count:CGFloat = 0
for number in values {
let x = count * (barWidth + 10)
let barRect = CGRectMake(x, (height - number*height), barWidth, number*height)
CGContextAddRect(context, barRect)
count++
}
CGContextFillPath(context)
}
}
The values in the values array should range from 0.0 for no bar height to 1.0 for full bar height.
I am working on a circular progress bar for custom game center achievements view and I have kind of "hit the wall". I am struggling with this for over two hours and still cannot get it to work.
The thing is, that I need a circular progress bar, where I would be able to set (at least) the track(fill) image. Because my progress fill is a rainbow like gradient and I am not able to achieve the same results using only code.
I was messing with CALayers, and drawRect method, however I wasn't successful. Could you please give me a little guidance?
Here are examples of the circular progress bars:
https://github.com/donnellyk/KDGoalBar
https://github.com/danielamitay/DACircularProgress
I just need the fill to be an masked image, depending on the progress. If you could even make it work that the progress would be animated, that would be really cool, but I don't require help with that :)
Thanks, Nick
You basically just need to construct a path that defines the area to be filled (e.g. using CGPathAddArc), clip the graphics context to that path using CGContextClip and then just draw your image.
Here's an example of a drawRect: method you could use in a custom view:
- (void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat progress = 0.7f; //This would be a property of your view
CGFloat innerRadiusRatio = 0.5f; //Adjust as needed
//Construct the path:
CGMutablePathRef path = CGPathCreateMutable();
CGFloat startAngle = -M_PI_2;
CGFloat endAngle = -M_PI_2 + MIN(1.0f, progress) * M_PI * 2;
CGFloat outerRadius = CGRectGetWidth(self.bounds) * 0.5f - 1.0f;
CGFloat innerRadius = outerRadius * innerRadiusRatio;
CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
CGPathAddArc(path, NULL, center.x, center.y, innerRadius, startAngle, endAngle, false);
CGPathAddArc(path, NULL, center.x, center.y, outerRadius, endAngle, startAngle, true);
CGPathCloseSubpath(path);
CGContextAddPath(ctx, path);
CGPathRelease(path);
//Draw the image, clipped to the path:
CGContextSaveGState(ctx);
CGContextClip(ctx);
CGContextDrawImage(ctx, self.bounds, [[UIImage imageNamed:#"RadialProgressFill"] CGImage]);
CGContextRestoreGState(ctx);
}
To keep it simple, I've hard-coded a few things – you obviously need to add a property for progress and call setNeedsDisplay in the setter. This also assumes that you have an image named RadialProgressFill in your project.
Here's an example of what that would roughly look like:
I hope you have a better-looking background image. ;)
The solution that omz proposed worked laggy when I was trying to animate property, so I kept looking.
Found great solution - to use Quartz Core framework and wrapper called CADisplayLink. "This class is specifically made for animations where “your data is extremely likely to change in every frame”. It attempts to send a message to a target every time something is redrawn to the screen"
Source
And the library that work that way.
Edit:
But there is more efficient solution. To animate mask which is applied on layer with the image. I don't know why I didn't do it from the beginning. CABasicAnimation works faster than any custom drawing. Here is my implementation:
class ProgressBar: UIView {
var imageView:UIImageView!
var maskLayer: CAShapeLayer!
var currentValue: CGFloat = 1
override init(frame: CGRect) {
super.init(frame: frame)
updateUI()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
updateUI()
}
func updateUI(){
makeGradient()
setUpMask()
}
func animateCircle(strokeEnd: CGFloat) {
let oldStrokeEnd = maskLayer.strokeEnd
maskLayer.strokeEnd = strokeEnd
//override strokeEnd implicit animation
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.duration = 0.5
animation.fromValue = oldStrokeEnd
animation.toValue = strokeEnd
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
maskLayer.add(animation, forKey: "animateCircle")
currentValue = strokeEnd
}
func setUpMask(){
let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0),
radius: (frame.size.width - 10)/2,
startAngle: -CGFloat.pi/2,
endAngle: CGFloat.pi*1.5,
clockwise: true)
maskLayer = CAShapeLayer()
maskLayer.path = circlePath.cgPath
maskLayer.fillColor = UIColor.clear.cgColor
maskLayer.strokeColor = UIColor.red.cgColor
maskLayer.lineWidth = 8.0;
maskLayer.strokeEnd = currentValue
maskLayer.lineCap = "round"
imageView.layer.mask = maskLayer
}
func makeGradient(){
imageView = UIImageView(image: UIImage(named: "gradientImage"))
imageView.frame = bounds
imageView.contentMode = .scaleAspectFill
addSubview(imageView)
}
}
By the way, if you are looking to become better at animations, I suggest a great book "IOS Core Animation: Advanced Techniques
Book by Nick Lockwood"
Is there a way to set the sides of the border of a UIView to one color and leave the top and the bottom another?
Nope—CALayer borders don’t support that behavior. The easiest way to accomplish what you want is adding an n-point-wide opaque subview with your desired border color as its background color on each side of your view.
Example:
CGSize mainViewSize = theView.bounds.size;
CGFloat borderWidth = 2;
UIColor *borderColor = [UIColor redColor];
UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, borderWidth, mainViewSize.height)];
UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(mainViewSize.width - borderWidth, 0, borderWidth, mainViewSize.height)];
leftView.opaque = YES;
rightView.opaque = YES;
leftView.backgroundColor = borderColor;
rightView.backgroundColor = borderColor;
// for bonus points, set the views' autoresizing mask so they'll stay with the edges:
leftView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin;
rightView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin;
[theView addSubview:leftView];
[theView addSubview:rightView];
[leftView release];
[rightView release];
Note that this won’t quite match the behavior of CALayer borders—the left and right border views will always be inside the boundaries of their superview.
The answer with the views that works like borders are very nice, but remember that every view is a UI Object that cost lots of memory.
I whould use uivew's layer to paint a stroke with color on an already existing UIview.
-(CAShapeLayer*)drawLineFromPoint:(CGPoint)fromPoint toPoint:(CGPoint) toPoint withColor:(UIColor *)color andLineWidth:(CGFloat)lineWidth{
CAShapeLayer *lineShape = nil;
CGMutablePathRef linePath = nil;
linePath = CGPathCreateMutable();
lineShape = [CAShapeLayer layer];
lineShape.lineWidth = lineWidth;
lineShape.strokeColor = color.CGColor;
NSUInteger x = fromPoint.x;
NSUInteger y = fromPoint.y;
NSUInteger toX = toPoint.x;
NSUInteger toY = toPoint.y;
CGPathMoveToPoint(linePath, nil, x, y);
CGPathAddLineToPoint(linePath, nil, toX, toY);
lineShape.path = linePath;
CGPathRelease(linePath);
return lineShape;}
and add it to our view.
CAShapeLayer* borderLine=[self drawLineFromPoint:CGPointMake(0, 0) toPoint:CGPointMake(0,_myView.frame.size.height) withColor:[UIColor lightGrayColor] andLineWidth:1.0f];
[_myView.layer addSublayer:borderLine];
So... We take a point and actually painting a line from top to the bottom of our view. The result is that there is a line that looks like a one pixel width border.
Updated for Swift 3.0
I wrote a Swift extension (for a UIButton) that simulates setting a border on any side of a UIView to a given color and width. It's similar to #Noah Witherspoon's approach, but self-contained and autolayout constraint based.
// Swift 3.0
extension UIView {
enum Border {
case left
case right
case top
case bottom
}
func setBorder(border: UIView.Border, weight: CGFloat, color: UIColor ) {
let lineView = UIView()
addSubview(lineView)
lineView.backgroundColor = color
lineView.translatesAutoresizingMaskIntoConstraints = false
switch border {
case .left:
lineView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
lineView.topAnchor.constraint(equalTo: topAnchor).isActive = true
lineView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
lineView.widthAnchor.constraint(equalToConstant: weight).isActive = true
case .right:
lineView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
lineView.topAnchor.constraint(equalTo: topAnchor).isActive = true
lineView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
lineView.widthAnchor.constraint(equalToConstant: weight).isActive = true
case .top:
lineView.topAnchor.constraint(equalTo: topAnchor).isActive = true
lineView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
lineView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
lineView.heightAnchor.constraint(equalToConstant: weight).isActive = true
case .bottom:
lineView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
lineView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
lineView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
lineView.heightAnchor.constraint(equalToConstant: weight).isActive = true
}
}
}
This sounds like one of two answers:
If your view is a static size, then just put a UIView behind it that is 2 pixels wider and 2 pixels shorter than your front view.
If it is non-static sized then you could do the same, resizing the backing view whenever your foreground view is resized, or implement a custom object that implements a UIView, and implement (override) your own drawRect routine.
NAUIViewWithBorders did the trick for me. See also the creator's SO post here. Worth checking out if you need this functionality for more than a couple views.
public extension UIView {
// Border type and arbitrary tag values to identify UIView borders as subviews
public enum BorderType: Int {
case left = 20000
case right = 20001
case top = 20002
case bottom = 20003
}
public func addBorder(borderType: BorderType, width: CGFloat, color: UIColor) {
// figure out frame and resizing based on border type
var autoresizingMask: UIViewAutoresizing
var layerFrame: CGRect
switch borderType {
case .left:
layerFrame = CGRect(x: 0, y: 0, width: width, height: self.bounds.height)
autoresizingMask = [ .flexibleHeight, .flexibleRightMargin ]
case .right:
layerFrame = CGRect(x: self.bounds.width - width, y: 0, width: width, height: self.bounds.height)
autoresizingMask = [ .flexibleHeight, .flexibleLeftMargin ]
case .top:
layerFrame = CGRect(x: 0, y: 0, width: self.bounds.width, height: width)
autoresizingMask = [ .flexibleWidth, .flexibleBottomMargin ]
case .bottom:
layerFrame = CGRect(x: 0, y: self.bounds.height - width, width: self.bounds.width, height: width)
autoresizingMask = [ .flexibleWidth, .flexibleTopMargin ]
}
// look for the existing border in subviews
var newView: UIView?
for eachSubview in self.subviews {
if eachSubview.tag == borderType.rawValue {
newView = eachSubview
break
}
}
// set properties on existing view, or create a new one
if newView == nil {
newView = UIView(frame: layerFrame)
newView?.tag = borderType.rawValue
self.addSubview(newView!)
} else {
newView?.frame = layerFrame
}
newView?.backgroundColor = color
newView?.autoresizingMask = autoresizingMask
}