博客> 一行代码搞定:下拉放大图片, 导航栏颜色渐变, 添加子控制器, 左右滑动同时切换按钮
一行代码搞定:下拉放大图片, 导航栏颜色渐变, 添加子控制器, 左右滑动同时切换按钮
2017-08-18 16:10 评论:0 阅读:76 r17
iOS开发轮子 OC开发工具 一行代码搞定

转载请注明本文地址: http://blog.cocoachina.com/article/56319

目的

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

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

一、使用方法

创建WHAddVC控制器的代码如下

// 一行代码创建WHAddVC
WHAddVC *addVC = [WHAddVC addVCWithTitle:@"TEST" topImage:[UIImage imageNamed:@"test"] chooseTitles:@[@"One",@"Two",@"Three"] chooseControllers:@[@"FirstViewController",@"SecondViewController",@"ThirdViewController"]];

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

/**
 快速创建WHAddVC

 @param title 导航栏标题
 @param topImage 顶部图片
 @param chooseTitles 中间三个按钮的文字(字符串数组)
 @param chooseControllers 三个控制器名字(字符串数组)
 @return WHAddVC
 */
+ (WHAddVC *)addVCWithTitle:(NSString *)title topImage:(UIImage *)topImage chooseTitles:(NSArray *)chooseTitles chooseControllers:(NSArray *)chooseControllers;

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

/** 顶部图片模糊效果,YES模糊,NO不模糊,默认不模糊 */
@property (nonatomic, assign) BOOL blur;

你可以这样操作:

// 一行代码创建WHAddVC
WHAddVC *addVC = [WHAddVC addVCWithTitle:@"TEST" topImage:[UIImage imageNamed:@"test"] chooseTitles:@[@"One",@"Two",@"Three"] chooseControllers:@[@"FirstViewController",@"SecondViewController",@"ThirdViewController"]];

// 设置blur属性,给顶部图片添加模糊效果
 addVC.blur = YES;

二、核心代码

1. 下拉放大图片

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


// 添加手势,可以做到上滑下滑
- (void)addPanGesture {
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self.view addGestureRecognizer:pan];
}

// 手势方法
- (void)pan:(UIPanGestureRecognizer *)pan {
    // 拿到滑动点
    CGPoint movePoint = [pan translationInView:pan.view];
    [pan setTranslation:CGPointZero inView:pan.view];

    // 更新图片的高度
    [_imageView mas_updateConstraints:^(MASConstraintMaker *make) {
        // 得到图片底部距离控制器顶部的距离
        CGFloat delta = _imageView.frame.size.height + movePoint.y;
        // 为了不遮挡导航栏,delta>=64
        if (delta <= 64) {
            delta = 64;
        }
        // 上推缩短图片,下拉放大图片
        make.height.mas_equalTo(delta);
    }];

    CGFloat maxValue = 200;
    CGFloat minValue = 64;
    CGFloat ratio = (_imageView.frame.size.height - 64) / (maxValue - minValue);

    // 根据滑动距离得到的比例来控制导航栏的颜色和透明度
    if (_imageView.frame.size.height<200 xss=removed xss=removed xss=removed xss=removed delta<=200) xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> 1. [WHAddVC](https://github.com/remember17/WHAddVC)下载之后,把WHAddVC文件夹拖入工程即可直接使用。
> 2. 注意!需要用到Masonry,请自行把Masonry导入工程
> 3. 推荐简单又好用的分类集合:[WHKit](http://www.jianshu.com/p/c935314b078e) 

#### github地址:[https://github.com/remember17](https://github.com/remember17) 

另一个博客地址:[ http://www.jianshu.com/p/187c53796a8a ](http://www.jianshu.com/p/187c53796a8a)
收藏
0
sina weixin mail 回到顶部