iOS开发仿【喵播】之快速集成tableView头部缩放视图+视图为模糊效果

最近在仿喵播做一个视频直播APP,demo基本已经完成,目前在做视频直播聊天室方面的东西,在模仿的过程中遇到很多问题,在解决问题的过程中也学到了很多。仿喵播系列今天先聊一聊快速集成tableView头部缩放视图+视图为模糊效果

  • gif图片展示:

仿喵播个人界面.gif

制作的gif文件在这上面看着不够清晰,有晕影;但实际上是很清晰,效果很好。gif文件是用LICEcap Mac版制作的,点击链接下载安装。

LICEcap使用方法:
  • 打开LICEcap软件,它的界面是一个透明的窗口。
  • 点击“Record”后,我们选择GIF文件的保存位置,然后进入3秒倒计时。
  • 点击“Stop”完成录屏。

快速集成tableView头部缩放视图

所谓快速集成即一行代码集成tableView头部缩放视图,这里用的是袁峥Seemygo大牛开源的一个小巧轻便的框架YZHeaderScaleImage,试了一些方法,但是对于喵播这种的tableView头部缩放,这个 YZHeaderScaleImage完全够用。

  • YZHeaderScaleImage使用:

1、导入YZHeaderScaleImage

  • 直接下载源码,然后将UIScrollView+HeaderScaleImage.hUIScrollView+HeaderScaleImage.m文件拖到工程中。
  • 使用cocoapods导入
pod 'YZHeaderScaleImage'
pod install
  • 在需要的项目文件中添加#import "UIScrollView+HeaderScaleImage.h"导入头文件。
  • tableView或者scrollView都可以使用
  • 设置了tableView头部视图,一定记得清空头部视图背景颜色
 - (void)viewDidLoad {
        [super viewDidLoad];
        // 设置tableView头部缩放图片 *一行代码就集成了*
        self.tableView.yz_headerScaleImage = [UIImage imageNamed:@"header"];
        // 设置tableView头部视图,必须设置头部视图背景颜色为clearColor,否则会被挡住
        
        UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 200)];
        // 清空头部视图背景颜色
        headerView.backgroundColor = [UIColor clearColor];
        self.tableView.tableHeaderView = headerView;
}

上面是大牛给的试例,从上面的例子中可以看到headerView的高度设置的是200,看他的源码里面默认的高度也是200,如果你想修改headerView的高度,你需要在源码中修改,即UIScrollView+HeaderScaleImage.m文件中修改第88行代码,如下图:

395708A5-D68E-41F6-875D-970D3A811104.png

tableView头部缩放图片就是这么简单。下面介绍如何给headerView添加模糊效果。

如果你用过喵播APP你会知道每当你点进一个房间在视频还没有加载出来之前,会有一个加载界面,喵播用的是一个加载动画和一张具有模糊效果的图片,关于iOS添加图片模糊效果的方法,可以看iOS效果---模糊效果汇总这篇文章,里面详细列出了各种方法。比较了上面的几种方法,我在仿喵播的demo中加载视频时的图片模糊效果,用的是FXBlurView第三方开源库。代码量很少,用着极方面。至于现在说的headerView模糊效果我用的是里面提到storyboard实现模糊效果

在实现tableView头部图片缩放以后,本来想继续用FXBlurView实现headerView的模糊效果,尝试了修改YZHeaderScaleImage源码加FXBlurView框架的方式达到目的,界面走了很多弯路,会出现很神奇的效果,有兴趣的朋友可以试试看看。如果可以实现请告诉我实现方法,感激不尽。因为的headerView是用xib实现的,所以在折腾了大半天后还是放弃,改用storyboard+YZHeaderScaleImage方式实现。仅仅添加了一个UIVisualEffectView,如图:

AB39949A-D10D-406E-991D-F6C6304FA0AF.png

注意:
1、VisualEffectView和其他控件的层级关系
2、VisualEffectView的起始Y值,我设置到-200是为了避免上下拉伸tableView的时候出现VisualEffectView覆盖不到背景图片的情况,实践一下便知。
3、
41FE73D2-6BBC-424A-B68E-5ACC6501F92A.png
这里可以设置不同的模糊效果。
最终就完成了快速集成tableView头部图片缩放效果和headerView的模糊效果。如果您有更好的方法可以留言告知,感激不尽。后续还会继续跟新iOS开发仿喵播系列,关于直播和直播聊天室的功能后续会慢慢更。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容