【转】iOS 下拉列表控件
原文网址:iOS 下拉列表控件 – 简书 (jianshu.com)
自己封装了一个简单的下拉列表控件,会根据控件所在屏幕位置自动计算列表是该向上还是向下弹出,调用简单。
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.下拉框弹出的起始位置是根据控件所在屏幕上的位置去计算的。