Ios Swift：如何制作一个黑屏来指导用户使用应用程序

我正在使用swift 1.2。 我需要为用户创建使用我的应用程序的指南。 它看起来像：一个黑色的透明屏幕，1个按钮加亮，并注明如何使用，它是什么

我一直在寻找解决办法，但还是被卡住了。 有人能帮我吗

---

谢谢

我现在看到问题了，你可以在上面添加UView，用alpha给它一个颜色，然后用

convertRect(button.frame, toView:overlayView)

---

希望有助于

如果我正确理解了你想要什么，可以这样做*：

class TutorialView : UIView
{
    override init(frame: CGRect)
    {
        super.init(frame: frame)
        self.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.5)
    }

    convenience init()
    {
        self.init(frame: CGRectZero)
    }

    required init?(coder aDecoder: NSCoder)
    {
        fatalError("init(coder:) has not been implemented")
    }

    func showFromWindow()
    {
        let window = UIApplication.sharedApplication().keyWindow!
        self.translatesAutoresizingMaskIntoConstraints = false

        window.addSubview(self)

        window.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[tutorialView]-0-|", options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: nil, views: ["tutorialView": self]))
        window.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[tutorialView]-0-|", options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: nil, views: ["tutorialView": self]))
    }

    func addCommentToTopRightItem(comment: String, afterDelay: NSTimeInterval)
    {
        let topMargin : Int32 = 54
        let rightMargin : Int32 = 24
        let height : Int32 = 100

        // we need two views - one for arrow and second for text

        let commentLabel = UILabel()
        let arrowView = UIView()

        commentLabel.translatesAutoresizingMaskIntoConstraints = false
        arrowView.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(commentLabel)
        self.addSubview(arrowView)

        // setup layout for views

        //       |^^^^^|
        // |^^^^^|arrow|
        // |label|_____|
        // |_____|
        //
        // we place center of Y label to the bottom of arrow view
        // to an arrow coming out of the middle of text

        let metrics = ["topmargin" : NSNumber(int: topMargin), "rightmargin": NSNumber(int: rightMargin),"height" : NSNumber(int: height)]
        let views = ["label": commentLabel, "arrow": arrowView]

        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-topmargin-[arrow(==height)]", options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: metrics, views: views))
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[label(==height)]", options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: metrics, views: views))
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-rightmargin-[arrow(==height)]-[label]-0-|", options: NSLayoutFormatOptions.DirectionRightToLeft, metrics: metrics, views: views))
        self.addConstraint(NSLayoutConstraint(item: commentLabel, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: arrowView, attribute: NSLayoutAttribute.Bottom, multiplier: 1.0, constant: 1.0))

        // configure text label

        commentLabel.textColor = UIColor.whiteColor()
        commentLabel.numberOfLines = 0
        commentLabel.textAlignment = NSTextAlignment.Right
        commentLabel.font = UIFont(name: "HelveticaNeue-Light", size: 16)
        commentLabel.text = comment

        // configure arrow view

        self.layoutIfNeeded()

        let d : CGFloat = min(arrowView.frame.size.height, arrowView.frame.size.width)

        // draw arc line from {0, 1} to {1, 0}

        // | /|
        // |/_|

        let linePath = UIBezierPath()
        linePath.moveToPoint(CGPointMake(0, d))
        linePath.addCurveToPoint(CGPointMake(d, 0), controlPoint1: CGPointMake(d*0.5, d), controlPoint2: CGPointMake(d, d*0.5))
        let lineLayer = CAShapeLayer()
        lineLayer.path = linePath.CGPath
        lineLayer.strokeColor = UIColor.redColor().CGColor
        lineLayer.backgroundColor = UIColor.clearColor().CGColor
        lineLayer.fillColor = UIColor.clearColor().CGColor
        lineLayer.lineWidth = 2

        // draw triangle near {1, 0} point

        let trianglePath = UIBezierPath()
        trianglePath.moveToPoint(CGPointMake(d, 0))
        trianglePath.addLineToPoint(CGPointMake(d - 5, 15))
        trianglePath.addLineToPoint(CGPointMake(d + 5, 15))
        trianglePath.closePath()
        let triangleLayer = CAShapeLayer()
        triangleLayer.path = trianglePath.CGPath
        triangleLayer.strokeColor = UIColor.redColor().CGColor
        triangleLayer.backgroundColor = UIColor.clearColor().CGColor
        triangleLayer.fillColor = UIColor.redColor().CGColor
        triangleLayer.lineWidth = 2

        // line + triangle = arrow :)

        arrowView.layer.addSublayer(lineLayer)
        arrowView.layer.addSublayer(triangleLayer)

        arrowView.alpha = 0.0
        commentLabel.alpha = 0.0

        UIView.animateWithDuration(0.8, delay: afterDelay, options: UIViewAnimationOptions.AllowAnimatedContent, animations:
        { () -> Void in

            arrowView.alpha = 1.0
            commentLabel.alpha = 1.0
        }, completion: nil)
    }

    func addButton(title: String, highlighteAfterDelay: NSTimeInterval)
    {
        // same as before

        let button = UIButton()

        button.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(button)

        self.addConstraint(NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 1.0))
        self.addConstraint(NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Bottom, multiplier: 1.0, constant: -20.0))
        self.addConstraint(NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 120.0))
        self.addConstraint(NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 40.0))

        button.setTitle(title, forState: UIControlState.Normal)
        button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
        button.layer.cornerRadius = 20.0
        button.layer.masksToBounds = false
        button.layer.borderWidth = 1.0
        button.layer.borderColor = UIColor.whiteColor().CGColor
        button.layer.shadowColor = UIColor.whiteColor().CGColor
        button.layer.shadowOpacity = 0.4
        button.layer.shadowRadius = 4
        button.layer.shadowOffset = CGSizeMake(0, 0)

        button.alpha = 0.2
        button.enabled = false

        UIView.animateWithDuration(0.8, delay: highlighteAfterDelay, options: UIViewAnimationOptions.AllowAnimatedContent, animations:
        { () -> Void in

            button.alpha = 1.0
            button.enabled = true
        }, completion: nil)
    }
}

在某些视图控制器中：

let tutorial = TutorialView()
tutorial.showFromWindow()

tutorial.addCommentToTopRightItem("Tap this button to do something amazing action!", afterDelay: 1.0)
tutorial.addButton("Done", highlighteAfterDelay: 3.0)

结果:

---

*我没有1.2版的编译器，但我认为应该没有严重的区别。

为什么要使用swift 1.2而不是2？这是一个有点不具建设性的问题，有很多方法可以做到吗？你试过什么？如果您想在viewController顶部有一个透明的屏幕，请使用UIWindow，因为我的项目很久以前就写了，请使用swift 1.2，当我尝试使用2.0时，它会显示许多错误。我没有努力修复这些问题，所以我一直使用1.2。在顶部添加一个透明屏幕很容易，但我需要突出显示一个按钮功能，并为用户一步一步地显示指南：）