开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

 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
复制代码

ViewController.m

 View Code

四、演示截图:(上拉到顶就悬浮了不能在上拉,下拉可以继续),点击按钮来回切换tableView

 

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/6103168.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS NSInvocation应用与理解
iOS NSInvocation应用与理解
49 0
iOS7应用开发3、Objective-C
【跟随教授的讲解和演示,并重做了课上的demo之后,惊奇地发现自己写的程序有bug,界面上12张卡牌出现后,点击任何一个,其他所有卡牌都会变成一块白板……在经历了长时间的调试之后悲催地发现,在最后的updateUI这个函数中改变背景的函数写错了,setBackgroundImage:写成了setImage:,被这一无脑的失误纠结了这么久,丢人啊……各种bug改完后,前几次课的代码都已经传到博客的资源中了,可到我的资源页下载。
755 0
SAP CRM WebClient UI上文本是否可编辑,取决于哪些条件
SAP CRM WebClient UI上文本是否可编辑,取决于哪些条件
42 0
4849
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载