下拉框选择效果的实现原理2

效果如下

原理：使用第三方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