iOS 下拉列表控件

自己封装了一个简单的下拉列表控件，会根据控件所在屏幕位置自动计算列表是该向上还是向下弹出，调用简单。

github地址: https://github.com/woheduole/EBDropdownListView

效果图

调用方式

    // 数据源
    EBDropdownListItem *item1 = [[EBDropdownListItem alloc] initWithItem:@"1" itemName:@"item1"];
    EBDropdownListItem *item2 = [[EBDropdownListItem alloc] initWithItem:@"2" itemName:@"item2"];
    EBDropdownListItem *item3 = [[EBDropdownListItem alloc] initWithItem:@"3" itemName:@"item3"];
    EBDropdownListItem *item4 = [[EBDropdownListItem alloc] initWithItem:@"4" itemName:@"item4"];

    EBDropdownListView *dropdownListView = [[EBDropdownListView alloc] initWithDataSource:@[item1, item2, item3, item4]];
    dropdownListView.frame = CGRectMake(20, 100, 130, 30);
    // 设置当前显示第几项，默认为0
    dropdownListView.selectedIndex = 2;
    // 字体默认14
    //dropdownListView.font = [UIFont systemFontOfSize:14];
    // 默认颜色blackColor
    //dropdownListView.textColor = [UIColor blackColor];
    [dropdownListView setViewBorder:0.5 borderColor:[UIColor grayColor] cornerRadius:2];
    [self.view addSubview:dropdownListView];
    
    [dropdownListView setDropdownListViewSelectedBlock:^(EBDropdownListView *dropdownListView) {
        NSString *msgString = [NSString stringWithFormat:
                               @"selected name:%@  id:%@  index:%ld"
                               , dropdownListView.selectedItem.itemName
                               , dropdownListView.selectedItem.itemId
                               , dropdownListView.selectedIndex];
        
        msgLabel.text = msgString;
        
    }];
复制代码

代码结构

• 定义一个Model类，用于存放下拉列表的数据

@interface EBDropdownListItem : NSObject
@property (nonatomic, copy, readonly) NSString *itemId;
@property (nonatomic, copy, readonly) NSString *itemName;
- (instancetype)initWithItem:(NSString*)itemId itemName:(NSString*)itemName NS_DESIGNATED_INITIALIZER;
@end
复制代码

#import "EBDropdownListView.h"
@implementation EBDropdownListItem
- (instancetype)initWithItem:(NSString*)itemId itemName:(NSString*)itemName {
    self = [super init];
    if (self) {
        _itemId = itemId;
        _itemName = itemName;
    }
    return self;
}

- (instancetype)init {
    return [self initWithItem:nil itemName:nil];
}
@end
复制代码

• 创建EBDropdownListView继承自UIView

typedef void (^EBDropdownListViewSelectedBlock)(EBDropdownListView *dropdownListView);

@interface EBDropdownListView : UIView
// 字体颜色，默认 blackColor
@property (nonatomic, strong) UIColor *textColor;
// 字体默认14
@property (nonatomic, strong) UIFont *font;
// 数据源
@property (nonatomic, strong) NSArray *dataSource;
// 默认选中第一个
@property (nonatomic, assign) NSUInteger selectedIndex;
// 当前选中的DropdownListItem
@property (nonatomic, strong, readonly) EBDropdownListItem *selectedItem;


- (instancetype)initWithDataSource:(NSArray*)dataSource;

- (void)setViewBorder:(CGFloat)width borderColor:(UIColor*)borderColor cornerRadius:(CGFloat)cornerRadius;

- (void)setDropdownListViewSelectedBlock:(EBDropdownListViewSelectedBlock)block;
复制代码

代码都挺简单的，可以设置字体大小、颜色、数据源、选中项。 默认是没有边框的，可以通过setViewBorder 方法去设置。EBDropdownListViewSelectedBlock选中下拉列表项时的回调。

备注:

该控件两点比较重要的地方: 1.点击控件弹出的下拉框是放在UIWindows上的，这样就不会被父视图或其他视图所遮挡。 2.下拉框弹出的起始位置是根据控件所在屏幕上的位置去计算的。

github地址: https://github.com/woheduole/EBDropdownListView