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(,,Width,)];
_bannerView.image = [UIImage imageNamed:@"demo"];
}
return _bannerView;
} -(UIView *)animationView{ if (!_animationView) {
_animationView = [[UIView alloc]initWithFrame:CGRectMake(, CGRectGetMaxY(self.bannerView.frame)++padding/, Width/, padding/)];
_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=; i<; 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:]; //分割线
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/*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, ) 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/) * button.tag;
button.frame = CGRectMake(X, CGRectGetMaxY(self.bannerView.frame)+padding/, (Width/), );
}
if ([mysubView isKindOfClass:[UILabel class]]) { //分割线
UILabel *line = (UILabel *)mysubView;
CGFloat X = (Width/) * line.tag - 0.5;
line.frame = CGRectMake(X, CGRectGetMaxY(self.bannerView.frame)+1.5*padding,,);
}
}
} @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=; i<; i++) {
UIImageView *imgViw = [[UIImageView alloc]init];
imgViw.backgroundColor = XYQRandomColor;
imgViw.frame = CGRectMake(SCREEN_W*i, , SCREEN_W, SCREEN_H-);
[self addSubview:imgViw];
}
}
return self;
} //类方法创建
+(instancetype)shareWithFrame:(CGRect)frame{ ContentView *contentView = [[self alloc]initWithFrame:frame];
contentView.contentSize = CGSizeMake(SCREEN_W*,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 = ; - (void)viewDidLoad {
[super viewDidLoad];
[self.view setBackgroundColor:[UIColor whiteColor]]; //创建控件
[self setupControl];
} //创建控件
-(void)setupControl{ //1.设置容器视图
_containView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
_containView.tag = -;
_containView.delegate = self;
_containView.bounces = NO; //禁止它的弹簧效果
_containView.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT+);
[self.view addSubview:_containView]; //2.创建头视图
_headView = [HeadView createHeadView:CGRectMake(,,SCREEN_WIDTH,headHeight)];
[_containView addSubview:_headView]; //3.创建内容视图
_contentView = [ContentView shareWithFrame:CGRectMake(, headHeight, SCREEN_WIDTH, SCREEN_HEIGHT-)];
_contentView.tag = -;
_contentView.delegate = self;
[_containView addSubview:_contentView];
} #pragma mark - <UIScrollViewDeleagte>
//设置下划动画视图的frame
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ if (scrollView.tag == -) { //横向的滚动内容视图
NSInteger page = scrollView.contentOffset.x/SCREEN_WIDTH;
[UIView animateWithDuration:0.2 animations:^{
CGRect frame = self.headView.animationView.frame;
frame = CGRectMake(SCREEN_WIDTH/*page,frame.origin.y,frame.size.width,frame.size.height);
self.headView.animationView.frame = frame;
}];
}
}
@end
四、演示截图:(上拉到顶就悬浮了不能在上拉,下拉可以继续),点击按钮来回切换tableView
iOS: 悬浮的条件筛选框使用二的更多相关文章
- iOS: 悬浮的条件筛选下拉框的使用
1.介绍 app中条件筛选视图是很常用的功能,一般它搭配着tableView的表头悬浮滚动使用,点击按钮时,就会弹出下拉框显示条件,选择一个条件后,下拉框自动隐藏. 2.效果图如下 从中间点击弹出,然 ...
- iOS开发-UI 从入门到精通(二)
iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI ...
- 织梦CMS实现多条件筛选功能
用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...
- 记录下url拼接的多条件筛选js
本着为提高工作效率百度或者google这些代码发现拿过来的都不好用,然后自己写了个,写的一般但记录下以后再优化 <html> <head> <script> $(f ...
- python基础一 -------如何在列表字典集合中根据条件筛选数据
如何在列表字典集合中根据条件筛选数据 一:列表 先随机生成一个列表,过滤掉负数 1,普通for循环迭代判断 2,filter()函数判断,filter(函数,list|tuple|string) fi ...
- mxonline实战8,机构列表分页功能,以及按条件筛选功能
对应github地址:列表分页和按条件筛选 一. 列表分页 1. pip install django-pure-pagination 2. settings.py中 install ...
- js前端 多条件筛选查询
一.前言 在做项目中,遇到多条件筛选案例.实现完成以后,我将我做的代码分享在这里,希望可以帮助到其他朋友. 二.效果截图 三.实现代码 首先我先类型.类别.职位分成三块来处理,如果传到服务器端的话,就 ...
- 【疯狂造轮子-iOS】JSON转Model系列之二
[疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...
- iOS开发UI篇—Quartz2D简单使用(二)
iOS开发UI篇—Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...
随机推荐
- CSS3选择器(二)之属性选择器
CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...
- DotNetBar RibbonControl 控件动态添加项
想做个插件式开发,界面用Dotnetbar的RibbonControl,需要通过代码动态的向RibbonControl控件添加项 示例代码如下: RibbonTabItem rti = new Rib ...
- ps插件安装
CutAndSliceMe.zxp 切图插件安装,下载后改为zip后缀,再解压后 复制文件夹到(PS软件安装目录)PhotoshopCC\Plug-ins\Panels文件夹下面
- SQL - 分页存储过程
http://www.jb51.net/article/71193.htm http://www.webdiyer.com/utils/spgenerator/ create PROCEDURE [d ...
- ITIL图示
- css 细节收集
细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...
- CSS系列:长度单位&字体大小的关系em rem px
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...
- FastDFS 上传文件
[root@GW1 client]# ./fdfs_test ../conf/client.conf upload /home/tmp/1009.png This is FastDFS client ...
- Jquery--string
--判断string是否为空 state !== undefined || state !== null || state != ""
- Linux下使用inode删除文件
Linux 下有时候某些文件无法使用 rm 直接删除, 比如该文件的文件名含有终端不能正确显示的字符.# ls -litotal 0441511 -rw-r--r-- 1 root root 0 Ap ...