2018-04-27

作者: 狂妄的雄狮 | 来源:发表于2018-04-27 15:59 被阅读0次

    ios开发之区域地区选择下拉框,如下图:

    屏幕快照 2018-04-27 下午3.42.43.png
    • 下拉框,出现和消失带有动画,下面有黑色半透明背景图遮盖
    • 左右列表是有两个tableView联动实现

    关键代码实现

    .m文件代码
    @implementation AddressSelectionView
    //初始化列表View
    + (instancetype)shareUpDownView
    {
        AddressSelectionView *upDown = [[[NSBundle mainBundle]loadNibNamed:@"AddressSelectionView" owner:nil options:nil] firstObject];
        //添加点击手势
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:upDown action:@selector(tapClick:)];
        [upDown addGestureRecognizer:tap];
        return upDown;
    }
    //下面半透明黑色背景View
    - (UIView *)shadowView
    {
    if (!_shadowView) {
        _shadowView = [[UIView alloc] init];
        _shadowView.userInteractionEnabled = YES;
        _shadowView.backgroundColor = [UIColor blackColor];
        _shadowView.alpha = 0.0;
    }
    return _shadowView;
    }
    //两个tableView的父视图View
    - (UIView *)listView
    {
    if (!_listView) {
        _listView = [[UIView alloc] init];
        _listView.backgroundColor = [UIColor whiteColor];
        _listView.frame = CGRectMake(0, MaxY(self) + 1, ScreenW, 0);
    }
    return _listView;
    }
    //加载左边列表
    - (UITableView *)leftTableview
    {
    if (!_leftTableview) {
        _leftTableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 101, _listView.bounds.size.height) style:UITableViewStylePlain];
        _leftTableview.separatorStyle = UITableViewCellSeparatorStyleNone;
        //取消弹簧效果
        _leftTableview.bounces = NO;
        _leftTableview.showsVerticalScrollIndicator = NO;
        _leftTableview.layer.borderColor = BACKGROUD_CL.CGColor;//设置边框颜色
        _leftTableview.layer.borderWidth = 1.0f;//设置线宽
        
        _leftTableview.dataSource = self;
        _leftTableview.delegate = self;
    }
    return  _leftTableview;
    }
    //加载右边列表
    - (UITableView *)rightTableview
    {
    if (!_rightTableview) {
        _rightTableview = [[UITableView alloc] initWithFrame:CGRectMake(MaxX(self.leftTableview), 0, ScreenW - self.leftTableview.frame.size.width, _listView.bounds.size.height) style:UITableViewStylePlain];
        //取消弹簧效果
        _rightTableview.showsVerticalScrollIndicator = NO;
        _rightTableview.bounces = NO;
        _rightTableview.separatorStyle = UITableViewCellSeparatorStyleNone;
        _rightTableview.dataSource = self;
        _rightTableview.delegate = self;
        
    }
    return  _rightTableview;
    }
    //手势触发事件
    - (void)tapClick:(UITapGestureRecognizer *)tapRecognizer
    {
    //添加阴影View
    [[[UIApplication sharedApplication].delegate window]  addSubview:self.shadowView];
    //添加listView
    [[[UIApplication sharedApplication].delegate window]  addSubview:self.listView];
    if (!self.isOpen) {
        //显示地区列表
        [self showDropDown];
    }else
    {
        //隐藏地区列表
        [self hideDropDown];
    }
    
    }
    - (void)showDropDown{   // 显示下拉列表
    
    self.shadowView.frame = CGRectMake(0, MaxY(self.listView), ScreenW, ScreenH - MaxY(self.listView));
    [self.listView.superview bringSubviewToFront:_listView]; // 将下拉列表置于最上层
    [UIView animateWithDuration:AnimateTime animations:^{
        
        self.listView.h = 200;
        self.leftTableview.h = self.listView.bounds.size.height;
        self.rightTableview.h = self.listView.bounds.size.height;
        _shadowView.alpha = 0.8;
    }completion:nil];
    
    self.isOpen = YES;
    }
    - (void)hideDropDown{  // 隐藏下拉列表
    //动画改变控件的高度
    [UIView animateWithDuration:AnimateTime animations:^{
        
        self.listView.h = 0;
        self.leftTableview.h = self.listView.bounds.size.height;
        self.rightTableview.h = self.listView.bounds.size.height;
        self.shadowView.alpha = 0.0;
    }completion:^(BOOL finished) {
        //移除listView
        [self.listView removeFromSuperview];
        [self.shadowView removeFromSuperview];
    }];
    
    self.isOpen = NO;
    }
    
    
    .h文件实现代码
    //添加一个代理,在点击右侧tableView时触发
    @protocol AddressSelectionViewDelegate<NSObject>
    - (void)addressSelectionView:(AddressSelectionView *)addressSelectionView didSelectLocation:(NSString *)location detailLocation:(NSString *)detailLocation;
    @end
    //点击右侧按钮实现代码
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
    //点击左边加载右边的数据
    if (tableView == self.leftTableview) {
        self.currentLocation = [self.dataDict allKeys][indexPath.row];
        [self.rightTableview reloadData];
    }else
    {
        NSString *detailLocation = self.detailLocations[indexPath.row];
        //实现代理
        if ([self.delegate respondsToSelector:@selector(addressSelectionView:didSelectLocation:detailLocation:)]) {
            [self.delegate addressSelectionView:self didSelectLocation:self.currentLocation detailLocation:detailLocation];
        }
        //隐藏下拉列表
        //[self hideDropDown];
    }
    
    }
    

    就此为该下拉框实现的关键代码,如果有不好的地方,希望能够指出来,共同学习。

    相关文章

      网友评论

        本文标题:2018-04-27

        本文链接:https://www.haomeiwen.com/subject/przblftx.html