aleksandrshoshiashvili / AwesomeSpotlightView

Awesome tool for create tutorial walkthrough or coach tour
MIT License
320 stars 31 forks source link

Add Imageviews #4

Open hablema opened 7 years ago

hablema commented 7 years ago

Adding Imageview or images together with the text would be an awesome addition to the library. Thanks for the great library.

4tune commented 2 years ago

Actually, you can achieve that functionality with delegate. Just add UIImageView to AwesomeSpotlightView on creating: `

spotlightView = AwesomeSpotlightView(frame: view.frame, spotlight: spotlights)
spotlightView?.textLabelFont = UIFont.systemFont(ofSize: 18, weight: .semibold)
spotlightView?.cutoutRadius = 16
spotlightView?.delegate = self
spotlightView?.spotlightMaskColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.55)
spotlightViewImage.contentMode = .scaleAspectFit
spotlightViewImage.frame = CGRect(x: view.frame.midX - 40, y: view.frame.midY - 50, width: 80, height: 100)
spotlightView?.addSubview(spotlightViewImage)
if let spotlightView = spotlightView {
    view.addSubview(spotlightView)
    spotlightView.start()
}

`

Then in delegate change images: `

extension BudgetsListViewController: AwesomeSpotlightViewDelegate {
    func spotlightView(_ spotlightView: AwesomeSpotlightView, willNavigateToIndex index: Int) {
        spotlightViewImage.alpha = 0
    }

    func spotlightView(_ spotlightView: AwesomeSpotlightView, didNavigateToIndex index: Int) {
        UIView.animate(withDuration: spotlightView.animationDuration) {
            if index == 0 {
                self.spotlightViewImage.image = UIImage(named: "ic_budgets_tutorial_swipe")
                self.spotlightViewImage.frame = CGRect(x: spotlightView.textLabel.frame.midX - 40, y:  spotlightView.textLabel.frame.maxY + 20, width: 80, height: 100)
            } else if index == 1 {
                self.spotlightViewImage.image = UIImage(named: "ic_budgets_tutorial_tap")
                self.spotlightViewImage.frame = CGRect(x: spotlightView.textLabel.frame.midX - 40, y:  spotlightView.textLabel.frame.maxY + 20, width: 80, height: 100)
            }
            self.spotlightViewImage.alpha = 1
        }

    }
}

`