点击按钮,出现下拉列表

大体思路: 1.如图,创建三个小视图,上面添加label和按钮,并给视图和按钮添加tag值,方便获取。
2.列表,我定义了一个全局表格,在之前初始化,不显示,然后在点击按钮的事件中,重新设置其frame值,再显示。
3.按钮设置了两种状态,判断,如果选择的是当前的按钮,那么其他按钮的状态都是没有选中,选中状态下,弹出列表,否则,收起。
4.我这里,还没有添加数据,阔以自定义定义数据模型,根据按钮的tag值来确定传什么值,应该比较简单。

这里写图片描述
这里写图片描述

//
//  PullDownList.m
//  project(1)
//
//  Created by mac on 16/7/31.
//  Copyright © 2016年 zxj. All rights reserved.
//

#import "PullDownList.h"
#import "BaseView.h"
#import "Commen.h"
#import "PullDownListCell.h"

@implementation PullDownList

- (instancetype) initWithFrame:(CGRect)frame {

    self = [super initWithFrame:frame];
    if (self) {

        //创建按钮视图
        //a)创建标题数组
        NSArray *titleArr = @[@"详细分类",@"筛选条件",@"小主钦点"];
        //b)图片数组
        NSArray *imageName = @[@"downArrows.png",@"upArrows.png"];

        //计算每个小视图的宽
        CGFloat width = (kScreenWidth)/titleArr.count-15;


        //c) 利用循环创建按钮
        for (int i = 0; i<titleArr.count; i++) {

            //计算视图的frame
            CGRect frame = CGRectMake(i*width+(i*10)+5, 2, width, self.height-4);
            //接收返回的视图
            BaseView *view = [[BaseView alloc] initWithFrame:frame withTitle:titleArr[i] withImageName:imageName[0] withSelectImageName:imageName[1] withTag:i];
            //设置边框
            view.layer.borderWidth = 2;
            view.layer.borderColor = [UIColor lightGrayColor].CGColor;
            //设置tag
            view.tag = 1000+i;
            [self addSubview:view];

            //获取按钮
            UIButton *button = (UIButton *)[view viewWithTag:2000+i];
            //设置未选中状态
            button.selected = NO;
            //添加点击事件
            [button addTarget:self action:@selector(buttonClickAction:) forControlEvents:UIControlEventTouchUpInside];

        }

        //初始化列表视图
        _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
        //设置代理
        _tableView.delegate = self;
        _tableView.dataSource = self;

    }
    return self;
}

#pragma mark - 点击事件
- (void) buttonClickAction:(UIButton *) button {

    //获取点击的按钮
    NSInteger tag = button.tag - 2000;
    CGRect frame = self.frame;

    //获取当前按钮所在的视图
    UIView *view = (UIView *)[self viewWithTag:tag+1000];

    //获取三个按钮
    for (int i = 0; i<3;i++) {

        //获取视图,再获取按钮(这里嵌套的比较多)
        UIView *view = (UIView *)[self viewWithTag:i+1000];
        UIButton *btn = (UIButton *)[view viewWithTag:2000+i];
        //实现,其他按钮均未选中
        if (btn.tag != button.tag) {
            btn.selected = NO;
        }
    }

    //如果是选中状态,就展开列表,否则收起列表
    if (!button.selected) {
        //向置零,动画效果才能出现
        CGRect tableFrame1 = CGRectMake(frame.origin.x+view.frame.origin.x, frame.origin.y+view.frame.origin.y+view.height, view.width, 0);
        _tableView.frame = tableFrame1;

        //添加动画效果
        [UIView animateWithDuration:0.5 animations:^{

            CGRect tableFrame = CGRectMake(frame.origin.x+view.frame.origin.x, frame.origin.y+view.frame.origin.y+view.height, view.width, 150);
            _tableView.frame = tableFrame;
        }];

        //列表
        _tableView.rowHeight = 30;
        [self.superview addSubview:_tableView];

        //注册单元格(xib文件写的)
        [_tableView registerNib:[UINib nibWithNibName:@"PullDownListCell" bundle:nil] forCellReuseIdentifier:@"PullDownListCell_ID"];
    }else {

        //添加动画效果(收起列表的动画)
        [UIView animateWithDuration:0.5 animations:^{

            CGRect tableFrame = CGRectMake(frame.origin.x+view.frame.origin.x, frame.origin.y+view.frame.origin.y+view.height, view.width, 0);
            _tableView.frame = tableFrame;
        }];
    }
    //状态取反
    button.selected = !button.selected;

}

#pragma mark - 表格的代理方法
- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}

-(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    PullDownListCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PullDownListCell_ID"];
    cell.backgroundColor = [UIColor cyanColor];
    return cell;
}

@end

//统一创建下拉视图的类

//
//  BaseView.m
//  project(1)
//
//  Created by mac on 16/7/31.
//  Copyright © 2016年 zxj. All rights reserved.
//

#import "BaseView.h"
#import "Commen.h"

@implementation BaseView

//自定义初始化方法
- (instancetype) initWithFrame:(CGRect)frame
                     withTitle:(NSString *)title
                 withImageName:(NSString *)imageName
           withSelectImageName:(NSString *)selectedImageName
                       withTag:(NSInteger)tag{

    self = [super initWithFrame:frame];
    if (self) {

        //创建label
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.width-20,self.height)];
        titleLabel.text = title;
        titleLabel.textColor = [UIColor blackColor];
        titleLabel.textAlignment = NSTextAlignmentCenter;
        titleLabel.font = [UIFont systemFontOfSize:13];
        titleLabel.backgroundColor = [UIColor whiteColor];
        [self addSubview:titleLabel];

        //创建按钮
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(self.width-20, 0, 20, self.height);
        //设置常规和选中状态下的图片
        [button setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:selectedImageName] forState:UIControlStateSelected];
        //设置内容的填充模式
        button.contentMode = UIViewContentModeScaleAspectFit;
        button.tag = tag+2000;
        [self addSubview:button];
    }
    return self;
}
@end
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值