百思不得姐数据挖掘第二篇

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

宣传视频

我们使用Mark Man标记一下

标记图

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

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

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

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

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

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

利用生成的类给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。

效果图

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

3141
来自专栏Web行业观察

移动前端兼容操作总结

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同...

2013
来自专栏进击的君君的前端之路

HTML5

5725
来自专栏IMWeb前端团队

滚动上报实现

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 最近产品说要在一个课程卡片列表页面中收集用户滚动行为的数据,大致是要获取用户...

2267
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

5347
来自专栏编程微刊

layer弹框在实际项目中的一些应用

2185
来自专栏iOS进阶开发

iOS开发UI篇--一个侧滑菜单SlidingMenu

侧滑菜单已经成为app一个极常用的设计,不管是事务类,效率类还是生活类app。侧滑菜单因Path 2.0和Facebook为开发者熟知,国内目前也有很多流行ap...

1182
来自专栏Material Design组件

Human Interface Guidelines —— Alerts

3738
来自专栏ionic3+

【组件篇】ionic3分组索引及锚点滚动列表

好久没有写文章了,趁着吃完饭消化的时候打算写一篇。先前一篇文章提到并关注的capacitor终于出到1.0.0-alpha.5了,本想写它,但是内容比较多,所以...

1702
来自专栏jojo的技术小屋

原 荐 svga 动画

作者:汪娇娇 时间:2017年12月26日 对于一些小的简单的动画,借助css、js差不多就能实现,而且还不能保证还原度百分百(还能接受); 对于那些复杂的动画...

7484

扫码关注云+社区

领取腾讯云代金券