美文网首页
iOS 筛选工具实现方案

iOS 筛选工具实现方案

作者: 032c6843a285 | 来源:发表于2019-04-05 17:17 被阅读0次

前言

笔者写了好几回筛选工具,发现很多app中也有这种玩意,写的不好,出于分享心态~,接下来我通过代码给大家实现下这个工具,直接上代码了.就没有demo了,先来个效果图(代码中只实现2种情况做介绍)

关系图 单选 双选

1.创建 存放按钮的 ATChooseToolView:UIView

  #import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@protocol ATChooseToolViewDelegate <NSObject>

// 点击按钮
-(void)chooseControlWithBtnArray:(NSArray *)array button:(UIButton *)sender;


@end

@interface ATChooseToolView : UIView

@property(nonatomic ,strong) NSArray *titleArr;

@property(nonatomic ,weak) id<ATChooseToolViewDelegate> delegate;
// 按钮数组
@property(nonatomic ,strong) NSMutableArray <UIButton *>*btnArr;

-(void)setUpAllViewWithTitleArr:(NSArray *)titleArr;


@end

NS_ASSUME_NONNULL_END

#import "ATChooseToolView.h"
#import "ATChooseButton.h"

@interface ATChooseToolView()

@property(nonatomic ,strong) UIView  *btnBackView;

@end

@implementation ATChooseToolView
-(instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = k_WhiteColor;
        self.btnBackView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 44)];
        [self addSubview:self.btnBackView];
        //线条
        [self addSubview:[ATGeneralFuncUtil addLineView:CGRectMake(0, 44-0.5, SCREEN_WIDTH, 0.5)]];
    }
    return self;
}

- (void)setUpAllViewWithTitleArr:(NSArray *)titleArr{
    //创建按钮
    
    for (int i = 0; i<titleArr.count; i++) {
        ATChooseButton *btn = [[ATChooseButton alloc]init];
        [btn setTitle:titleArr[i] forState:UIControlStateNormal];
        [btn setTitleColor:k_MainTitleColor forState:UIControlStateNormal];
        [btn setTitleColor:k_MainColor forState:UIControlStateSelected];
        [btn setImage:kImageName(@"ic_list_tabuparrows_bg") forState:UIControlStateNormal];
        [btn setImage:kImageName(@"ic_list_tabarrowsdown_bg")  forState:UIControlStateSelected];
        btn.imageAlignment = SWImageAlignmentRight;
        btn.spaceBetweenTitleAndImage = 3;
        btn.tag = i;
        btn.titleLabel.font = kFontWithSize(16);
        CGFloat btnW = kScreenWidth/titleArr.count;
        CGFloat btnX = i*btnW;
        btn.frame = CGRectMake(btnX, 0, btnW, 45);
        [self.btnBackView addSubview:btn];
        SWWeakSelf(self)
        [btn addBlockForControlEvents:UIControlEventTouchUpInside block:^(id  _Nonnull sender) {
            SWStrongSelf(self)
            UIButton *senderBtn = (UIButton *)sender;
             senderBtn.selected = !senderBtn.selected;
            if ([self.delegate respondsToSelector:@selector(chooseControlWithBtnArray:button:)]) {
                [self.delegate chooseControlWithBtnArray:self.btnArr button:sender];
            }
        }];
        [self.btnArr addObject:btn];
    }
    //画线
    CGFloat margin = kScreenWidth/titleArr.count;
    for (int i = 0; i<titleArr.count - 1; i++) {
        UIView *line = [[UIView alloc]init];
        line.backgroundColor = k_VcBgColor;
        CGFloat w = 0.5;
        CGFloat h = 23;
        CGFloat x = (margin + w) * (i+1);
        CGFloat y = 8;
        line.frame = CGRectMake(x, y, w, h);
        [self.btnBackView addSubview:line];
    }
    
}
-(NSMutableArray *)btnArr{
    if (!_btnArr) {
        _btnArr = [NSMutableArray array];
    }
    return _btnArr;
}


@end

2.创建自定义button,一般都是箭头 上下选中的效果

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

/**
 *  按钮中图片的位置
 */
typedef NS_ENUM(NSUInteger, SWImageAlignment) {
    /**
     *  图片在左,默认
     */
    SWImageAlignmentLeft = 0,
    /**
     *  图片在上
     */
    SWImageAlignmentTop,
    /**
     *  图片在下
     */
    SWImageAlignmentBottom,
    /**
     *  图片在右
     */
    SWImageAlignmentRight,
};

@interface ATChooseButton : UIButton
/**
 *  按钮中图片的位置
 */
@property(nonatomic,assign)SWImageAlignment imageAlignment;
/**
 *  按钮中图片与文字的间距
 */
@property(nonatomic,assign)CGFloat spaceBetweenTitleAndImage;
@end

NS_ASSUME_NONNULL_END
#import "ATChooseButton.h"

@implementation ATChooseButton
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    CGFloat space = self.spaceBetweenTitleAndImage;
    
    
    CGFloat titleW = CGRectGetWidth(self.titleLabel.bounds);//titleLabel的宽度
    CGFloat titleH = CGRectGetHeight(self.titleLabel.bounds);//titleLabel的高度
    
    CGFloat imageW = CGRectGetWidth(self.imageView.bounds);//imageView的宽度
    CGFloat imageH = CGRectGetHeight(self.imageView.bounds);//imageView的高度
    
    CGFloat btnCenterX = CGRectGetWidth(self.bounds)/2;//按钮中心点X的坐标(以按钮左上角为原点的坐标系)
    CGFloat imageCenterX = btnCenterX - titleW/2;//imageView中心点X的坐标(以按钮左上角为原点的坐标系)
    CGFloat titleCenterX = btnCenterX + imageW/2;//titleLabel中心点X的坐标(以按钮左上角为原点的坐标系)
    
    
    switch (self.imageAlignment)
    {
        case SWImageAlignmentTop:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake(imageH/2+ space/2, -(titleCenterX-btnCenterX), -(imageH/2 + space/2), titleCenterX-btnCenterX);
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleH/2 + space/2), btnCenterX-imageCenterX, titleH/2+ space/2, -(btnCenterX-imageCenterX));
        }
            break;
        case SWImageAlignmentLeft:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake(0, space/2, 0,  -space/2);
            self.imageEdgeInsets = UIEdgeInsetsMake(0, -space/2, 0, space);
        }
            break;
        case SWImageAlignmentBottom:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake(-(imageH/2+ space/2), -(titleCenterX-btnCenterX), imageH/2 + space/2, titleCenterX-btnCenterX);
            self.imageEdgeInsets = UIEdgeInsetsMake(titleH/2 + space/2, btnCenterX-imageCenterX,-(titleH/2+ space/2), -(btnCenterX-imageCenterX));
        }
            break;
        case SWImageAlignmentRight:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageW + space/2), 0, imageW + space/2);
            self.imageEdgeInsets = UIEdgeInsetsMake(0, titleW+space/2, 0, -(titleW+space/2));
        }
            break;
        default:
            break;
    }
}
@end

3.控制器中初始化添加

NSArray *array = @[@"城市",@"岗位",@"学历",@"年龄",@"来源"];
    ATChooseToolView *chooseView = [[ATChooseToolView alloc]initWithFrame:CGRectMake(0, 12, ScreenWidth, 44)];
    chooseView.delegate = self;
    [chooseView setUpAllViewWithTitleArr:array];
    _chooseControlView = chooseView;
    [self.mainView addSubview:chooseView];
    [self.mainView addSubview:self.mainTable];


//实现按钮点击代理
- (void)chooseControlWithBtnArray:(NSArray *)array button:(UIButton *)sender{
    [self.view addSubview:self.chooseShowView];
    self.chooseShowView.hidden = NO;
    [self.chooseShowView chooseControlViewBtnArray:array Action:sender];
}

4.创建 ATChooseShowView:UIView(负责弹出收回回调最终后端需要的筛选参数)

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN


@protocol ATChooseShowViewDelegate <NSObject>

/**
 * 第一个View的选中事件
 
 @param leftIndex 选中的索引
 @param rightIndex 选中的索引
 */
-(void)chooseOneViewWithTableLeftIndex:(NSInteger)leftIndex rightIndex:(NSInteger)rightIndex;
/**
 * 第二个View的选中事件
 
 @param leftindex 选中的索引
 @param rightIndex 选中的索引
 */
-(void)chooseTwoViewCellDidSelectedWithLeftIndex:(NSInteger)leftindex rightIndex:(NSInteger)rightIndex mcid:(NSString *)mc_id;
/**
 * 第三个View的选中事件
 
 @param index 选中的索引
 */
-(void)chooseThreeViewCellDidSelectedWithIndex:(NSInteger)index;
/**
 * 第四个View的选中事件
 
 */
-(void)chooseFourViewBtnResultWithIsProm:(BOOL)isprom isVer:(BOOL)isver;

@end

@interface ATChooseShowView : UIView
// 按钮数组
@property(nonatomic ,strong) NSArray        *btnArray;
@property(nonatomic ,strong) UIView         *hiddenView;

//@property(nonatomic ,strong) NSArray        *merCateArray;
//@property(nonatomic ,strong) NSArray        *childCateArr;

// 索引
//@property(nonatomic ,assign) NSInteger      twoLeftIndex;
//@property(nonatomic ,assign) NSInteger      twoRightIndex;
@property(nonatomic ,weak) id<ATChooseShowViewDelegate> delegate;

/**
 * 初始化筛选View
 
 @param btnArr 标题数组
 @param sender 辩题按钮
 */
-(void)chooseControlViewBtnArray:(NSArray *)btnArr Action:(UIButton *)sender;

//自定义一些外部传入数据源的方法,给当前View点m内部使用
- (void)setupOneData:(NSMutableArray *)leftData rightData:(NSMutableArray *)rightData;//第一组弹出的数据

@end

NS_ASSUME_NONNULL_END
#import "ATChooseShowView.h"
#import "ATDoubleChildView.h"
#import "ATSingleChildView.h"

typedef NS_ENUM(NSInteger,ATChooseViewShowType) {
    ATChooseViewShowTypeOne,
    ATChooseViewShowTypeTwo,
    ATChooseViewShowTypeThree,
    ATChooseViewShowTypeFour,
};

@interface ATChooseShowView()<ATDoubleChildViewDelegate,ATSingleChildViewDelegate>


@property(nonatomic ,strong) ATDoubleChildView         *oneView;
@property(nonatomic ,strong) ATDoubleChildView         *twoView;
@property(nonatomic ,strong) ATSingleChildView        *threeView;
@property(nonatomic ,strong) ATSingleChildView        *fourView; //年龄
@property(nonatomic ,strong) ATSingleChildView        *fieView; //来源

//载体 存放View
@property(nonatomic ,strong) NSArray                *viewArray;
// 记录弹出的是哪一个视图
@property(nonatomic ,assign) ATChooseViewShowType      selctChooseView;
// 记录选中的按钮
@property(nonatomic ,strong) UIButton               *seleBtn;

//模拟数据
@property(nonatomic ,strong) NSArray                *threeTitleArr;
@property(nonatomic ,strong) NSArray                *fourTitleArr;

//模拟第一组需要的数据
@property(nonatomic ,strong) NSArray        *allMerAreaArr;
@property(nonatomic ,strong) NSArray        *childMerArr;

@end

@implementation ATChooseShowView

-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {

        [self setUpAllView];
    }
    return self;
}


-(void)setUpAllView{
    self.backgroundColor = [UIColor colorWithRed:1/255.0 green:1/255.0 blue:1/255.0 alpha:0.0];
    self.threeTitleArr = @[@"智能排序",@"离我最近",@"星级最高",@"人气最高",@"价格最低",@"价格最高"];
    self.fourTitleArr =  @[@"2000-3000",@"3000-5000",@"5000-8000",@"8000-12000",@"12000-20000"];
    //传入一个类型 加载不一样的 筛选按钮界面
    
    self.viewArray = @[self.oneView,self.twoView,self.threeView,self.fourView,self.fieView];
    [self addSubview:self.hiddenView];
    UITapGestureRecognizer *tap= [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(hideViewAction:)];
    [self.hiddenView addGestureRecognizer:tap];
}

//模拟赋值
- (void)setupOneData:(NSMutableArray *)leftData rightData:(NSMutableArray *)rightData{
    self.oneView.leftDataArray = leftData;
    self.oneView.rightDataArray = rightData;
}

#pragma mark - 逻辑处理
#pragma mark -  点击筛选按钮
-(void)chooseControlViewBtnArray:(NSArray *)btnArr Action:(UIButton *)sender{
    //记录选中
    self.seleBtn = sender;
    for (int i = 0; i<btnArr.count; i++) {
        UIButton *btn = btnArr[i];
        if (btn.tag == sender.tag) {
        }else{
            btn.selected = NO;
        }
    }
    self.selctChooseView = sender.tag;
    //1.选中一个按钮后,其他按钮设置为未选中状态,并且关闭其他按钮绑定的弹出View
    switch (sender.tag) {
        case 0:
            if (sender.selected) {
                [self hideOtherChilView:self.oneView]; //隐藏其他
                [self showSubViews:self.oneView];  //弹出自己
            }else{
                [self hideSuviews:self.oneView]; //收回自己
            }
            break;
            
        case 1:
            if (sender.selected) {
                [self hideOtherChilView:self.twoView];
                [self showSubViews:self.twoView];
            }else{
                [self hideSuviews:self.twoView];
            }
            break;
            
        case 2:
            if (sender.selected) {
                [self hideOtherChilView:self.threeView];
                [self showSubViews:self.threeView];
            }else{
                [self hideSuviews:self.threeView];
            }
            break;
            
        case 3:
            if (sender.selected) {
                [self hideOtherChilView:self.fourView];
                [self showSubViews:self.fourView];
            }else{
                [self hideSuviews:self.fourView];
            }
            break;
            
        case 4:
            if (sender.selected) {
                [self hideOtherChilView:self.fieView];
                [self showSubViews:self.fieView];
            }else{
                [self hideSuviews:self.fieView];
            }
            break;
            
        default:
            break;
    }
}

#pragma mark - 隐藏其他视图
- (void)hideOtherChilView:(UIView *)currentView{
    for (UIView *view  in self.viewArray) {
        if (currentView != view) {
            view.hidden = YES;
            view.frame = CGRectMake(0, 0, SCREEN_WIDTH, 0);
            for (UITableView *tableView in view.subviews) {
                tableView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 0);
            }
        }
    }
}
#pragma mark - 其他操作,隐藏当前视图
-(void)hideViewAction:(UITapGestureRecognizer *)gesture{
    // 改变按钮的状态
    self.seleBtn.selected = !self.seleBtn.isSelected;
    // 隐藏视图
    switch (self.selctChooseView) {
        case 0:
            [self hideSuviews:self.oneView];
            break;
        case 1:
            [self hideSuviews:self.twoView];
            break;
        case 2:
            [self hideSuviews:self.threeView];
            break;
        case 3:
            [self hideSuviews:self.fourView];
            break;
        case 4:
            [self hideSuviews:self.fieView];
            break;
        default:
            break;
    }
}
#pragma mark - 弹出视图

- (void)showSubViews:(UIView *)currentView{
    [self addSubview:currentView];
    currentView.hidden = NO;
    
    [UIView animateWithDuration:0.25 animations:^{
        
        if (currentView == self.oneView) {
            
            self.oneView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight * 0.55);
            self.oneView.leftTable.frame = CGRectMake(0, 0, kScreenWidth/2, kScreenHeight * 0.55);
            self.oneView.rightTable.frame = CGRectMake(kScreenWidth/2, 0, kScreenWidth/2, kScreenHeight * 0.55);
            
        }else if(currentView == self.twoView){
            
            self.twoView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight * 0.5);
            self.twoView.leftTable.frame = CGRectMake(0, 0, kScreenWidth/2, kScreenHeight * 0.5);
            self.twoView.rightTable.frame = CGRectMake(kScreenWidth/2, 0, kScreenWidth/2, kScreenHeight * 0.5);
            
        }else if(currentView == self.threeView){
            
            self.threeView.frame = self.threeView.mainTable.frame = CGRectMake(0, 0, kScreenWidth, 280);
   
        }else if(currentView == self.fourView){
            
            self.fourView.frame = self.fourView.mainTable.frame =  CGRectMake(0, 0, kScreenWidth, kTableViewCellNomolHeigh *4);
           
        }else if(currentView == self.fieView){
            
            self.fieView.frame = self.fieView.mainTable.frame =  CGRectMake(0, 0, kScreenWidth, kTableViewCellNomolHeigh *2);
            
        }
            self.backgroundColor = [UIColor colorWithRed:1/255.0 green:1/255.0 blue:1/255.0 alpha:0.3];
    }];
}
#pragma mark - 隐藏视图

//双列表类型
- (void)hideSuviews:(UIView *)currentView{
    self.backgroundColor = [UIColor clearColor];
    [UIView animateWithDuration:.25 animations:^{
        if (currentView == self.oneView) {
            self.oneView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 0);
            self.oneView.leftTable.frame = CGRectMake(0, 0, SCREEN_WIDTH/2, 0);
            self.oneView.rightTable.frame = CGRectMake(SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, 0);
        }else if(currentView == self.twoView){
            self.twoView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 0);
            self.twoView.leftTable.frame = CGRectMake(0, 0, SCREEN_WIDTH/2, 0);
            self.twoView.rightTable.frame = CGRectMake(SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, 0);
        }else if(currentView == self.threeView){
            
            self.threeView.frame = self.threeView.mainTable.frame = CGRectMake(0, 0, SCREEN_WIDTH, 0);
            
        }else if(currentView == self.fourView){
            
           self.fourView.frame = self.fourView.mainTable.frame = CGRectMake(0, 0, SCREEN_WIDTH, 0);
        }else if(currentView == self.fieView){
 
            self.fieView.frame = self.fieView.mainTable.frame =  CGRectMake(0, 0, SCREEN_WIDTH, 0);
            
        }
    }completion:^(BOOL finished) {
       currentView.hidden = YES;
       self.hidden = YES;
    }];
    
}


#pragma mark - 弹出的view视图点击回调

//第一第二个view
- (void)oneViewRightTableviewDidSelectedWithLeftIndex:(NSInteger)leftIndex rightIndex:(NSInteger)rightIndex currentView:(nonnull UIView *)currentView{
    NSLog(@"点击左边的第%ld个,右边的第%ld个",(long)leftIndex,(long)rightIndex);
    [self hideViewAction:nil];
    if ([self.delegate respondsToSelector:@selector(chooseOneViewWithTableLeftIndex:rightIndex:)]) {
        [self.delegate chooseOneViewWithTableLeftIndex:leftIndex rightIndex:rightIndex];
    }
}
- (void)oneViewLeftTableviewDidSelectedWithLeftIndex:(NSInteger)leftIndex rightIndex:(NSInteger)rightIndex currentView:(nonnull UIView *)currentView{
    
}

//第三第四个view
- (void)threeViewTableviewDidSelectedWithIndex:(NSInteger)index currentView:(nonnull UIView *)currentView{
    if (currentView == self.threeView) {
         [self.seleBtn setTitle:self.threeTitleArr[index] forState:UIControlStateNormal];
    }else if (currentView == self.fourView){
//         [self.seleBtn setTitle:self.fourTitleArr[index] forState:UIControlStateNormal];
    }
    else if (currentView == self.fieView){
//        [self.seleBtn setTitle:@[@"自有资源",@"他人资源"][index] forState:UIControlStateNormal];
    }
    [self hideViewAction:nil];
    
}


#pragma mark - 懒加载
-(ATDoubleChildView *)oneView{
    if (!_oneView) {
        _oneView = [[ATDoubleChildView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 0)];
        _oneView.hidden = YES;
        _oneView.backgroundColor = k_WhiteColor;
        _oneView.delegate = self;
    }
    return _oneView;
}

-(ATDoubleChildView *)twoView{
    if (!_twoView) {
        _twoView = [[ATDoubleChildView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 0)];
        _twoView.hidden = YES;
        _twoView.delegate = self;
        _twoView.backgroundColor = k_WhiteColor;
    }
    return _twoView;
}
-(ATSingleChildView *)threeView{
    if (!_threeView) {
        _threeView = [[ATSingleChildView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 0)];
        _threeView.hidden = YES;
        _threeView.delegate = self;
        _threeView.titleArray = self.threeTitleArr;
        _threeView.backgroundColor = k_WhiteColor;
    }
    return _threeView;
}
-(ATSingleChildView *)fourView{
    if (!_fourView) {
        _fourView = [[ATSingleChildView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 0)];
        _fourView.hidden = YES;
        _fourView.delegate = self;
        _fourView.titleArray = @[@"不限",@"18-26岁",@"27-35岁",@"36-45岁"];
        _fourView.backgroundColor = k_WhiteColor;
    }
    return _fourView;
}

-(ATSingleChildView *)fieView{
    if (!_fieView) {
        _fieView = [[ATSingleChildView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 0)];
        _fieView.hidden = YES;
        _fieView.delegate = self;
        _fieView.titleArray = @[@"自有资源",@"他人资源"];
        _fieView.backgroundColor = k_WhiteColor;
    }
    return _fieView;
}

-(UIView *)hiddenView{
    if (!_hiddenView) {
        _hiddenView = [[UIView alloc]init];
    }
    return _hiddenView;
}


-(void)layoutSubviews{
    [super layoutSubviews];
    if (self.oneView.isHidden) {
        CGFloat hiddY = CGRectGetMaxY(self.oneView.frame);
        self.hiddenView.frame = CGRectMake(0, hiddY, kScreenWidth, kScreenHeight - hiddY);
    }else if (self.twoView.isHidden){
        CGFloat hiddY = CGRectGetMaxY(self.twoView.frame);
        self.hiddenView.frame = CGRectMake(0, hiddY, kScreenWidth, kScreenHeight - hiddY);
    }else if (self.threeView.isHidden){
        CGFloat hiddY = CGRectGetMaxY(self.threeView.frame);
        self.hiddenView.frame = CGRectMake(0, hiddY, kScreenWidth, kScreenHeight - hiddY);
    }else if (self.fourView.isHidden){
        CGFloat hiddY = CGRectGetMaxY(self.fourView.frame);
        self.hiddenView.frame = CGRectMake(0, hiddY, kScreenWidth, kScreenHeight - hiddY);
    }else if (self.fieView.isHidden){
        CGFloat hiddY = CGRectGetMaxY(self.fieView.frame);
        self.hiddenView.frame = CGRectMake(0, hiddY, kScreenWidth, kScreenHeight - hiddY);
    }
}


@end

5 创建单选+双tableView列表的view ATSingleChildView && ATDoubleChildView(你要弹出的View)

这个我就不写啦~ ,你们自己画列表即可,点击cell回调给ATChooseShowView,然后通过ATChooseShowView回调给控制器就完成了回调操作;

总结

希望对你有帮助~陌生网友,如果有不懂得,call my QQ392287145

相关文章

网友评论

      本文标题:iOS 筛选工具实现方案

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