iOS: 懸浮的條件篩選框使用二

一、介紹：

在前面已經介紹了一種條件懸浮框，使用的是tableView的Plain分組樣式實現的，因為這是tableView本身就具備的功能，分組懸浮效果。這次我來介紹第二種更加簡單的方法，采用兩個ScrollView來實現。

 

二、實現技術：

（1）兩個ScrollView，一個是左右滾動，成為內容視圖，另一個是上下滾動，作為容器視圖；

 (2) 創建頭視圖，頭視圖中有banner圖和條件篩選框，標記banner圖的高；

（3）合理設置上下滾動的容器視圖的frame，它承載頭視圖和內容視圖，不過需要禁止它的彈簧效果，實現懸浮框功能。

 

三、代碼如下：

HeadView.h

//  HeadView.h
//  SuspensionViewDemo
//
//  Created by 夏遠全 on 16/11/25.
//  Copyright © 2016年 廣州市東德網絡科技有限公司. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HeadView : UIView
/**
 *  類方法創建頭視圖
 */
+(instancetype)createHeadView:(CGRect)frame;
@property (strong,nonatomic)UIView *animationView;          //下划線動畫視圖
@end

HeadView.m

//  HeadView.m
//  SuspensionViewDemo
//
//  Created by 夏遠全 on 16/11/25.
//  Copyright © 2016年 廣州市東德網絡科技有限公司. All rights reserved.
//

#import "HeadView.h"
#import "ViewController.h"

#define padding 10
#define Width       [[UIScreen mainScreen] bounds].size.width
#define Height      [[UIScreen mainScreen] bounds].size.height

@interface HeadView ()
@property (strong,nonatomic)UIImageView  *bannerView;       //banner圖
@property (strong,nonatomic)NSMutableArray *buttonNames;    //標題按鈕數組
@end

@implementation HeadView

/**
 *  懶加載
 */
-(NSMutableArray *)buttonNames{
    if (!_buttonNames) {
        _buttonNames = [NSMutableArray arrayWithObjects:@"運動",@"電玩",@"養生",@"娛樂",nil];
    }
    return _buttonNames;
}

-(UIImageView *)bannerView{
    if (!_bannerView) {
        
        _bannerView = [[UIImageView alloc]initWithFrame:CGRectMake(0,0,Width,160)];
        _bannerView.image = [UIImage imageNamed:@"demo"];
    }
    return _bannerView;
}

-(UIView *)animationView{
    
    if (!_animationView) {
        _animationView = [[UIView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.bannerView.frame)+40+padding/2, Width/4, padding/2)];
        _animationView.backgroundColor = [UIColor redColor];
    }
    return _animationView;
}


//重寫初始化方法
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        
        //1.創建輪播圖
        [self addSubview:self.bannerView];
        
        //2.創建標題
        for (int i=0; i<4; i++) {
            
            //按鈕
            UIButton *btn = [[UIButton alloc]init];
            [btn setTitle:self.buttonNames[i] forState:UIControlStateNormal];
            [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
            [btn addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
            btn.tag = i;
            btn.backgroundColor = [UIColor whiteColor];
            btn.titleLabel.font = [UIFont systemFontOfSize:14];
            
            //分割線
            UILabel *line = [[UILabel alloc]init];
            line.tag = i;
            line.backgroundColor = [UIColor lightGrayColor];
            
            //添加
            [self addSubview:line];
            [self addSubview:btn];
        }
        
        //3.創建動畫視圖
        [self addSubview:self.animationView];
    }
    return self;
}


//類方法
+(instancetype)createHeadView:(CGRect)frame{
    
    HeadView *headView = [[self alloc]initWithFrame:frame];
    return headView;
}



#pragma mark - 按鈕被點擊
//點擊按鈕
-(void)buttonClick:(UIButton *)btn{
    
    [UIView animateWithDuration:0.2 animations:^{
        
        //移動動畫視圖的frame
        CGRect frame = self.animationView.frame;
        frame = CGRectMake(Width/4*btn.tag,frame.origin.y,frame.size.width,frame.size.height);
        self.animationView.frame = frame;
        
        //移動scrollView的偏移位置
        ViewController *currentVC = (ViewController*)[self viewController];
        [currentVC.contentView setContentOffset:CGPointMake(Width*btn.tag, 0) animated:NO];
    }];
}

//獲取當前視圖所在的控制器
- (UIViewController*)viewController {
    for (UIView* next = [self superview]; next; next = next.superview) {
        UIResponder* nextResponder = [next nextResponder];
        if ([nextResponder isKindOfClass:[UIViewController class]]) {
            return (UIViewController*)nextResponder;
        }
    }
    return nil;
}


//設置frame
-(void)layoutSubviews{
    [super layoutSubviews];
    
    for (UIView *mysubView in self.subviews) {
        if ([mysubView isKindOfClass:[UIButton class]]) {
            
            //按鈕
            UIButton *button = (UIButton *)mysubView;
            CGFloat X = (Width/4) * button.tag;
            button.frame = CGRectMake(X, CGRectGetMaxY(self.bannerView.frame)+padding/2, (Width/4), 40);
        }
        if ([mysubView isKindOfClass:[UILabel class]]) {
            
            //分割線
            UILabel *line = (UILabel *)mysubView;
            CGFloat X = (Width/4) * line.tag - 0.5;
            line.frame = CGRectMake(X, CGRectGetMaxY(self.bannerView.frame)+1.5*padding,1,20);
        }
    }
}

@end

ContentView.h

//  ContentView.h
//  SuspensionViewDemo
//
//  Created by 夏遠全 on 16/11/25.
//  Copyright © 2016年 廣州市東德網絡科技有限公司. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ContentView : UIScrollView

//類方法創建
+(instancetype)shareWithFrame:(CGRect)frame;
@end

ContentView.m

//  ContentView.m
//  SuspensionViewDemo
//
//  Created by 夏遠全 on 16/11/25.
//  Copyright © 2016年 廣州市東德網絡科技有限公司. All rights reserved.
//

#import "ContentView.h"

#define XYQColor(r, g, b)   [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
#define XYQRandomColor      XYQColor(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256))
#define SCREEN_W            [[UIScreen mainScreen] bounds].size.width
#define SCREEN_H            [[UIScreen mainScreen] bounds].size.height

@implementation ContentView

//初始化
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        
        //放tableView
        for (int i=0; i<4; i++) {
            UIImageView *imgViw = [[UIImageView alloc]init];
            imgViw.backgroundColor = XYQRandomColor;
            imgViw.frame = CGRectMake(SCREEN_W*i, 0, SCREEN_W, SCREEN_H-110);
            [self addSubview:imgViw];
        }
    }
    return self;
}

//類方法創建
+(instancetype)shareWithFrame:(CGRect)frame{
    
    ContentView *contentView = [[self alloc]initWithFrame:frame];
    contentView.contentSize = CGSizeMake(SCREEN_W*4,frame.size.height);
    contentView.pagingEnabled = YES;
    contentView.bounces = NO;
    return contentView;
}
@end

ViewController.h

//  ViewController.h
//  SuspensionViewDemo
//
//  Created by 夏遠全 on 16/11/25.
//  Copyright © 2016年 廣州市東德網絡科技有限公司. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "ContentView.h"

@interface ViewController : UIViewController

/**
 *  內容視圖
 */
@property (strong,nonatomic)ContentView *contentView;

@end

ViewController.m

//  ViewController.m
//  SuspensionViewDemo
//
//  Created by 夏遠全 on 16/11/25.
//  Copyright © 2016年 廣州市東德網絡科技有限公司. All rights reserved.
//

#import "ViewController.h"
#import "HeadView.h"

#define SCREEN_WIDTH  [[UIScreen mainScreen] bounds].size.width
#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height

@interface ViewController ()<UIScrollViewDelegate>{
    
    UIScrollView *_containView; //大容器視圖（存放頭視圖和內容視圖）
}
/**
 *  頭視圖
 */
@property (strong,nonatomic)HeadView *headView;

@end

@implementation ViewController

/**
 *  給定頭視圖的高
 */
static NSInteger const headHeight = 210;

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor whiteColor]];
    
    //創建控件
    [self setupControl];
}

//創建控件
-(void)setupControl{
    
    //1.設置容器視圖
    _containView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    _containView.tag = -1;
    _containView.delegate = self;
    _containView.bounces = NO; //禁止它的彈簧效果
    _containView.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT+160);
    [self.view addSubview:_containView];
    
    //2.創建頭視圖
    _headView = [HeadView createHeadView:CGRectMake(0,0,SCREEN_WIDTH,headHeight)];
    [_containView addSubview:_headView];
    
    //3.創建內容視圖
    _contentView = [ContentView shareWithFrame:CGRectMake(0, headHeight, SCREEN_WIDTH, SCREEN_HEIGHT-110)];
    _contentView.tag = -2;
    _contentView.delegate = self;
    [_containView addSubview:_contentView];
}

#pragma mark - <UIScrollViewDeleagte>
//設置下划動畫視圖的frame
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    if (scrollView.tag == -2) { //橫向的滾動內容視圖
        NSInteger page = scrollView.contentOffset.x/SCREEN_WIDTH;
        [UIView animateWithDuration:0.2 animations:^{
            CGRect frame = self.headView.animationView.frame;
            frame = CGRectMake(SCREEN_WIDTH/4*page,frame.origin.y,frame.size.width,frame.size.height);
            self.headView.animationView.frame = frame;
        }];
    }
}
@end

四、演示截圖：(上拉到頂就懸浮了不能在上拉，下拉可以繼續)，點擊按鈕來回切換tableView