最近一直在学习Swift,平时比较喜欢看短视频之类的,于是就仿写了开眼,加强自己对Swift的掌握。在这个工程中,主要分为四个部分,分别是精选模块,发现模块,关注模块和我的模块,由于有些数据没有获取到,就直接通过一个“The End”页面展示,还有就是没有做登录的功能。话不多说,先看看效果图吧!
![](https://img.haomeiwen.com/i3825020/29e7130110005140.png)
构建根控制器,添加页面模块功能
主要由三个根控制器组成,RootTabBarController、RootNavigationController、BaseViewController:
![](https://img.haomeiwen.com/i3825020/91be590b4a2a1c9d.png)
RootTabBarController主要是负责添加子控制器以及根据版本号选择展示新特性还是欢迎界面,而RootNavigationController主要设置关于导航栏的一些共同的特性。其次就是BaseViewController,它是所有类的基类,主要封装下拉刷新和上拉刷新的功能,大致的代码如下:
func setUpTableView() -> () {
tableView.frame = CGRect(x: 0, y: 0, width: view.bounds.size.width, height: view.bounds.size.height)
tableView.separatorStyle = .none
tableView.delegate = self
tableView.dataSource = self
tableView.separatorStyle = .none
view.insertSubview(tableView, belowSubview: navigationBar)
refreshing = refreshState.StateNormal
//添加监听者,监听contentOffset的变化,设置下拉刷新河上拉加载
tableView.addObserver(self, forKeyPath: RefreshViewObserveKeyPath, options: NSKeyValueObservingOptions.new, context: nil)
headerView.frame = CGRect(x: (navigationBar.bounds.width - 42)/2, y: -42, width: 42, height: 28)
footerView.isHidden = true
tableView.addSubview(headerView)
tableView.addSubview(footerView)
}
在这个App中页面的布局主要分为三种形式,如下图所示,因此我分别通过不同的视图来实现,VideoCell对应图片01,NormalScrollView对应图片02,PageScrollView对应图片03。其中更加细节,包括“全部分类”、“全部作者”等模块的实现流程,在工程都通过代码和注释讲到,这里就不再细说了。
![](https://img.haomeiwen.com/i3825020/63bec59bf02b1a49.png)
![](https://img.haomeiwen.com/i3825020/df81c1fa2fd3b43b.png)
![](https://img.haomeiwen.com/i3825020/7b57d3797a54c346.png)
添加视频播放功能
视频播放主要包括以下几个对象:
1.AVPlayerItem 一个媒体资源管理对象,管理者视频的一些基本信息和状态,如 播放进度、缓存进度等 , 一个AVPlayerItem对应着一个视频资源。
2.AVPlayer 视频操作对象,但是无法显示视频,需要把自己添加到一个AVPlayerLayer 上
3.AVPlayerLayer 用来显示视频的
除此之外,还需要对视频播放过程中的一些状态进行监听,大致代码如下:
//监听缓冲进度改变&&监听状态改变
playerItem?.addObserver(self, forKeyPath: "loadedTimeRanges", options: NSKeyValueObservingOptions.new, context: nil)
playerItem?.addObserver(self, forKeyPath: "status", options: NSKeyValueObservingOptions.new, context: nil)
视频在播放过程中是支持横屏和竖屏的,如下图所示:
![](https://img.haomeiwen.com/i3825020/29b7c08ee3d4aca9.png)
![](https://img.haomeiwen.com/i3825020/4777c4bb4b0608d3.png)
因此,我是通过transform,也就是旋转视频视图达到此效果的,但是在旋转过程中,视图是以中心点旋转的,也就是说当旋转成横屏时有一部分会视图会超过边界,因此我通过改变锚点来移动视图(视频播放的横竖屏切换是通过点击按钮实现的,并不支持直接通过旋转手机实现)。大致代码如下所示:
func showLandscapeLeft(anchorPointX: CGFloat) -> () {
barView?.isHidden = true
videoPlayView?.layer.anchorPoint = CGPoint(x: anchorPointX / 10, y: 0.5)
videoPlayView?.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))
videoPlayView?.bounds = CGRect(x: 0, y: 0, width: screenH, height: screenW)
}
func showPortrait() -> () {
barView?.isHidden = false
videoPlayView?.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
videoPlayView?.transform = CGAffineTransform.identity
videoPlayView?.bounds = CGRect(x: 0, y: 0, width: screenW, height: (screenH / 3))
}
嗯~~~好了,差不多就这些了,源码地址如下(感觉还有很多很多小问题😢),欢迎star:
https://github.com/Upika/UPEyePetizer
网友评论