iOS-仿QQ下拉效果

现在在很多的App中都可以看见类似这样的效果：

g.gif

分析：

• 实现这样的效果我们需要考虑如下几个问题：

• 1.用什么控件实现这样效果？

• 2.怎么样实现导航栏的颜色的变化

• 3.上下滑动的时候，怎么实现图片的尺寸的变化

• a.对于第一点，我们可以看见下面是用UITableView来实现的，首先会想到上面的图片放到cell中，但拖动cell的时候上面的图片很难保持在顶部

• b.导航栏用原生的导航栏，很难控制，因为原生的导航栏里包含了许多的控件，所以这里我们用自定义导航栏来实现

• c.上下滑动的时候通过其偏移量，来计算图片的尺寸的变化

下面我们来实现：

• 第一步：
  • 创建自定的导航栏，这里我自定义了一个类来实现：
  • 初始状态下的导航栏是透明的

 BPCustomNavBar *nav = [[BPCustomNavBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
    nav.title = @"风景如画";
    nav.titleColor = [UIColor whiteColor];
    nav.leftImage = @"back_icon";
    nav.rightImage = @"share_icon";
    nav.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.f];
    [self.view addSubview:nav];
    self.navBar = nav;

• 第二步：
  • 创建图片：

//创建背景图片
    self.bgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2"]];
    self.bgView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width*0.8);
    self.originalFrame = self.bgView.frame;
    [self.view addSubview:self.bgView];

• 第三步：
  • 创建下面部分的UITableView
  • 因tableView也可以滑动到上面，所有其y值，应该是导航栏的高度，但这样就挡住了背景的图片，所以我们需要创建tableView的头部是视图，将其背景色clear这样就可以达到要求：

//新建UItableView
    UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
    table.backgroundColor = [UIColor clearColor];
    table.delegate = self;
    table.dataSource = self;
    [self.view addSubview:table];
    self.tableView = table;
    
    //添加头部
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, headHeight)];
    headerView.backgroundColor = [UIColor clearColor];
    self.tableView.tableHeaderView = headerView;

• 第四步：
  • 实现滑动tableView改变背景图片的尺寸，监听其scrollView的方法- (void)scrollViewDidScroll：(UIScrollView *)scrollView ，监听其偏移量：

 CGFloat yoffset = scrollView.contentOffset.y;
    NSLog(@"===========%f",yoffset);
    //当其偏移量在headView的范围内的时候，navBar颜色的改变
    if (yoffset < headHeight) {
        self.navBar.titleColor = [UIColor whiteColor];
        self.navBar.leftImage = @"back_icon";
        self.navBar.rightImage = @"share_icon";
        self.navBar.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:yoffset/headHeight];
    }else {
        self.navBar.titleColor = [UIColor whiteColor];
        self.navBar.backgroundColor = [UIColor redColor];
        self.navBar.leftImage = @"back_icon";
        self.navBar.rightImage = @"share_icon";
    }
    
    //上下滑动的时候的背景图片的放大
    if (yoffset > 0) {//往上拖动
        self.bgView.frame = ({
            CGRect frame = self.bgView.frame;
            frame.origin.y = self.originalFrame.origin.y -yoffset;
            frame;
        });
        
        
    }else {//往下拖动
        
        self.bgView.frame = ({//高度变化的比较快
            CGRect frame = self.bgView.frame;
            frame.size.height = self.originalFrame.size.height -yoffset;
            frame.size.width = self.originalFrame.size.width * frame.size.height /self.originalFrame.size.height;
            frame.origin.x = -(frame.size.width - self.originalFrame.size.width)/2;
            frame.origin.y = 0;
            frame;
        });
        
//        self.bgView.frame = ({//高度变化的快
//            CGRect frame = self.bgView.frame;
//            frame.size.width = self.originalFrame.size.width -yoffset;
//            frame.size.height = self.originalFrame.size.height * frame.size.width /self.originalFrame.size.width;
//            frame.origin.x = -(frame.size.width - self.originalFrame.size.width)/2;
//      frame.origin.y = 0;
//            frame;
//        });

    }

demo地址：https://github.com/charles1216/iOS-_f_QQ_xiala.git