ios - swift : How to make a Black screen to guidelines for user to use app

Question

我使用的是 swift 1.2。我需要为用户创建一个使用我的应用程序的指南。它看起来像:黑色透明屏幕，1 个按钮突出显示，并附有说明如何使用，它是什么。

我一直在寻找解决方案，但仍然卡住了。谁能帮帮我？

谢谢!

Answer 1

如果我理解正确你想要什么，它可以做这样的事情*:

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)
    }
}

在一些 View Controller 中:

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 版的编译器，但我认为应该没有太大区别。