首先进入的是启动的界面，我们已经在上一篇做好了。第一次启动之后会出现一个宣传的视频，是下面的界面。

宣传视频

我们使用Mark Man标记一下

标记图

上面镶嵌视频的图片没有找到，应该是自己画的，或者使用的pdf格式的。经研究pdf格式的会自动生成对应的图片但是不会包含在安装包里面。

既然找不到，我们不如自己做一个简陋的，我们推荐使用PaintCode做这个图片。

我们图片尺寸是基于1242x2208截图。

我们做这个模板的时候可以分成两份，耳朵做成一个图片就固定的大小。下面的模板框设置成代码自动生成。

我们保存图片头部的模板为BVideoHeadTemplate.swift

我们新建一个类BFirstVideoViewController,放置视频头部图片命名为videoHeadImageView的UIImageView。

利用生成的类给videoHeadImageView赋值。

videoHeadImageView.image = BVideoHeadTemplate.imageOfVideoHead(videoHeadFrame: CGRect(x: 0, y: 0, width: KAppScreenWidth, height: 100))

我们想让启动图显示1.0秒之后显示这个视频的界面。

DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            let firstVideoViewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "BFirstVideoViewController")
            UIApplication.shared.windows.first!.rootViewController = firstVideoViewController
        }

写上面的代码遇到了一些问题

第一 GCD的代码书写在swift3.0发生了变化我利用dispatch_after根本打不出来，没办法就Google一下，变成了上面的样子。

第二 当我写UIApplication.shared.keyWindow?发现是不存在的，应该是没有用代码执行makeKeyWindow的缘故就直接从数组里面取第一个元素好了。

视频头部图片

我们接下来就是绘制视频载体的图片了，这个还是没什么难度的。

我们绘制完成保存文件为BVideoBodyTemplate.swift我们同样在BFirstVideoViewController类新建一个UIImageView对象为videoBodyImageView。

因为视频的载体高度是随着宽度变得，我们声明一个变量videoBodyHeightConstraint指向videoBodyImageView高度的约束

我们在BFirstVideoViewController声明一个计算真实高度的方法名称叫做calculateVideoBodyHeight（）。

/// 计算视频载体真实的高度
    ///
    /// - returns: CGFloat
    func calculateVideoBodyHeight() -> CGFloat {
        var videoBodyHeight:CGFloat = 0
        let videoBodyWidth = KAppScreenWidth - 20 //计算视频载体的宽度
        let videoWidth = videoBodyWidth - 24 // 计算视频的宽度
        let videoHeight = 360 / 640 * videoWidth // 计算视频的高度
        videoBodyHeight += 20 + videoHeight + 12 // 20为上面的空隙 + 视频的高度 + 12下面的空隙
        return videoBodyHeight
    }

我们给刚才的约束重新赋值，之后给videoBodyImageView赋值绘制的图片。

videoBodyHeightConstraint.constant = calculateVideoBodyHeight()
videoBodyImageView.image = BVideoBodyTemplate.imageOfVideoBody(width: KAppScreenWidth - 20)

我们新建一个UIView防止视频名称叫做videoView父试图是videoBodyImageView约束是下面。

约束的图片

我们防止进入APP主页面的按钮。设置成下面的样子。

本想想用@IBDesignable @IBInspectable两个属性声明圆角可以在StoryBoard修改的,但是一直不成功，查了一下资料只支持子类，不支持扩展。

下面是扩展的代码如下：

import UIKit
@IBDesignable
extension UIView {

    @IBInspectable var cornerRadius:CGFloat{
        get{
            return layer.cornerRadius
        }
        set{
            layer.masksToBounds = true
            layer.cornerRadius = newValue
        }

    }
}

不行我们就在BFirstVideoViewController进行设置。声明按钮的属性为accessButton。

accessButton.layer.masksToBounds = true
accessButton.layer.cornerRadius = 5

看着圆角有点小，我们修改为15。

效果图

现在剩下的功能就是自动播放视频了，下一篇继续。

此教程项目进度下载项目下载