iOS 下拉菜单的简单实现以及使用
2018-05-15 本文已影响355人
开心的小赵
效果图
效果图.png下拉列表选择类
- .h文件
#import <UIKit/UIKit.h>
@interface ZPullMenu : UITableView
//头部视图
@property (nonatomic, strong) UIView *headView;
//头部视图数据
@property (nonatomic, copy) NSArray *headDataSource;
//头部视图选择行的数据
@property (nonatomic, copy) NSString *headText;
//选择的某一行返回的index
@property (nonatomic, strong) void (^selectBlock)(NSInteger);
@end
- .m文件
#import "ZPullMenu.h"
@interface ZPullMenu()<UITableViewDelegate,UITableViewDataSource>
{
UILabel *_label;//头部视图的Label
UIImageView *_imageView;//头部视图选择按钮
UITapGestureRecognizer *_tap;//选择按钮的手势
BOOL _se;//判断是否点击了按钮
NSString *_symbol;//箭头的指示
CGRect _rect;// 存放当前视图frame的值
}
@end
@implementation ZPullMenu
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame style:UITableViewStylePlain];
if (self) {
_rect = self.frame;
// 初始化头部视图的Label的text为“结构树导航”
self.headText = @"";
// 初始化头部视图的选择按钮的图片名字
_symbol = @"ZQ_zuojiankuohao";
//创建手势
_tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(respondsToTap:)];
// 设置代理
self.dataSource = self;
self.delegate = self;
// 设置数据
self.headDataSource = @[];
// 初始化点击按钮bool值为NO
_se = NO;
// 设置表格不能上下拉动
self.scrollEnabled = YES;
}
return self;
}
#pragma mark *** Events ***
/**
* 手势的响应事件
*
* @param gestuer 传递过来的手势
*/
- (void)respondsToTap:(UITapGestureRecognizer *)gestuer{
if (!_se) {
// 点击之后改变按钮的图片
_symbol = @"ZQ_xiajiankuohao";
// 将是否点击置为YES
_se = YES;
// 改变表格的大小
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.bounds.size.width, 200);
}else{
_symbol = @"ZQ_zuojiankuohao";
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.bounds.size.width, 40);
_se = NO;
}
[self reloadData];
}
#pragma mark *** Protocol ***
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *kcellId = @"zhaoqian";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kcellId];
if (!cell) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:kcellId];
}
cell.textLabel.text = self.headDataSource[indexPath.row];
cell.backgroundColor = [UIColor colorWithRed:218.0/255.0 green:236.0/255.0 blue:247.0/255.0 alpha:1.0];
return cell;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
if (_se) {
return self.headDataSource.count;
}else{
return 0;
}
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 40;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
self.headView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width, 40)];
_label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width - 40, 40)];
_label.font = [UIFont systemFontOfSize:20];
_label.text = [NSString stringWithFormat:@"%@",self.headText];
_label.textColor = [UIColor whiteColor];
[_label setTextAlignment:NSTextAlignmentCenter];
_imageView = [[UIImageView alloc]initWithFrame:CGRectMake(CGRectGetMaxX(_label.frame), 0, 40, 40)];
_imageView.userInteractionEnabled = YES;
[_imageView addGestureRecognizer:_tap];
_imageView.image = [UIImage imageNamed:_symbol];
[self.headView addSubview:_label];
[self.headView addSubview:_imageView];
self.headView.backgroundColor = [UIColor colorWithRed:31.0/255.0 green:105.0/255.0 blue:114.0/255.0 alpha:1.0];
return self.headView;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
// 点击某个单元格之后(和点击按钮的事件对比可知)
self.headText = self.headDataSource[indexPath.row];
_se = NO;
self.frame =_rect;
_symbol = @"ZQ_zuojiankuohao";
if (self.selectBlock) {
self.selectBlock(indexPath.row);
}
[self reloadData];
}
@end
- 使用
在ViewController中使用
demo的代码示例:
#import "ViewController.h"
#import "ZPullMenu.h"
@interface ViewController ()
@property (nonatomic, strong)ZPullMenu *pullMenu;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.pullMenu];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (ZPullMenu *)pullMenu{
if (!_pullMenu) {
_pullMenu = [[ZPullMenu alloc]initWithFrame:CGRectMake(100, 100, 200, 40)];
_pullMenu.headDataSource = @[@"zq0",@"zq1",@"zq2",@"zq3"];
}
return _pullMenu;
}
@end
说明:这是很早之前写的一个,初始化的时候需要设置frame的高度为40,展开之后默认为200的高度。当然,有需要的话自己可以在代码中修改高度。
资源:里面用到的箭头的图片
ZQ_xiajiankuohao.png
ZQ_zuojiankuohao.png