iOS 下拉列表控件

作者: 我喝多了 | 来源:发表于2018-04-22 10:39 被阅读239次

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

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

    效果图

    ebdropdownlistview.gif

    调用方式

        // 数据源
        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

    相关文章

      网友评论

      • 家振要翻天:这个数据多的时候会出现问题 有修改的办法吗?

      本文标题:iOS 下拉列表控件

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