本文来自XuQibin的投稿
年前的某天,公司的UI拿了张设计图让我看下能否实现,随意一瞥发现只是个PickerView,心想着用UIPickerView封装一下还不是so easy的事情,然而接下去了解了需求后才发现没那么简单......
需要实现的效果
具体需求如下:
需要能自定义选中颜色及未选中颜色,且跟随滚动实时变化;
需要能自定义选中指示器;
需要滚动效果是平面滚动;
根据上面的需求,翻看了下UIPickerView的接口并写代码测试了下后发现情况不容乐观:
UIPickerView默认不支持选中颜色设置,可通过自定义view实现,但是无法跟随滚动实时变化;
UIPickerView原生不支持设置选中指示器样式;
UIPickerView默认滚动效果为类曲面滚动,且不支持设置;
到现在已经基本确定UIPickerView的方案已经被毙了,不过没关系,原生没法实现那么就自己实现一个,于是STDPickerView就在这种情况下诞生了:
STDPickerView 是什么
STDPickerView 是基于 UICollectionView 封装的选择控件,兼容UIPickerView大部分接口,并增加了多个定制化接口,可实现更多的效果!
STDPickerView 效果图
默认样式
分割选中指示器
垂直分割线
自定义view
STDPickerView 怎么使用
初始化
STDPickerView *pickerView = [[STDPickerView alloc] init]; pickerView.dataSource = self; pickerView.delegate = self; /* STDPickerViewSelectionIndicatorStyleNone:无选中指示器 STDPickerViewSelectionIndicatorStyleDefault:默认选中指示器 STDPickerViewSelectionIndicatorStyleDivision: 分段选中指示器 STDPickerViewSelectionIndicatorStyleCustom:自定义选中指示器,需实现 selectionIndicatorViewInPickerView: 代理方法 */ pickerView.selectionIndicatorStyle = STDPickerViewSelectionIndicatorStyleDefault; /* 默认情况下,如果同时实现了titleForRow以及viewForRow数据源方法, 则会优先使用viewForRow方法返回自定义view, 此时可设置 forceItemTypeText = YES 来指定使用titleForRow方法 */ pickerView.forceItemTypeText = YES; //是否显示垂直分割线 pickerView.showVerticalDivisionLine = YES; //设置pickerView四周的间距 pickerView.edgeInsets = UIEdgeInsetsMake(0, 20, 0, 20); //设置component之间的间距 pickerView.spacingOfComponents = 30; //仅在文本模式下有效 pickerView.textColor = kLightTextColor; pickerView.selectedTextColor = kGlobalColor; pickerView.font = [UIFont systemFontOfSize:16]; ... [self.view addSubview:pickerView];
通用数据源及代理方法
#pragma mark - STDPickerViewDataSource //返回component数目 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 1; } //返回row数目 - (NSInteger)pickerView:(STDPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { return self.items.count; } #pragma mark - STDPickerViewDelegate //返回条目高度 - (CGFloat)pickerView:(STDPickerView *)pickerView rowHeightForComponent:(NSInteger)component { return 60; } //选中了某个条目 - (void)pickerView:(STDPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { NSLog(@"pickerView - didSelectRow %zd inComponent %zd", row, component); } //若selectionIndicatorStyle = STDPickerViewSelectionIndicatorStyleCustom,则需实现以下方法 - (UIView *)selectionIndicatorViewInPickerView:(STDPickerView *)pickerView { UIView *view = [[UIView alloc] init]; view.backgroundColor = kGlobalColorWithAlpha(0.3); view.layer.cornerRadius = 5; view.layer.masksToBounds = YES; return view; } ...
默认选中样式
#pragma mark - STDPickerViewDataSource // 返回item的标题 (注:若同时实现了 pickerView: viewForRow:forComponent:reusingView: 优先采用后者,此时可通过设置 forceItemTypeText = YES 来强制使用本方法) - (NSString *)pickerView:(STDPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { return self.items[row]; }
自定义选中样式
#pragma mark - STDPickerViewDataSource // 返回item的自定义view,优先级较高 (注:若同时实现了 pickerView: titleForRow:forComponent: 且 forceItemTypeText = YES 则本方法无效) - (UIView *)pickerView:(STDPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view { UILabel *label = (UILabel *)view; if (!label) { label = [[UILabel alloc] init]; label.textAlignment = NSTextAlignmentCenter; } label.textColor = kLightTextColor; label.transform = CGAffineTransformIdentity; label.text = self.items[row]; return label; } #pragma mark - STDPickerViewDelegate //可在此方法及willDeselectRow中实现自定义的切换效果 - (void)pickerView:(STDPickerView *)pickerView willSelectRow:(NSInteger)row inComponent:(NSInteger)component { UILabel *label = (UILabel *)[pickerView viewForRow:row forComponent:component]; [UIView animateWithDuration:0.25 animations:^{ label.transform = CGAffineTransformMakeScale(1.5, 1.5); }]; label.textColor = kGlobalColor; } - (void)pickerView:(STDPickerView *)pickerView willDeselectRow:(NSInteger)row inComponent:(NSInteger)component { UILabel *label = (UILabel *)[pickerView viewForRow:row forComponent:component]; [UIView animateWithDuration:0.25 animations:^{ label.transform = CGAffineTransformIdentity; }]; label.textColor = kLightTextColor; }
目前STDPickerView已经开源到GitHub上并支持CocoaPods集成,欢迎大家下载与star!
GitHub: https://github.com/XuQibin/STDPickerView