实现京东金融->悬浮框效果

有些app在某些页面中会有悬浮框效果，这里以京东金融为模板

here:

Snip20170721_2.png

这种效果，首先想到跟滑动代理有关系。

首先新建一个tableView


//声明
@property (nonatomic, strong) UITableView *tableView;

//懒加载
- (UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.rowHeight = 80;
        
    }
    return _tableView;
}

//添加
[self.view addSubview:self.tableView];
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.and.trailing.equalTo(@0);
        make.top.equalTo(self.mas_topLayoutGuide);
        make.bottom.equalTo(self.mas_bottomLayoutGuide);
    }];

//tableView代理
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 100;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *iden = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:iden];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:iden];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    
    cell.textLabel.text = @"text";
    cell.detailTextLabel.text = @"detail";
    
    return cell;
}

悬浮框

//声明
@property (nonatomic, strong) UIView *displayView;

//懒加载
- (UIView *)displayView
{
    if (!_displayView) {
        _displayView = [[UIView alloc] initWithFrame:CGRectMake(kScreenWidth - kWidth, kScreenHeight/3 * 2.0, 60, 60)];
        _displayView.backgroundColor = [UIColor brownColor];
        
        UILabel *label = [[UILabel alloc] init];
        label.text = @"致粉丝的一封信";
        label.textColor = [UIColor orangeColor];
        label.textAlignment = NSTextAlignmentCenter;
        label.font = [UIFont systemFontOfSize:12];
        label.numberOfLines = 0;
        [_displayView addSubview:label];
        [label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(@3);
            make.trailing.equalTo(@-3);
            make.top.equalTo(@5);
        }];
        
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction)];
        [_displayView addGestureRecognizer:tap];
    }
    return _displayView;
}

实现悬浮窗效果
1. 开始拖拽: 隐藏悬浮框

    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [UIView animateWithDuration:kAnimationInterval animations:^{
        self.displayView.frame = CGRectMake(kScreenWidth, kScreenHeight/3 * 2.0, 60, 60);
    }];
}

结束拖拽

    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (!decelerate) {//当滑动停止后 显示悬浮框
        [UIView animateWithDuration:kAnimationInterval animations:^{
            self.displayView.frame = CGRectMake(kScreenWidth - kWidth, kScreenHeight/3 * 2.0, 60, 60);
        }];
    }
    
    NSLog(@"---");
}

快速滑动减速后响应此代理

    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [UIView animateWithDuration:kAnimationInterval animations:^{
        self.displayView.frame = CGRectMake(kScreenWidth - kWidth, kScreenHeight/3 * 2.0, 60, 60);
    }];
    
    NSLog(@"---=====");
}

Gif效果:

演示.gif

代码

实现京东金融->悬浮框效果

推荐阅读更多精彩内容