Sketch iOS Design
You recreate the objects in the interface builder.
You change the background colour of the view to the background colour of your design.
Save your button images and set them to the background images of buttons.
etc.
How do you draw a line programmatically from a view controller?
There are two common techniques.
Using
CAShapeLayer
:Create a
UIBezierPath
(replace the coordinates with whatever you want):UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10.0, 10.0)];
[path addLineToPoint:CGPointMake(100.0, 100.0)];Create a
CAShapeLayer
that uses thatUIBezierPath
:CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];Add that
CAShapeLayer
to your view's layer:[self.view.layer addSublayer:shapeLayer];
In previous versions of Xcode, you had to manually add QuartzCore.framework to your project's "Link Binary with Libraries" and import the
<QuartzCore/QuartzCore.h>
header in your .m file, but that's not necessary anymore (if you have the "Enable Modules" and "Link Frameworks Automatically" build settings turned on).The other approach is to subclass
UIView
and then use CoreGraphics calls in thedrawRect
method:Create a
UIView
subclass and define adrawRect
that draws your line.You can do this with Core Graphics:
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [[UIColor blueColor] CGColor]);
CGContextSetLineWidth(context, 3.0);
CGContextMoveToPoint(context, 10.0, 10.0);
CGContextAddLineToPoint(context, 100.0, 100.0);
CGContextDrawPath(context, kCGPathStroke);
}Or using
UIKit
:- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10.0, 10.0)];
[path addLineToPoint:CGPointMake(100.0, 100.0)];
path.lineWidth = 3;
[[UIColor blueColor] setStroke];
[path stroke];
}Then you can either use this view class as the base class for your NIB/storyboard or view, or you can have your view controller programmatically add it as a subview:
PathView *pathView = [[PathView alloc] initWithFrame:self.view.bounds];
pathView.backgroundColor = [UIColor clearColor];
[self.view addSubview: pathView];
The Swift renditions of the two above approaches are as follows:
CAShapeLayer
:// create path
let path = UIBezierPath()
path.move(to: CGPoint(x: 10, y: 10))
path.addLine(to: CGPoint(x: 100, y: 100))
// Create a `CAShapeLayer` that uses that `UIBezierPath`:
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.blue.cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 3
// Add that `CAShapeLayer` to your view's layer:
view.layer.addSublayer(shapeLayer)UIView
subclass:class PathView: UIView {
var path: UIBezierPath? { didSet { setNeedsDisplay() } }
var pathColor: UIColor = .blue { didSet { setNeedsDisplay() } }
override func draw(_ rect: CGRect) {
// stroke the path
pathColor.setStroke()
path?.stroke()
}
}And add it to your view hierarchy:
let pathView = PathView()
pathView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(pathView)
NSLayoutConstraint.activate([
pathView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
pathView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
pathView.topAnchor.constraint(equalTo: view.topAnchor),
pathView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
pathView.backgroundColor = .clear
let path = UIBezierPath()
path.move(to: CGPoint(x: 10, y: 10))
path.addLine(to: CGPoint(x: 100, y: 100))
path.lineWidth = 3
pathView.path = pathAbove, I'm adding
PathView
programmatically, but you can add it via IB, too, and just set itspath
programmatically.
Related Topics
Xcode Reference a Framework Instead of Link Binary with Libraries
Populating Input Text Field in Wkwebview
How to Make a Countdown Timer Like in a Music Player
Ar Refernce Image Plane Was Not Position Properly in iOS Swift
Creating a First Launch Viewcontroller
Is Calling Cellforrowatindexpath: Ever Practical
Trim End Off of String in Swift, Getting Error at Runtime
How to Get Path to a Subfolder in Main Bundle
Simulator Vs Physical Device: Navigationlink Broken After One Use
Why Is Optional("Text") - Swift
Using String.Characterview.Index.Successor() in for Statements
Passing Arguments to @Selector Method
iOS UIlabel Autoshrink So Word Doesn't Truncate to Two Lines
Go Back to View Controller from Skscene
Can't Write Non Current User Objects by Pfuser Currentuser
How to Rotate a UIview Without The Black Bars
How to Configure Threshold/Distance When Swiping on Uitableviewcell