Wayne Rumble Wayne Rumble - 3 months ago 17
iOS Question

Drawing a line from UILabel to UIImage

I am trying to draw a line from the bottom center of a label to the top center of an image programmatically but after much googling i cant figure out how. I have a for loop that is creating the images and labels that they point to and so need to write it to fit within this loop so that it creates all the lines associated with their label/image and positions them accordingly.

Here is the loop:

for i in 0..<hotspots.count {

let hotspotImageButton = UIButton(type: .Custom)
let hotspotTitleLabel = UILabel(frame: CGRect.zero)
let hotspotTextLabel = UILabel(frame: CGRect.zero)

hotspotImageButton.translatesAutoresizingMaskIntoConstraints = false
hotspotTitleLabel.translatesAutoresizingMaskIntoConstraints = false
hotspotTextLabel.translatesAutoresizingMaskIntoConstraints = false

let whiteHotspotImage = UIImage(named: hotspots[i].image)?.imageWithRenderingMode(.AlwaysTemplate)

hotspotImageButton.setImage(whiteHotspotImage, forState: .Normal)
hotspotImageButton.imageView?.tintColor = UIColor.redColor()
hotspotTitleLabel.text = hotspots[i].title
hotspotTextLabel.text = hotspots[i].text

hotspotTitleLabel.textColor = UIColor.whiteColor()
hotspotTitleLabel.font = UIFont(name: "Helvetica", size: 13)
hotspotTextLabel.textColor = UIColor.whiteColor()
hotspotTextLabel.font = UIFont(name: "Helvetica", size: 12)


standMapImage.addSubview(hotspotImageButton)
standMapImage.addSubview(hotspotTitleLabel)
standMapImage.addSubview(hotspotTextLabel)

hotspotImageButton.snp_makeConstraints { make in
make.leading.equalTo(standMapImage.snp_leadingMargin).multipliedBy(hotspots[i].hotspotXCoordinate)
make.top.equalTo(standMapImage.snp_topMargin).multipliedBy(hotspots[i].hotspotYCoordinate)
make.width.equalTo(standMapImage.snp_width).multipliedBy(0.1)
make.height.equalTo(hotspotImageButton.snp_width)
}

hotspotTitleLabel.snp_makeConstraints { make in
make.leading.equalTo(standMapImage.snp_leadingMargin).multipliedBy(hotspots[i].titleXCoordinate)
make.top.equalTo(standMapImage.snp_topMargin).multipliedBy(hotspots[i].titleYCoordinate)
}

hotspotTextLabel.snp_makeConstraints { make in
make.centerX.equalTo(hotspotTitleLabel.snp_centerX)
make.top.equalTo(hotspotTitleLabel.snp_bottom).inset(-4)
}

}


Picture of what im trying to achieve

Any help would be great as im fairly new to all of this and google didnt provide much for me.

Thanks for any help in advance.

Answer

Try This ...!

-(void)createLineFrom:(UILabel *)base andTo:(UIImageView*)view{

    CGPoint basePoint = CGPointMake(base.bounds.origin.x+base.bounds.size.width/2,base.bounds.origin.y+base.bounds.size.height/2);
    CGPoint bellonPoint = CGPointMake((view.frame.origin.x+view.frame.size.width/2),view.frame.origin.y+view.frame.size.height);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:basePoint];
    [path addLineToPoint:bellonPoint];

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [path CGPath];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.lineWidth = 2;
    shapeLayer.fillColor = [[UIColor redColor] CGColor];
    [self.layer addSublayer:shapeLayer];
    }
Comments