下拉框選擇效果的實現原理2

2019-11-14 18:33:52

字體：大中小

來源：轉載

供稿：網友

效果如下

原理：使用第三方XTSegmentControl作為上面選項卡的實現，而彈出視圖則是滾動視圖跟每一行里面的UIBUTTON結合打勾圖標相結合的實現方式；源代碼可以下載開源項目Coding.net里的任務模塊；這邊將分簡單的貼出其主要的代碼

1：首先是主頁面的代碼：

        // 添加滑塊 分三組        _one = @[@"全部討論", @"我的討論"];        _two = [NSMutableArray arrayWithObjects:@"全部標簽", nil];        _three = @[@"最后評論排序", @"發布時間排序", @"熱門排序"];        _total = @[_one, _two, _three];                //用于每一組每個的數字        _oneNumber = [NSMutableArray arrayWithObjects:@0, @0, nil];        _twoNumber = [NSMutableArray arrayWithObjects:@0, nil];        _totalIndex = [NSMutableArray arrayWithObjects:@0, @0, @0, nil];        __weak typeof(self) weakSelf = self;                //選項卡的初始化        self.mySegmentControl = [[XTSegmentControl alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, kMySegmentControl_Height)                                                                  Items:@[_one[0], _two[0], _three[0]]                                                               withIcon:YES                                                          selectedBlock:^(NSInteger index) {                                                              //選中哪一組                                                              [weakSelf openList:index];                                                          }];        [self addSubview:self.mySegmentControl];

- (void)openList:(NSInteger)segmentIndex{    TopicListView *lView = (TopicListView *)[self viewWithTag:9898];        //當前是否存在    if (!lView) {        // 不存在則顯示        _segIndex = segmentIndex;        NSArray *lists = (NSArray *)_total[segmentIndex];        CGRect rect = CGRectMake(0, kMySegmentControl_Height, kScreen_Width, self.frame.size.height - kMySegmentControl_Height);        NSArray *nAry = nil;        if (segmentIndex == 0) {            nAry = _oneNumber;        } else if (segmentIndex == 1 && [_totalIndex[0] integerValue] == 0) {            nAry = _twoNumber;        }        __weak typeof(self) weakSelf = self;        TopicListView *listView = [[TopicListView alloc]initWithFrame:rect                                                                titles:lists                                                               numbers:nAry                                                          defaultIndex:[_totalIndex[segmentIndex] integerValue]                                                         selectedBlock:^(NSInteger index) {                                                             [weakSelf changeIndex:index withSegmentIndex:segmentIndex];                                                         }                                                             hideBlock:^() {                                                             [weakSelf.mySegmentControl selectIndex:-1];                                                         }];        listView.tag = 9898;        [self addSubview:listView];        [listView showBtnView];    } else if (_segIndex != segmentIndex) {        // 說明前面已經顯示 選中另外一個 另展示        _segIndex = segmentIndex;                NSArray *nAry = nil;                //因為第三組是沒有數字的        //被選中第一個數字        if (segmentIndex == 0) {            nAry = _oneNumber;        } else if (segmentIndex == 1 && [_totalIndex[0] integerValue] == 0) {            //被選中第二個數字            nAry = _twoNumber;        }                //獲得是哪一組        NSArray *lists = (NSArray *)_total[segmentIndex];        __weak typeof(self) weakSelf = self;        [lView changeWithTitles:lists                        numbers:nAry                   defaultIndex:[_totalIndex[segmentIndex] integerValue]                  selectedBlock:^(NSInteger index) {                       [weakSelf changeIndex:index withSegmentIndex:segmentIndex];                   }                      hideBlock:^() {                          [weakSelf.mySegmentControl selectIndex:-1];                      }];    } else {        // 隱藏        [lView hideBtnView];    }}

其中openList為選中某一選項卡時，彈出相應的視圖內容；

2：橫向選項卡的主要內容：

- (void)initItemsWithTitleArray:(NSArray *)titleArray withIcon:(BOOL)isIcon{    _itemFrames = @[].mutableCopy;    _items = @[].mutableCopy;    float y = 0;    float height = CGRectGetHeight(self.bounds);    NSObject *obj = [titleArray firstObject];    if ([obj isKindOfClass:[NSString class]]) {        for (int i = 0; i < titleArray.count; i++) {            float x = i > 0 ? CGRectGetMaxX([_itemFrames[i-1] CGRectValue]) : 0;            float width = kScreen_Width/titleArray.count;            CGRect rect = CGRectMake(x, y, width, height);            [_itemFrames addObject:[NSValue valueWithCGRect:rect]];        }                for (int i = 0; i < titleArray.count; i++) {            CGRect rect = [_itemFrames[i] CGRectValue];            NSString *title = titleArray[i];            XTSegmentControlItem *item = [[XTSegmentControlItem alloc] initWithFrame:rect title:title type: isIcon ?                                                                                   XTSegmentControlItemTypeTitleAndIcon : XTSegmentControlItemTypeTitle];            if (!isIcon && i == 0) {                [item setSelected:YES];            }            [_items addObject:item];            [_contentView addSubview:item];        }    } else if ([obj isKindOfClass:[PRojectMember class]] || [obj isKindOfClass:[Project class]]) {//        全部任務的frame        CGRect firstFrame = CGRectMake(5.0, 0, XTSegmentControlIconWidth, height);        [_itemFrames addObject:[NSValue valueWithCGRect:firstFrame]];        for (int i = 1; i < titleArray.count; i++) {            float x = CGRectGetMaxX([_itemFrames[i-1] CGRectValue]);            CGRect rect = CGRectMake(x, y, XTSegmentControlIconWidth, height);            [_itemFrames addObject:[NSValue valueWithCGRect:rect]];        }                for (int i = 0; i < titleArray.count; i++) {            CGRect rect = [_itemFrames[i] CGRectValue];            XTSegmentControlItem *item;            if ([obj isKindOfClass:[ProjectMember class]]) {                ProjectMember *title = titleArray[i];                item = [[XTSegmentControlItem alloc] initWithFrame:rect title:title.user.avatar type:XTSegmentControlItemTypeIconUrl];            } else if ([obj isKindOfClass:[Project class]]){                Project *title = titleArray[i];                item = [[XTSegmentControlItem alloc] initWithFrame:rect title:title.icon type:XTSegmentControlItemTypeIconUrl];            }            if (item) {                if (i == 0) {                    [item setSelected:YES];                }                [_items addObject:item];                [_contentView addSubview:item];            }        }    }        [_contentView setContentSize:CGSizeMake(CGRectGetMaxX([[_itemFrames lastObject] CGRectValue]), CGRectGetHeight(self.bounds))];    self.currentIndex = 0;    [self selectIndex:0];    if (isIcon) {        //是否有右邊的那條線        [self selectIndex:-1];        for (int i=1; i<_itemFrames.count; i++) {            CGRect rect = [_itemFrames[i] CGRectValue];                        UIView *lineView  = [[UIView alloc] initWithFrame:CGRectMake(                                                                         CGRectGetMinX(rect),                                                                         (CGRectGetHeight(rect) - 14) * 0.5,                                                                         1,                                                                         14)];            lineView.backgroundColor = [UIColor colorWithHexString:@"0xdddddd"];            [self addSubview:lineView];        }    }}- (void)addRedLine{    if (!_lineView) {        CGRect rect = [_itemFrames[0] CGRectValue];        _lineView = [[UIView alloc] initWithFrame:CGRectMake(                                                             CGRectGetMinX(rect),                                                             CGRectGetHeight(rect) - XTSegmentControlLineHeight,                                                             CGRectGetWidth(rect) - 2 * XTSegmentControlHspace,                                                             XTSegmentControlLineHeight)];        _lineView.backgroundColor = [UIColor colorWithHexString:@"0x3bbd79"];        [_contentView addSubview:_lineView];               UIView *bottomLineView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(rect)-0.5, CGRectGetWidth(self.bounds), 0.5)];        bottomLineView.backgroundColor = [UIColor colorWithHexString:@"0xc8c7cc"];        [self addSubview:bottomLineView];    }}- (void)setTitle:(NSString *)title withIndex:(NSInteger)index{    XTSegmentControlItem *curItem = [_items objectAtIndex:index];    [curItem resetTitle:title];}

3：橫向選項卡中每一個選項的代碼如下：

#define XTSegmentControlItemFont (15)#define XTSegmentControlHspace (0)#define XTSegmentControlLineHeight (2)#define XTSegmentControlAnimationTime (0.3)#define XTSegmentControlIconWidth (50.0)#define XTSegmentControlIconSpace (4)typedef NS_ENUM(NSInteger, XTSegmentControlItemType){    XTSegmentControlItemTypeTitle = 0,    XTSegmentControlItemTypeIconUrl,    XTSegmentControlItemTypeTitleAndIcon,};@interface XTSegmentControlItem : UIView@property (nonatomic, strong) UILabel *titleLabel;@property (nonatomic, strong) UIImageView *titleIconView;@property (nonatomic, assign) XTSegmentControlItemType type;- (void)setSelected:(BOOL)selected;@end@implementation XTSegmentControlItem- (id)initWithFrame:(CGRect)frame title:(NSString *)title type:(XTSegmentControlItemType)type{    if (self = [super initWithFrame:frame]) {        self.backgroundColor = [UIColor clearColor];        _type = type;        switch (_type) {            case XTSegmentControlItemTypeIconUrl:            {                _titleIconView = [[UIImageView alloc] initWithFrame:CGRectMake((CGRectGetWidth(self.bounds)-40)/2, (CGRectGetHeight(self.bounds)-40)/2, 40, 40)];                [_titleIconView doCircleFrame];                if (title) {                    [_titleIconView sd_setImageWithURL:[title urlImageWithCodePathResizeToView:_titleIconView] placeholderImage:kPlaceholderMonkeyRoundView(_titleIconView)];                }else{                    [_titleIconView setImage:[UIImage imageNamed:@"tasks_all"]];                }                [self addSubview:_titleIconView];            }                break;            case XTSegmentControlItemTypeTitleAndIcon:            {                _titleLabel = ({                    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds))];                                        label.font = [UIFont systemFontOfSize:(kDevice_Is_iphone6Plus) ? (XTSegmentControlItemFont + 1) : (kDevice_Is_iPhone6 ? XTSegmentControlItemFont : XTSegmentControlItemFont - 2)];                    label.textAlignment = NSTextAlignmentCenter;                    label.text = title;                    label.textColor = [UIColor colorWithHexString:@"0x222222"];                    label.backgroundColor = [UIColor clearColor];                    [label sizeToFit];                    if (label.frame.size.width > CGRectGetWidth(self.bounds) - XTSegmentControlIconSpace - 10) {                        CGRect frame = label.frame;                        frame.size.width = CGRectGetWidth(self.bounds) - XTSegmentControlIconSpace - 10;                        label.frame = frame;                    }                    label.center = CGPointMake((CGRectGetWidth(self.bounds) - XTSegmentControlIconSpace - 10) * 0.5, CGRectGetHeight(self.bounds) * 0.5);                    label;                });                                [self addSubview:_titleLabel];                                CGFloat x = CGRectGetMaxX(_titleLabel.frame) + XTSegmentControlIconSpace;                _titleIconView = [[UIImageView alloc] initWithFrame:CGRectMake(x, (CGRectGetHeight(self.bounds) - 10) * 0.5, 10, 10)];                [_titleIconView setImage:[UIImage imageNamed:@"tag_list_up"]];                [self addSubview:_titleIconView];            }                break;            case XTSegmentControlItemTypeTitle:            default:            {                _titleLabel = ({                    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(XTSegmentControlHspace, 0, CGRectGetWidth(self.bounds) - 2 * XTSegmentControlHspace, CGRectGetHeight(self.bounds))];                    label.font = [UIFont systemFontOfSize:XTSegmentControlItemFont];                    label.textAlignment = NSTextAlignmentCenter;                    label.text = title;                    label.textColor = [UIColor colorWithHexString:@"0x222222"];                    label.backgroundColor = [UIColor clearColor];                    label;                });                                                [self addSubview:_titleLabel];            }                break;        }    }    return self;}- (void)setSelected:(BOOL)selected{    switch (_type) {        case XTSegmentControlItemTypeIconUrl:        {        }            break;        case XTSegmentControlItemTypeTitleAndIcon:        {            if (_titleLabel) {                [_titleLabel setTextColor:(selected ? [UIColor colorWithHexString:@"0x3bbd79"]:[UIColor colorWithHexString:@"0x222222"])];            }            if (_titleIconView) {                [_titleIconView setImage:[UIImage imageNamed: selected ? @"tag_list_down" : @"tag_list_up"]];            }        }            break;        default:        {            if (_titleLabel) {                [_titleLabel setTextColor:(selected ? [UIColor colorWithHexString:@"0x3bbd79"]:[UIColor colorWithHexString:@"0x222222"])];            }        }            break;    }}- (void)resetTitle:(NSString *)title{    if (_titleLabel) {        _titleLabel.text = title;    }    if (_type == XTSegmentControlItemTypeTitleAndIcon) {        [_titleLabel sizeToFit];        if (_titleLabel.frame.size.width > CGRectGetWidth(self.bounds) - XTSegmentControlIconSpace - 10) {            CGRect frame = _titleLabel.frame;            frame.size.width = CGRectGetWidth(self.bounds) - XTSegmentControlIconSpace - 10;            _titleLabel.frame = frame;        }        _titleLabel.center = CGPointMake((CGRectGetWidth(self.bounds) - XTSegmentControlIconSpace - 10) * 0.5, CGRectGetHeight(self.bounds) * 0.5);            CGRect frame = _titleIconView.frame;        frame.origin.x = CGRectGetMaxX(_titleLabel.frame) + XTSegmentControlIconSpace;        _titleIconView.frame = frame;    }}@end

注意：這邊創建的選項的布局，及選中時做出來的效果變化

4：彈出視圖的內容TopicListView

#import <UIKit/UIKit.h>typedef void(^TopicListViewBlock)(NSInteger index);typedef void(^TopicListViewHideBlock)();@interface TopicListView : UIView- (id)initWithFrame:(CGRect)frame             titles:(NSArray *)titles            numbers:(NSArray *)numbers       defaultIndex:(NSInteger)index      selectedBlock:(TopicListViewBlock)selectedHandle          hideBlock:(TopicListViewHideBlock)hideHandle;- (void)changeWithTitles:(NSArray *)titles                 numbers:(NSArray *)numbers            defaultIndex:(NSInteger)index           selectedBlock:(TopicListViewBlock)selectedHandle               hideBlock:(TopicListViewHideBlock)hideHandle;- (void)showBtnView;- (void)hideBtnView;@end

#import "TopicListView.h"#import "TopicListButton.h"@interface TopicListView (){    UIScrollView *_baseView;    UIButton *_baseBtn;    NSInteger _count;    NSInteger _index;}@property (nonatomic , copy) TopicListViewBlock block;@property (nonatomic , copy) TopicListViewHideBlock hideBlock;@end@implementation TopicListView- (id)initWithFrame:(CGRect)frame             titles:(NSArray *)titles            numbers:(NSArray *)numbers       defaultIndex:(NSInteger)index      selectedBlock:(TopicListViewBlock)selectedHandle          hideBlock:(TopicListViewHideBlock)hideHandle{    self = [super initWithFrame:frame];    if (self) {        self.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.4];        //回調事件的賦值        self.block = selectedHandle;        self.hideBlock = hideHandle;        self.clipsToBounds = YES;                //—_baseBtn是產生后面的背景陰影        _baseBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, self.frame.size.height)];        _baseBtn.backgroundColor = [UIColor clearColor];        [_baseBtn addTarget:self action:@selector(baseBtnClick) forControlEvents:UIControlEventTouchUpInside];        [self addSubview:_baseBtn];                _index = index;        _count = titles.count;        CGFloat h = _count * kMySegmentControl_Height;        CGFloat sH = h;        if (h + kMySegmentControl_Height > self.frame.size.height) {            sH = self.frame.size.height - kMySegmentControl_Height;        }        //_baseView則是下拉的列表        _baseView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, -sH, kScreen_Width, sH)];        [self addSubview:_baseView];        _baseView.contentSize = CGSizeMake(kScreen_Width, h);        _baseView.bounces = FALSE;        //btnView則是在滾動視圖_baseView里面，用于存放按鍵的容器        UIView *btnView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, h)];        btnView.backgroundColor = [UIColor whiteColor];        [_baseView addSubview:btnView];                //遍歷產生按鍵，并判斷是否被選擇        for (int i=0; i<titles.count; i++) {            NSString *title = titles[i];            TopicListButton *btn;            if (numbers) {                btn = [TopicListButton buttonWithTitle:title andNumber:[numbers[i] integerValue]];            } else {                btn = [TopicListButton buttonWithTitle:title];            }            CGRect frame = btn.frame;            frame.origin.y = i * kMySegmentControl_Height;            btn.frame = frame;            btn.tag = 1000 + i;            [btn setIconHide:(_index == i ? FALSE : TRUE)];            [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];            [btnView addSubview:btn];        }    }    return self;}- (void)changeWithTitles:(NSArray *)titles                 numbers:(NSArray *)numbers            defaultIndex:(NSInteger)index           selectedBlock:(TopicListViewBlock)selectedHandle               hideBlock:(TopicListViewHideBlock)hideHandle{    self.block = selectedHandle;    self.hideBlock = hideHandle;       CGRect frame = _baseView.frame;    frame.origin.y = -frame.size.height;    [UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{        _baseView.frame = frame;    } completion:^(BOOL finished) {        [_baseView removeFromSuperview];                _index = index;        _count = titles.count;        CGFloat h = _count * kMySegmentControl_Height;        CGFloat sH = h;        if (h + kMySegmentControl_Height > self.frame.size.height) {            sH = self.frame.size.height - kMySegmentControl_Height;        }        _baseView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, -sH, kScreen_Width, sH)];        [self addSubview:_baseView];        _baseView.contentSize = CGSizeMake(kScreen_Width, h);        _baseView.bounces = FALSE;                UIView *btnView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, h)];        btnView.backgroundColor = [UIColor whiteColor];        [_baseView addSubview:btnView];                for (int i=0; i<titles.count; i++) {            NSString *title = titles[i];            TopicListButton *btn;            if (numbers) {                btn = [TopicListButton buttonWithTitle:title andNumber:[numbers[i] integerValue]];            } else {                btn = [TopicListButton buttonWithTitle:title];            }            CGRect frame = btn.frame;            frame.origin.y = i * kMySegmentControl_Height;            btn.frame = frame;            btn.tag = 1000 + i;            [btn setIconHide:(_index == i ? FALSE : TRUE)];            [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];           [btnView addSubview:btn];        }                [self showBtnView];    }];}//顯示下拉列表- (void)showBtnView{    CGRect frame = _baseView.frame;    frame.origin.y = 0;    [UIView animateWithDuration:0.3 animations:^{        _baseView.frame = frame;    } completion:^(BOOL finished) {    }];}//隱藏回縮事件- (void)hideBtnView{    CGRect frame = _baseView.frame;    frame.origin.y = -frame.size.height;    [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{        _baseView.frame = frame;    } completion:^(BOOL finished) {        if (self.hideBlock) {            self.hideBlock();        }        [UIView animateWithDuration:0.2 animations:^{            self.alpha = 0;        } completion:^(BOOL finished) {            [self removeFromSuperview];        }];    }];}- (void)baseBtnClick{    [self hideBtnView];}//按鍵響應的事件 用TAG進行遍歷選取 更新選中跟不選中的狀態- (void)btnClick:(TopicListButton *)sender{    //用TAG進行遍歷選取 更新選中跟不選中的狀態    for (int i=1000; i<_count + 1000; i++) {        TopicListButton *btn = (TopicListButton *)[_baseView viewWithTag:i];        [btn setIconHide:(sender.tag == i ? FALSE : TRUE)];    }    //如果當前被選中的跟前面的索引值不一樣說明已經發生變化 則回傳回去    if (_index!=sender.tag - 1000 && self.block) {        self.block(sender.tag - 1000);    }    //隱藏下拉列表    [self hideBtnView];}@end

這邊的代碼是彈出窗的主要實現代碼，以后其它功能也可以參考，包括對視圖的顯示跟隱藏，按鍵的增加跟事件創建等，背景視圖的創建；

5：彈出項的TopicListButton主要代碼

#import <UIKit/UIKit.h>@interface TopicListButton : UIButton+ (instancetype)buttonWithTitle:(NSString *)title andNumber:(NSInteger)number;+ (instancetype)buttonWithTitle:(NSString *)title;- (void)setIconHide:(BOOL)hide;@end

#import "TopicListButton.h"@interface TopicListButton (){    UILabel *_titleLbl;    UIImageView *_iconImg;}@end@implementation TopicListButton- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        //左邊的文字        _titleLbl = [[UILabel alloc] initWithFrame:CGRectMake(kPaddingLeftWidth, 0, kScreen_Width - kPaddingLeftWidth - 20, kMySegmentControl_Height)];        _titleLbl.font = [UIFont systemFontOfSize:16];        _titleLbl.textColor = [UIColor colorWithHexString:@"0x666666"];        [self addSubview:_titleLbl];                //右邊的打勾圖片        _iconImg = [[UIImageView alloc] initWithFrame:CGRectMake(kScreen_Width - kPaddingLeftWidth - 18, (kMySegmentControl_Height - 18) * 0.5, 18, 18)];        [_iconImg setImage:[UIImage imageNamed:@"tag_list_s"]];        [self addSubview:_iconImg];                //下劃線的實現        UIView *bottomLineView = [[UIView alloc] initWithFrame:CGRectMake(kPaddingLeftWidth, kMySegmentControl_Height - 0.6, kScreen_Width - kPaddingLeftWidth, 0.6)];        bottomLineView.backgroundColor = [UIColor colorWithHexString:@"0xdddddd"];        [self addSubview:bottomLineView];    }    return self;}//此方法是用于實現帶有數字+ (instancetype)buttonWithTitle:(NSString *)title andNumber:(NSInteger)number{    TopicListButton *button = [[TopicListButton alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, kMySegmentControl_Height)];    [button setTitleLbl:[NSString stringWithFormat:@"%@（%ld）", title, (long)number]];    return button;}//此方法用于實現不帶數字+ (instancetype)buttonWithTitle:(NSString *)title{    TopicListButton *button = [[TopicListButton alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, kMySegmentControl_Height)];    [button setTitleLbl:title];    return button;}- (void)setTitleLbl:(NSString *)title{    _titleLbl.text = title;}//對于打勾圖片是否顯示進行控制- (void)setIconHide:(BOOL)hide{    _iconImg.hidden = hide;}@end