iOS: 悬浮的条件筛选框使用二-阿里云开发者社区

iOS: 悬浮的条件筛选框使用二

2017-10-18 1380

简介：

+关注继续查看

一、介绍：

在前面已经介绍了一种条件悬浮框，使用的是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

 View Code

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