现在的位置: 首页 > 综合 > 正文

IOS筛选框的实现(仿糯米团)

2016年03月26日 ⁄ 综合 ⁄ 共 10749字 ⁄ 字号 评论关闭

实现效果:

低保真界面原型

代码讲解(创建部分)

1创建界面:初始化各种组件,搭建界面

#pragma mark- 初始化 :原点+高
- (instancetype)initWithOrigin:(CGPoint)origin andHeight:(CGFloat)height andDataArray:(NSMutableArray *)data;
{
    // 位置信息
    _origin = origin;
    _show=NO;
    _height = height;
    
    // 填充数据
    dataArray=data;
    numOfMenu=[dataArray count];
    currentSelectedMenudIndex=-1;
    
        // 绘制栏目头的轮廓
        self=[self initWithFrame:CGRectMake(origin.x, origin.y, ScreenSize.size.width,height)];
        // 每个button的宽度
        CGFloat buttonInertval=self.frame.size.width/numOfMenu;
        // 根据列数创建button
        [self createButton:buttonInertval andHeight:height];
        // 创建tableview
        [self createTableView:origin];
        // 创建背景+添加弹回事件
        [self createBackgroud:origin];
        // 给menu添加底边
        [self createShadow];
    
    self.backgroundColor=[UIColor whiteColor];
    return self;
}

绘制button

根据列数在menu上绘制button,需要给给他们都打上tag,这样可以通过tag来获取你创建的button

1  注意:tag 赋值要正整数(用了两个小时调错,发现是给tag赋值为0 ⊙﹏⊙b汗)
2  通过tag获取button方法为(注意类型转换)
- (UIView *)viewWithTag:(NSInteger)tag; 
3 控制文字和图片的排版:使用edgeInsets属性控制button内图文布局  后面函数的参数距离(上,左,下,右)的距离
        // 图片插在了这里 edge :边缘 优势
        // 设置button中文字和图片
        tmpButton.titleEdgeInsets=UIEdgeInsetsMake(0,0,0,0);
        tmpButton.imageEdgeInsets = UIEdgeInsetsMake(0, buttonInertval*7/8, 0, 0);

4 关联点击

[tmpButton addTarget:self action:@selector(btnPressed:) forControlEvents:UIControlEventTouchUpInside];

button说到这里,上相关完整代码

/*------------------------------------------生成button-----------------------------------------*/
-(void)createButton:(CGFloat)buttonInertval andHeight:(CGFloat)height
{
    for (int i=0; i<numOfMenu; i++) {
        // 生了一个button 原点  宽  高
        UIButton *tmpButton = [[UIButton alloc] initWithFrame:CGRectMake(i*buttonInertval,0,buttonInertval,height)];
        // 这个小button 的字体是14
        tmpButton.titleLabel.font = [UIFont systemFontOfSize:14.f];
        // 小button用的是正常状态
        [tmpButton setTitle:[[dataArray objectAtIndex:i] objectAtIndex:0] forState:UIControlStateNormal];
        //         小button 用了一个叫做扩展的 图片作为正常状态的图片
        [tmpButton setImage:[UIImage imageNamed:@"expandableImage"] forState:UIControlStateNormal];
        // 图片插在了这里 edge :边缘 优势
        // 设置button中文字和图片
        tmpButton.titleEdgeInsets=UIEdgeInsetsMake(0,0,0,0);
        tmpButton.imageEdgeInsets = UIEdgeInsetsMake(0, buttonInertval*7/8, 0, 0);
        // 小button 使用黑色的字体做题目
        [tmpButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        // 添加点击事件
        [tmpButton addTarget:self action:@selector(btnPressed:) forControlEvents:UIControlEventTouchUpInside];
        // tag 默认值是0
        tmpButton.tag=i+1;
        [self addSubview:tmpButton];
    }
}

创建table:

没什么好说的,上代码
/*----------------------------------------添加tableview-----------------------------------------*/

-(void)createTableView:(CGPoint)origin
{
    //左栏
    _leftTableView = [[UITableView alloc] initWithFrame:CGRectMake(origin.x, self.frame.origin.y + self.frame.size.height, ScreenSize.size.width*0.7, 0) style:UITableViewStylePlain];
    _leftTableView.rowHeight = 38;
    _leftTableView.dataSource = self;
    _leftTableView.delegate = self;
    
    
    //右栏
    _rightTableView = [[UITableView alloc] initWithFrame:CGRectMake(origin.x+ScreenSize.size.width*0.7, self.frame.origin.y + self.frame.size.height, ScreenSize.size.width*0.3, 0) style:UITableViewStylePlain];
    _rightTableView.rowHeight = 38;
    _rightTableView.dataSource = self;
    _rightTableView.delegate = self;
    _rightTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    _rightTableView.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.f];
}

创建background

这里说一下alpha是设置透明度
相关:http://blog.csdn.net/caryaliu/article/details/7837916
/*------------------------------------------背景-----------------------------------------*/
-(void)createBackgroud:(CGPoint)origin
{
    _backGroundView = [[UIView alloc] initWithFrame:CGRectMake(origin.x, origin.y, ScreenSize.size.width, ScreenSize.size.height)];
    
    // 解释一下昂:grayscale :灰度  specified:规定制定  opacity:不透明的
    // white:The grayscale value of the color object, specified as a value from 0.0 to 1.0.
    // The opacity value of the color object, specified as a value from 0.0 to 1.0.
    _backGroundView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.0];
    // opaque  不透明
    _backGroundView.opaque = NO;
    // target action 模式
    UIGestureRecognizer *gesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(backgroundTapped:)];
    [_backGroundView addGestureRecognizer:gesture];
}

创建shadow

这个的唯一作用就是作为self下面一条宽 0.5的线的存在
/*------------------------------------------给menu划线-----------------------------------------*/
-(void)createShadow
{
    //add bottom shadow  这是一条线
    UIView *bottomShadow = [[UIView alloc] initWithFrame:CGRectMake(0, self.frame.size.height-0.5, ScreenSize.size.width, 0.5)];
    bottomShadow.backgroundColor = [UIColor lightGrayColor];
    [self addSubview:bottomShadow];
    self.backgroundColor=[UIColor whiteColor];
}

动画部分代码

background动画

1 添加背景的层次顺序:原界面+self  变成 原界面+background+self
        [self.superview addSubview:view];
        [view.superview addSubview:self];

2 移除背景

[view removeFromSuperview];

3 整体代码展示

/*---------------------------------展示和收回-------------------------------------*/
// 激活背景视图:(某视图) 展示吗:(是否)
- (void)animateBackGroundView:(UIView *)view show:(BOOL)show complete:(void(^)())complete {
    if (show) {
        
        //我——你(背景)——他(原图)
        [self.superview addSubview:view];
        [view.superview addSubview:self];
        
        [UIView animateWithDuration:0.2 animations:^{
            view.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.4];
        }];
    
    } else {
        // 消失动画  干掉背景
        [UIView animateWithDuration:0.2 animations:^{
            view.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.0];
        } completion:^(BOOL finished) {
            [view removeFromSuperview];
        }];
    }
    complete();
}

tableview动画

- (void)animateTableViewShow:(BOOL)show complete:(void(^)())complete {
    if(show)
    {
        // 左边占了七分天下
        _leftTableView.frame = CGRectMake(self.origin.x, self.frame.origin.y+_height, ScreenSize.size.width*0.7, 0);
        [self.superview addSubview:_leftTableView];
        
        // 右边有三分
        _rightTableView.frame = CGRectMake(self.origin.x+ScreenSize.size.width*0.7, self.frame.origin.y+_height,ScreenSize.size.width*0.3, 0);
        [self.superview addSubview:_rightTableView];
        _leftTableView.alpha = 1.f;
        _rightTableView.alpha = 1.f;
        [UIView animateWithDuration:0.2 animations:^{
            _leftTableView.frame = CGRectMake(self.origin.x, self.frame.origin.y+_height, ScreenSize.size.width*0.7, ScreenSize.size.height/3);
            _rightTableView.frame = CGRectMake(self.origin.x+ScreenSize.size.width*0.7, self.frame.origin.y+_height, ScreenSize.size.width*0.3, ScreenSize.size.height/3);
        } completion:^(BOOL finished) {
        }];
    }else
    {
        [UIView animateWithDuration:0.2 animations:^{
                        _leftTableView.alpha = 0.f;
                        _rightTableView.alpha = 0.f;
                    } completion:^(BOOL finished) {
                        [_leftTableView removeFromSuperview];
                        [_rightTableView removeFromSuperview];
                    }];
        
    }complete();

}

逻辑部分代码

-(void)btnPressed:(id)sender
{
    UIButton *a=sender;
    currentSelectedMenudIndex=a.tag;
    CurrentArray=[[[dataArray objectAtIndex:currentSelectedMenudIndex-1] objectAtIndex:2] objectAtIndex:0];

    if (_show==0) {
        // 关闭所有
        for (NSInteger i=1; i<=numOfMenu;i++) {
            UIButton *tmpbutton=(UIButton*)[self viewWithTag:i];
            tmpbutton.imageView.transform=CGAffineTransformMakeRotation(0);
        }
        // 旋转图片
        a.imageView.transform=CGAffineTransformMakeRotation(M_PI);
        
        // Selects a row in the receiver identified by index path, optionally scrolling the row to a location in the receiver.
        // 以索引路径为标志选中接受者中的一行,可以选择滚动这一行到接受者的一个位置
        
        // animated :YES if you want to animate the selection and any change in position, NO if the change should be immediate.
        // 激活:如果你像激活选中单元,并且选择任意位置,那么可以选择是,不是,就是不激活
        NSIndexPath *selectedIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
        [self.rightTableView selectRowAtIndexPath:selectedIndexPath animated:YES scrollPosition:UITableViewScrollPositionNone];
    }else{
        // 全部关上
        for (NSInteger i=1; i<=numOfMenu;i++) {
            UIButton *tmpbutton=(UIButton*)[self viewWithTag:i];
            tmpbutton.imageView.transform=CGAffineTransformMakeRotation(0);
        }
    }
    [self animateBackGroundView:self.backGroundView show:!_show complete:^{
        [self animateTableViewShow:!_show complete:^{
            
            [self tableView:self.rightTableView didSelectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
            _show=!_show;
        }];
    }];
    [_rightTableView reloadData];
}
// 点击背景 显示动画
- (void)backgroundTapped:(UITapGestureRecognizer *)paramSender
{
    // 点击背景还能干啥呢?关闭呗
    
    [self animateBackGroundView:_backGroundView show:!_show complete:^{
        [self animateTableViewShow:!_show complete:^{
             _show=!_show;
        }];
    }];
}

#pragma mark - table datasource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
        return [self menu:self tableView:tableView numberOfRowsInSection:section];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identifier = @"DropDownMenuCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }

    cell.textLabel.text = [self menu:self tableView:tableView titleForRowAtIndexPath:indexPath];

    if(tableView == _leftTableView){
        cell.backgroundColor = [UIColor whiteColor];
    }else{
        UIView *sView = [[UIView alloc] init];
        sView.backgroundColor = [UIColor whiteColor];
        cell.selectedBackgroundView = sView;
        
//    setSelected:animated:  设置选中项 :激活
//        Sets the selected state of the cell, optionally animating the transition between states.
// 设置cell的选择状态,可以选择过度状态之间的动画
        [cell setSelected:YES animated:YES];
        cell.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.f];
    }
    cell.textLabel.font = [UIFont systemFontOfSize:14.0];
    cell.separatorInset = UIEdgeInsetsZero;
    return cell;
}


#pragma mark - tableview delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
        if (tableView == self.leftTableView) {
            [self animateBackGroundView:_backGroundView show:NO complete:^{
                [self animateTableViewShow:NO complete:^{
                    
                    /*-----------------------------更改表头显示------------------------------*/
                    
                    UIButton *changeButton=(UIButton*)[self viewWithTag:currentSelectedMenudIndex];
                    UITableViewCell *tmpcell=[tableView cellForRowAtIndexPath:indexPath];
                    NSString *tmpString=tmpcell.textLabel.text;
                    [changeButton setTitle:tmpString forState:UIControlStateNormal];
                    _show =!_show;
                }];
            }];
        }
    
    [self menu:self tableView:tableView didSelectRowAtIndexPath:indexPath andCurrent:currentSelectedMenudIndex-1];
    
}


#pragma mark- 处理数据
- (NSInteger)menu:(DropDownClass *)menu tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section;
{
    if (tableView == menu.rightTableView) {
        return [[[dataArray objectAtIndex:currentSelectedMenudIndex-1] objectAtIndex:1] count];
    }else{
        return [CurrentArray count];
    }
}

- (NSString *)menu:(DropDownClass *)menu tableView:(UITableView*)tableView titleForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if(tableView==menu.rightTableView)
    {
//        return cityArr[indexPath.row];
        return [[[dataArray objectAtIndex:currentSelectedMenudIndex-1]objectAtIndex:1] objectAtIndex:indexPath.row];
    }else{
        return [CurrentArray objectAtIndex:indexPath.row];
    }
}
/*--------------------------------点击右栏展示(刷新)左栏-----------------------------------*/
- (void)menu:(DropDownClass *)menu tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath andCurrent:(NSInteger)culm
{
    if(tableView == menu.rightTableView){
        menu.CurrentArray=[[[menu.dataArray objectAtIndex:culm] objectAtIndex:2]objectAtIndex:indexPath.row];
        [menu.leftTableView reloadData];
    }
}

-(NSMutableArray*)getData
{
    NSMutableArray *tmpArray=[NSMutableArray new];
    
    for (int i=1; i<=currentSelectedMenudIndex; i++) {
        UIButton *tmpbutton=(UIButton*)[self viewWithTag:i];
        NSString *tmpString=tmpbutton.titleLabel.text;
        [tmpArray addObject:tmpString];
    }
    return tmpArray;
}

源代码

https://git.oschina.net/zhengaoxing/DropDownMenuDemo-IOS
本文地址:http://blog.csdn.net/zhenggaoxing/article/details/42968555 
转载请注明出处

抱歉!评论已关闭.