2018-04-27

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
- (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];
}

}

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