一行代码搞定的控制器

本文要跟大家分享的是一个带有多种效果的控制器,仅需一行代码即可创建。
这个控制器通过下拉可以放大顶部图片,上推可以使导航栏的颜色渐变,并且添加了三个子控制器,页面中间的三个按钮用来切换,当然,你也可以通过左右滑动来切换子控制器。
代码的下载地址:WHAddVC
接下来会分两点来说,一个是使用方法(超简单),第二个是核心代码的解读。
先来看看gif效果。
example.gif

注意:使用了Masonry,请自行在项目中导入Masonry

一、使用方法

创建WHAddVC控制器的代码如下

下面是更加详细的对于每个参数说明

其中数组chooseControllers需要是已经创建好了的三个控制器的名字,字符串形式,方法里会根据传入的字符串自动转换为类,自动初始化控制器并加入到下方可滑动切换的界面里。
WHAddVC还带有一个BOOL类型的属性可供设置。

你可以这样操作:

二、核心代码

1. 下拉放大图片

可以结合下面的代码和注释。
要做到下拉放大图片,我的思路是修改图片的高度约束。利用pan拖拽手势拿到滑动的点,从而拿到滑动时图片底部距离控制器顶部的距离delta,把图片高度约束更新为delta,如果delta大于图片高度,在更新约束的时候图片会跟着放大。
当停止拖拽,判断一下delta的高度,如果依然大于初始高度,则再次更新约束把图片复位。这就是放大的图片在放手的时候会自动恢复的原因。

2. 导航栏颜色渐变

结合下面的代码和注释来解读。
首先,导航栏背景和标题文字初始化都为透明。请查看WHAddVC代码里的setInit方法。接着利用drawRect方法自定义一个导航栏视图(WHNavView)来充当导航栏。
设计两个属性naviBarAlpha和barRenderValue,用来控制颜色和透明度。然后就根据pan手势拖拽的距离,计算出一个比例ratio,在ratio动态改变的时候,根据ratio来改变naviBarAlpha和barRenderValue的值,最后,利用setNaviBarAlpha和setBarRenderValue方法使导航栏颜色渐变。

3. 添加子控制器

如下图,WHAddVC下面的三个按钮里并不是三张图片,而是三个子控制器,每个控制器都是单独出来的UIViewController。代码在图片后面。
子控制器.png

4. 左右滑动的同时切换按钮

之所以能够通过左右滑动来切换控制器,是用了一个UIScrollView,在ScrollView中添加一个View来撑开scrollView,这个View的宽度刚好是三个scrollView的宽度。
重点在这里:在scrollViewDidScroll方法中,把ScrollView滑动的x轴距离的三分之一传给chooseView。然后在WHChooseView.m的setOffsetX方法里改变按钮的选中状态。
根据偏移的距离来更新按钮下方线条的约束,并且改变按钮的选中状态。
集体操作可以下载代码WHAddVC

后记

  1. WHAddVC下载之后,把WHAddVC文件夹拖入工程即可直接使用。
  2. 注意!需要用到Masonry,请自行把Masonry导入工程
  3. 推荐简单又好用的分类集合:WHKit

github地址:https://github.com/remember17