如何给tableView添加一个悬浮的按钮? 恐怕没有想象的那么简单!

最近在公司做项目时,产品经理有一个需求就是在一个 tableView上 加一个悬浮的按钮,

尝试了很多方案之后我终于找到了一个通用的可行的方案!

最终效果图:

滑动tableView之后的效果是:

可以 看到,我们实现了 悬浮的效果,随着tableView的滑动,悬浮按钮并没有随之儿而滚动!
受到这个启发,我们应该可以在 tableView上面,可以根据实际情况添加一个 悬浮的  置顶按钮,提高用户体验!
首先说一下方案的选取可行性:
1.Storyboard 中拖拽的 TableViewController,  使用 self.view添加悬浮按钮,结果是 :按钮随着tableView滚动!不是我们想要的结果!
解释:TableViewController 的视图层次如下红色方框内,可以看到 并没有 view(可能是系统的处理让view置于很下层):

但是 上图有一个问题:tableView的上面会有一个空白?如何解决?将在后续的文章中详细介绍:

http://blog.csdn.net/yangbingbinga

这导致我们在使用tableView添加了一个 悬浮按钮时,会随着 tableView的滚动而滚动!

2.storyboard +ViewController +tableView +any(sizeClass= any)
解释:也就是在 ViewController的view上贴一个tableView,然后在view上贴上悬浮按钮并且把该按钮放入到最上层!(bringSubviewToFront)
视图结构如下:

并且把  sizeClass设置为 any模式:

代码实现如下:

ViewController绑定的是ViewController类:

代码如下:

添加了两个悬浮按钮:

//
//  ViewController.m
//  StoneButton
//
//  Created by http://blog.csdn.net/yangbingbinga on 14/12/26.
//  Copyright (c) 2014年 http://blog.csdn.net/yangbingbinga. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIScreen *s=[UIScreen mainScreen];
    CGFloat width=s.bounds.size.width;
    CGFloat height=s.bounds.size.height;
    CGRect frame=CGRectMake(15, height-62, width-30, 50);
    UIButton *button=[UIButton buttonWithType:UIButtonTypeCustom];
    [button setTitle:@"悬浮按钮" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor redColor]];
    [button setFrame:frame];
    button.layer.cornerRadius=5;//设置圆角
    button.clipsToBounds=YES;
    [self.view addSubview:button];
    [self.view bringSubviewToFront:button];//关键语句,让  button显示在最前!
    CGRect frame2=CGRectMake(15, 400, 50, 150);
    UIButton *button2=[UIButton buttonWithType:UIButtonTypeCustom];
    [button2 setTitle:@"悬浮按钮2" forState:UIControlStateNormal];
    [button2 setBackgroundColor:[UIColor grayColor]];
    [button2 setFrame:frame2];
    button2.layer.cornerRadius=5;
    button2.clipsToBounds=YES;
    [self.view addSubview:button2];
    [self.view bringSubviewToFront:button2];
    
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;//模拟20条数据
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    long  row=indexPath.row%3;
    UITableViewCell *cell;//见图,一共有a,b,c3种cell
    NSString *idf;
    if (row==0) {
        idf=@"a";
    }
    else if(row==1)
    {
        idf=@"b";
    }
    else
    {
        idf=@"c";
    }
    cell = [tableView dequeueReusableCellWithIdentifier:idf forIndexPath:indexPath];
    return cell;
}

@end

代码下载地址:http://share.weiyun.com/4c2aa46cc9f787470125761c53c6a011

tableView添加悬浮按钮button添加悬浮窗