iOS自定义控件：一个简易的Combobox

镇楼专用图

代码简单易懂，属于自己练手的代码，还在学习，写的不好，希望勿喷
1、头文件

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSInteger, WDComboBoxControlDirection) {
    WDComboBoxControlDirectionTop,
    WDComboBoxControlDirectionLeading,
    WDComboBoxControlDirectionTrailing,
    WDComboBoxControlDirectionBottom,
};

@protocol WDComboBoxControlDataSource <NSObject>
@optional
/** < 数据数组 > */
- (NSArray<NSArray<NSString *> *> *)dataSourceOfColunm;
@required
/** < 标题数组 > */
- (NSArray<NSString *> *)titleOfSection;
@end

@protocol WDComboBoxControlDelegate <NSObject>

/**
 点击事件
 
 @param indexPath indexPath description
 @param title title description
 @param sourceView sourceView description
 */
- (void)selectedAtIndexPath:(NSIndexPath *)indexPath resultTitle:(NSString *)title fromSourceView:(UIView *)sourceView;
@end

@interface WDComboBoxControl : UIView

@property (nonatomic, weak) id <WDComboBoxControlDataSource> dataSource;
@property (nonatomic, weak) id <WDComboBoxControlDelegate> delegate;
/** < 背景按钮，可以定义需要的属性 > */
@property (nonatomic, strong) UIButton *backgroundButton;
/** < 内容TableView，也可以定义一些属性 > */
@property (nonatomic, strong) UITableView *tableView;

/**
 初始化方法

 @param height 显示内容高度
 @param view 参考View
 @return return value description
 */
- (instancetype)initViewWithMaxHeight:(CGFloat)height fromView:(UIView *)view showDirection:(WDComboBoxControlDirection)direction;
/**
 显示页面
 */
- (void)showInView;

@end

NS_ASSUME_NONNULL_END

2、实现文件

#import "WDComboBoxControl.h"

@interface WDComboBoxControl () <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, assign) CGFloat viewHeight;
@property (nonatomic, strong) NSArray<NSArray<NSString *> *> * dataArray;
@property (nonatomic, strong) NSArray<NSString *> * titleArray;
@property (nonatomic, strong) UIView *sourceView;
@property (nonatomic, assign) WDComboBoxControlDirection direction;
@end

@implementation WDComboBoxControl

#pragma mark =============== 初始化页面 ===============
- (instancetype)initViewWithMaxHeight:(CGFloat)height fromView:(UIView *)view showDirection:(WDComboBoxControlDirection)direction {
    self = [super init];
    if (self) {
        _viewHeight = height;
        _sourceView = view;
        _direction = direction;
        [self setupSubViewsPropertys];
        [self setupSubViewsConstraints];
    }
    return self;
}

#pragma mark =============== 显示页面 ===============
- (void)showInView {
    self.frame = UIScreen.mainScreen.bounds;
    [UIApplication.sharedApplication.delegate.window addSubview:self];
}

#pragma mark =============== 让页面消失 ===============
- (void)dismisssView {
    [self removeFromSuperview];
}

#pragma mark =============== 获取数据源 ===============
- (void)setDataSource:(id<WDComboBoxControlDataSource>)dataSource {
    _dataSource = dataSource;
    if (self.dataSource && [self.dataSource respondsToSelector:@selector(dataSourceOfColunm)]) {
        self.dataArray = [self.dataSource dataSourceOfColunm];
    }
    
    if (self.dataArray && [self.dataSource respondsToSelector:@selector(titleOfSection)]) {
        self.titleArray =  [self.dataSource titleOfSection];
    }
    
    [self.tableView reloadData];
}

#pragma mark =============== Add controls, set properties ===============
- (void)setupSubViewsPropertys {
    self.backgroundButton = [[UIButton alloc] init];
    self.backgroundButton.backgroundColor = UIColor.clearColor;
    [self.backgroundButton addTarget:self action:@selector(dismisssView) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:self.backgroundButton];
    
    self.tableView = [[UITableView alloc] init];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    self.tableView.tableFooterView = [[UIView alloc] init];
    self.tableView.layer.borderColor = UIColor.lightGrayColor.CGColor;
    self.tableView.layer.borderWidth = 0.5;
    self.tableView.estimatedRowHeight = 45;
    self.tableView.layer.cornerRadius = 5;
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    [self addSubview:self.tableView];
}

#pragma mark =============== Setting control layout constraints ===============
- (void)setupSubViewsConstraints {
    self.backgroundButton.frame = UIScreen.mainScreen.bounds;
    
    switch (self.direction) {
        case WDComboBoxControlDirectionBottom:{
            self.tableView.frame = CGRectMake(CGRectGetMinX(self.sourceView.frame),
                                              CGRectGetMaxY(self.sourceView.frame),
                                              self.sourceView.frame.size.width,
                                              self.viewHeight);
        }
            break;
        case WDComboBoxControlDirectionTop:{
            self.tableView.frame = CGRectMake(CGRectGetMinX(self.sourceView.frame),
                                              CGRectGetMaxY(self.sourceView.frame) - self.viewHeight - self.sourceView.frame.size.height,
                                              self.sourceView.frame.size.width,
                                              self.viewHeight);
        }
            break;
        case WDComboBoxControlDirectionLeading:{
            self.tableView.frame = CGRectMake(CGRectGetMinX(self.sourceView.frame) - self.sourceView.frame.size.width,
                                              CGRectGetMinY(self.sourceView.frame),
                                              self.sourceView.frame.size.width,
                                              self.viewHeight);
        }
            break;
        case WDComboBoxControlDirectionTrailing:{
            self.tableView.frame = CGRectMake(CGRectGetMinX(self.sourceView.frame) + self.sourceView.frame.size.width,
                                              CGRectGetMinY(self.sourceView.frame),
                                              self.sourceView.frame.size.width,
                                              self.viewHeight);
        }
            break;
        default:
            break;
    }    
}

#pragma mark =============== UITableViewDelegate, UITableViewDataSource ===============
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    return self.titleArray[section];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.dataArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.dataArray[section] count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    cell.textLabel.text = self.dataArray[indexPath.section][indexPath.row];
    cell.textLabel.numberOfLines = 0;
    
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (self.delegate && [self.delegate respondsToSelector:@selector(selectedAtIndexPath:resultTitle: fromSourceView:)]) {
        [self.delegate selectedAtIndexPath:indexPath resultTitle:self.dataArray[indexPath.section][indexPath.row] fromSourceView:self.sourceView];
        [self dismisssView];
    }
}
@end

3、使用方法

// 1、导入头文件
#import "WDComboBoxControl.h"
// 2、遵循代理和数据源
<WDComboBoxControlDataSource, WDComboBoxControlDelegate>
// 3、实现方法
#pragma mark =============== WDComBoxControlDataSource ===============
- (NSArray<NSString *> *)titleOfSection;
- (NSArray<NSArray<NSString *> *> *)dataSourceOfColunm;

#pragma mark =============== WDComBoxControlDelegate ===============
- (void)selectedAtIndexPath:(NSIndexPath *)indexPath resultTitle:(NSString *)title fromSourceView:(UIView *)sourceView;


// 下面是实例：
@property (nonatomic, strong) UIButton *button;
@property (nonatomic, strong) UIButton *button2;
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIButton *button = [[UIButton alloc] init];
    [button setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
    [button addTarget:self action:@selector(buttonShow:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    button.layer.borderColor = UIColor.lightGrayColor.CGColor;
    button.layer.borderWidth = 0.5;
    [button setTitle:@"按钮" forState:UIControlStateNormal];
    [button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(self.view);
        make.top.mas_equalTo(self.wdNavigationBar.mas_bottom);
        make.width.mas_equalTo(300);

    }];
    self.button = button;
    
    
    UIButton *button2 = [[UIButton alloc] init];
    [button2 setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
    [button2 addTarget:self action:@selector(buttonShow:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button2];
    button2.layer.borderColor = UIColor.lightGrayColor.CGColor;
    button2.layer.borderWidth = 0.5;
    [button2 setTitle:@"按钮2" forState:UIControlStateNormal];
    button2.bounds = CGRectMake(0, 0, 300, 50);
    button2.center = self.view.center;
    self.button2 = button2;
}
- (void)buttonShow:(UIButton *)sender {
    WDComboBoxControl *view = [[WDComboBoxControl alloc] initViewWithMaxHeight:400 fromView:sender showDirection:WDComboBoxControlDirectionBottom];
    view.dataSource = self;
    view.delegate = self;
    view.backgroundButton.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3];
    [view showInView];
}

#pragma mark =============== WDComBoxControlDataSource ===============
- (NSArray<NSString *> *)titleOfSection {
    return @[@"安徽省", @"浙江省", @"江苏省", @"安徽省", @"浙江省", @"江苏省"];
}

- (NSArray<NSArray<NSString *> *> *)dataSourceOfColunm {
    return @[@[@"合肥", @"芜湖", @"安庆"],
             @[@"南京", @"苏州", @"无锡"],
             @[@"杭州", @"宁波", @"温州"],
             @[@"合肥", @"芜湖", @"安庆"],
             @[@"南京", @"苏州", @"无锡"],
             @[@"杭州", @"宁波", @"温州"]];
}

#pragma mark =============== WDComBoxControlDelegate ===============
- (void)selectedAtIndexPath:(NSIndexPath *)indexPath resultTitle:(NSString *)title fromSourceView:(UIView *)sourceView {
    UIButton *sender = (UIButton *)sourceView;
    [sender setTitle:title forState:UIControlStateNormal];
}

4、效果图


效果图

5、Demo地址（代码都在这里了，就不弄个Demo了，这个可以自定义的地方还有很多，TableView和背景的Button都可以，随心所欲吧！）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,997评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,603评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,359评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,309评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,346评论 6赞 390
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,258评论 1赞 300
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,122评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,970评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,403评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,464评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,075评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2赞 354