首先進入的是啟動的界面羡忘，我們已經(jīng)在上一篇做好了谎痢。第一次啟動之后會出現(xiàn)一個宣傳的視頻，是下面的界面卷雕。

宣傳視頻

我們使用Mark Man標記一下

標記圖

上面鑲嵌視頻的圖片沒有找到节猿，應(yīng)該是自己畫的，或者使用的pdf格式的漫雕。經(jīng)研究pdf格式的會自動生成對應(yīng)的圖片但是不會包含在安裝包里面滨嘱。

既然找不到，我們不如自己做一個簡陋的蝎亚，我們推薦使用PaintCode做這個圖片九孩。

我們圖片尺寸是基于1242x2208截圖。

我們做這個模板的時候可以分成兩份发框，耳朵做成一個圖片就固定的大小躺彬。下面的模板框設(shè)置成代碼自動生成。

我們保存圖片頭部的模板為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發(fā)生了變化我利用dispatch_after根本打不出來铣减，沒辦法就Google一下她君，變成了上面的樣子。

第二 當(dāng)我寫UIApplication.shared.keyWindow?發(fā)現(xiàn)是不存在的葫哗，應(yīng)該是沒有用代碼執(zhí)行makeKeyWindow的緣故就直接從數(shù)組里面取第一個元素好了缔刹。

視頻頭部圖片

我們接下來就是繪制視頻載體的圖片了球涛，這個還是沒什么難度的。

我們繪制完成保存文件為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主頁面的按鈕引谜。設(shè)置成下面的樣子牍陌。

本想想用@IBDesignable @IBInspectable兩個屬性聲明圓角可以在StoryBoard修改的,但是一直不成功，查了一下資料只支持子類员咽，不支持擴展毒涧。

下面是擴展的代碼如下：

import UIKit
@IBDesignable
extension UIView {

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

    }
}

不行我們就在BFirstVideoViewController進行設(shè)置。聲明按鈕的屬性為accessButton骏融。

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

看著圓角有點小链嘀，我們修改為15萌狂。

效果圖

現(xiàn)在剩下的功能就是自動播放視頻了档玻，下一篇繼續(xù)。

此教程項目進度下載項目下載