-1

I want to create a vertical dotted line using Objective-C. Genuine dotted line, not dashed line. And also want to add gradient color. How to proceed?

The Answer :

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

//At first, draw a gradient line
CAGradientLayer *gLayer = [CAGradientLayer layer];
gLayer.frame = CGRectMake(50, 50, 10, 200);
gLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                  (__bridge id)[UIColor greenColor].CGColor];
[self.view.layer addSublayer:gLayer];

//Then, create a path for dots
CGMutablePathRef dotPath = CGPathCreateMutable();
UIBezierPath *part1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 10, 10)];
UIBezierPath *part2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 15, 10, 10)];
UIBezierPath *part3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 30, 10, 10)];
UIBezierPath *part4 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 45, 10, 10)];
UIBezierPath *part5 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 60, 10, 10)];
UIBezierPath *part6 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 75, 10, 10)];
UIBezierPath *part7 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 90, 10, 10)];
UIBezierPath *part8 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 105, 10, 10)];
UIBezierPath *part9 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 120, 10, 10)];
UIBezierPath *part10 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 135, 10, 10)];
CGPathAddPath(dotPath, nil, part1.CGPath);
CGPathAddPath(dotPath, nil, part2.CGPath);
CGPathAddPath(dotPath, nil, part3.CGPath);
CGPathAddPath(dotPath, nil, part4.CGPath);
CGPathAddPath(dotPath, nil, part5.CGPath);
CGPathAddPath(dotPath, nil, part6.CGPath);
CGPathAddPath(dotPath, nil, part7.CGPath);
CGPathAddPath(dotPath, nil, part8.CGPath);
CGPathAddPath(dotPath, nil, part9.CGPath);
CGPathAddPath(dotPath, nil, part10.CGPath);

//Finally, set mask layer to the gradient line
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = dotPath;
[gLayer setMask:maskLayer];
}
Surya Narayan Barik
  • 143
  • 7
  • [This](http://stackoverflow.com/questions/26018302/draw-dotted-not-dashed-line/31698463#31698463) may help. – Gokul G Aug 23 '16 at 07:22

1 Answers1

0

I just write a sample according to you description, all the dots is created by UIBezierPath, you can just change anything you want, take a look:

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

//At first, draw a gradient line
CAGradientLayer *gLayer = [CAGradientLayer layer];
gLayer.frame = CGRectMake(50, 50, 10, 200);
gLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                  (__bridge id)[UIColor greenColor].CGColor];
[self.view.layer addSublayer:gLayer];

//Then, create a path for dots
CGMutablePathRef dotPath = CGPathCreateMutable();
UIBezierPath *part1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 10, 10)];
UIBezierPath *part2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 15, 10, 10)];
UIBezierPath *part3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 30, 10, 10)];
UIBezierPath *part4 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 45, 10, 10)];
UIBezierPath *part5 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 60, 10, 10)];
UIBezierPath *part6 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 75, 10, 10)];
UIBezierPath *part7 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 90, 10, 10)];
UIBezierPath *part8 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 105, 10, 10)];
UIBezierPath *part9 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 120, 10, 10)];
UIBezierPath *part10 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 135, 10, 10)];
CGPathAddPath(dotPath, nil, part1.CGPath);
CGPathAddPath(dotPath, nil, part2.CGPath);
CGPathAddPath(dotPath, nil, part3.CGPath);
CGPathAddPath(dotPath, nil, part4.CGPath);
CGPathAddPath(dotPath, nil, part5.CGPath);
CGPathAddPath(dotPath, nil, part6.CGPath);
CGPathAddPath(dotPath, nil, part7.CGPath);
CGPathAddPath(dotPath, nil, part8.CGPath);
CGPathAddPath(dotPath, nil, part9.CGPath);
CGPathAddPath(dotPath, nil, part10.CGPath);

//Finally, set mask layer to the gradient line
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = dotPath;
[gLayer setMask:maskLayer];
}

Hope it can help you.

Alanc Liu
  • 1,294
  • 10
  • 15
  • Glad to help you, could you mark this as the answer if it solved your issue :) , then the others can know it can help them too. – Alanc Liu Aug 23 '16 at 15:59