版权声明：欢迎指出错误，作者极懒，常常懒得修改 https://blog.csdn.net/KevinAshen/article/details/89290075
前言
- 写项目时，产品希望实现一个在运动里自定义运动时间的界面
- 天大地大产品最大，因为之前也对其他UI控件有所了解，所以我一下子锁定了UIDatePicker，可大概写了一个上去后发现原来还有更初级的UIViewPicker可以利用
参考文章
Demo 地址
代码详解
//
// ViewController.h
// custom-UIPickerView-Demo
//
// Created by mac on 2019/4/9.
// Copyright © 2019 姜凯文. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIPickerViewDelegate, UIPickerViewDataSource> {
NSArray *_nameArray;
}
@property (strong, nonatomic) UIPickerView *pickerView;
@end
//
// ViewController.m
// custom-UIPickerView-Demo
//
// Created by mac on 2019/4/9.
// Copyright © 2019 姜凯文. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor groupTableViewBackgroundColor];
self.pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 162)];
self.pickerView.backgroundColor = [UIColor whiteColor];
self.pickerView.delegate = self;
self.pickerView.dataSource = self;
[self.view addSubview:self.pickerView];
[self.pickerView reloadAllComponents];//刷新UIPickerView
_nameArray = [NSArray arrayWithObjects:@"北京",@"上海",@"广州",@"深圳",@"重庆",@"武汉",@"天津",nil];
}
#pragma mark pickerview function
//返回有几列
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 3;
}
//返回指定列的行数
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
if (component==0) {
return 1;
} else if(component==1){
return [_nameArray count];
}
return [_nameArray count];
}
//返回指定列，行的高度，就是自定义行的高度
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
return 20.0f;
}
//返回指定列的宽度
- (CGFloat) pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
if (component==0) {//iOS6边框占10+10
return self.view.frame.size.width/3;
} else if(component==1){
return self.view.frame.size.width/3;
}
return self.view.frame.size.width/3;
}
// 自定义指定列的每行的视图，即指定列的每行的视图行为一致
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
if (!view){
view = [[UIView alloc]init];
}
UILabel *text = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, 20)];
text.textAlignment = NSTextAlignmentCenter;
text.text = [_nameArray objectAtIndex:row];
[view addSubview:text];
//隐藏上下直线
[self.pickerView.subviews objectAtIndex:1].backgroundColor = [UIColor clearColor];
[self.pickerView.subviews objectAtIndex:2].backgroundColor = [UIColor clearColor];
return view;
}
//显示的标题
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
NSString *str = [_nameArray objectAtIndex:row];
return str;
}
//显示的标题字体、颜色等属性
- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component{
NSString *str = [_nameArray objectAtIndex:row];
NSMutableAttributedString *AttributedString = [[NSMutableAttributedString alloc]initWithString:str];
[AttributedString addAttributes:@{NSFontAttributeName:[UIFont boldSystemFontOfSize:18], NSForegroundColorAttributeName:[UIColor whiteColor]} range:NSMakeRange(0, [AttributedString length])];
return AttributedString;
}//NS_AVAILABLE_IOS(6_0);
//被选择的行
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
NSLog(@"HANG%@",[_nameArray objectAtIndex:row]);
}
@end
-
值得注意点在于这个UILabel *text = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, 20)];的建立
-
我们打开这个Demo的分层图
-
然后如果把Label注释掉是这个效果
-
可以很明显的看到最后就啥也不剩了，所以Label不仅是用来做显示的，还是用来给中间每一个滚上去的Label做显示的