iOS:选择器控件UIPickerView的详解和演示

选择器控件UIPickerView:

功能：它能够创建一个类似于密码锁式的单列或多列的选择菜单，用户可以通过它设置的代理来选择需要菜单中的任意的数据。例如创建日历、字体表(类型、大小、颜色)、图库等.

 

它是UIView视图的子类，而且遵从UIPickerViewDelegate协议和UIPickerViewDataSource协议。因此，选择器需要设置代理去进行操作;

设置视图控制器self为数据源代理和数据操作代理,即

@property(strong,nonatomic)UIPickerView *pickerView;

self.pickerView.dataSource = self;

self.pickerView.delegate  = self;

 

一、具体类信息：

@protocol UIPickerViewDataSource, UIPickerViewDelegate;

@interface UIPickerView : UIView <NSCoding>

@property(nonatomic,assign) id<UIPickerViewDataSource> dataSource; // default is nil,设置代理

@property(nonatomic,assign) id<UIPickerViewDelegate>   delegate;  // default is nil，设置代理

@property(nonatomic)  BOOL showsSelectionIndicator;    // default is NO

@property(nonatomic,readonly) NSInteger numberOfComponents; //列数

二、协议UIPickerViewDataSource

@protocol UIPickerViewDataSource<NSObject>

@required //必须要实现的方法

// 返回的列显示的数量。

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;

//返回行数在每个组件(每一列)

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;

@end

三、协议UIPickerViewDelegate

@protocol UIPickerViewDelegate<NSObject>

@optional //可以选择执行的方法

//每一列组件的列宽度

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;

//每一列组件的行高度

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;

// 返回每一列组件的每一行的标题内容

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;

// 返回每一列组件的每一行的标题内容的属性

- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component;

// 返回每一列组件的每一行的视图显示

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;

//执行选择某列某行的操作

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component;

@end

 

   

演示一：制作简单的万年历,一开始就显示当前日期

源码如下：

 #import <UIKit/UIKit.h>

 @interface ViewController : UIViewController<UIPickerViewDataSource,UIPickerViewDelegate>
 @property(nonatomic,strong)NSArray *years;
 @property(nonatomic,strong)NSArray *months;
 @property(nonatomic,strong)NSArray *days;

 @end

#import "ViewController.h"

   @interface ViewController ()
   @property (weak, nonatomic) IBOutlet UIPickerView *pickerView;

   @end

   @implementation ViewController

  - (void)viewDidLoad
  {
      [super viewDidLoad];
      //初始化数据
      NSMutableArray *multYears = [NSMutableArray array];//年
      for(int i=; i<; i++)
      {
          NSString *year = [NSString stringWithFormat:@"20%02d年",i+];
          [multYears addObject:year];
      }
      self.years = multYears;

      NSMutableArray *multMonths = [NSMutableArray arrayWithCapacity:];//月
      for(int i=; i<=; i++)
      {
          NSString *month = [NSString stringWithFormat:@"%d月",i];
          [multMonths addObject:month];
      }
      self.months = multMonths;

      NSMutableArray *multDays = [NSMutableArray arrayWithCapacity:];//日
      for(int i=; i<=; i++)
      {
          NSString *day = [NSString stringWithFormat:@"%d日",i];
          [multDays addObject:day];
      }
      self.days = multDays;

      //设置pickerView的数据源和代理
      self.pickerView.dataSource = self;
      self.pickerView.delegate = self;

      //显示当前日期
      NSDate *now = [NSDate date];
      //分解日期
      NSCalendar  *calendar = [[NSCalendar alloc]initWithCalendarIdentifier:NSCalendarIdentifierGregorian];

      NSCalendarUnit unitFlags = NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay;
      NSDateComponents *components = [calendar components:unitFlags fromDate:now];

      //设置pickerView显示当前日期
      NSInteger year = [components year];
      [self.pickerView selectRow:year-- inComponent: animated:year];

      NSInteger month = [components month];
      [self.pickerView selectRow:month- inComponent: animated:month];

      NSInteger day = [components day];
      [self.pickerView selectRow:day- inComponent: animated:day];
  }

  #pragma mark - pickerView的代理方法
  -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
  {
      return ;
  }
  -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
  {
      NSInteger row = ;
      switch (component)
      {
          case :
              row = self.years.count;
              break;
          case :
              row = self.months.count;
              break;
          case :
              row = self.days.count;
              break;
      }
      return  row;
  }

  -(NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
  {
      NSString *title;
      switch (component)
      {
          case :
              title = self.years[row];
              break;
          case :
              title = self.months[row];
              break;
          case :
              title = self.days[row];
              break;
     }
     return  title;
 }
 -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
 {
     NSString *strDate = [NSString stringWithFormat:@"%@-%@-%@",
                          self.years[[pickerView selectedRowInComponent:]],
                          self.months[[pickerView selectedRowInComponent:]],
                          self.days[[pickerView selectedRowInComponent:]]];
     NSLog(@"%@",strDate);
 }
 @end

演示二：制作简单的字体表,包括字体类型、大小、颜色

源码如下：

 #import <UIKit/UIKit.h>

 @interface ViewController : UIViewController<UIPickerViewDataSource,UIPickerViewDelegate>
 @property(nonatomic,strong) NSArray *fontNames;
 @property(nonatomic,strong) NSArray *fontSizes;
 @property(nonatomic,strong) NSArray *fontColors;
 @end

 #import "ViewController.h"

   @interface ViewController ()
   @property (weak, nonatomic) IBOutlet UILabel *label;
   @property (weak, nonatomic) IBOutlet UIPickerView *pickerView;

   @end

  @implementation ViewController

  - (void)viewDidLoad {
      [super viewDidLoad];
      //初始化数据
      self.fontNames = [UIFont familyNames];//字体名字

      NSMutableArray *mutsize = [NSMutableArray arrayWithCapacity:];//字体大小
      for(int i=; i<=; i++)
      {
          [mutsize addObject:[NSString stringWithFormat:@"%d",+i]];
      }
      self.fontSizes = mutsize;

      self.fontColors = @[
                          @{@"name":@"红色",@"color":[UIColor redColor]},
                          @{@"name":@"黑色",@"color":[UIColor blackColor]},
                          @{@"name":@"蓝色",@"color":[UIColor blueColor]},
                          @{@"name":@"黄色",@"color":[UIColor yellowColor]},
                          @{@"name":@"绿色",@"color":[UIColor greenColor]}
                         ];
      //设置pickerView的代理和数据源
      self.pickerView.dataSource = self;
      self.pickerView.delegate = self;

      //设置label的font
      self.label.font = [UIFont fontWithName:self.fontNames[] size:[self.fontSizes[] integerValue]];

      self.label.textColor = [self.fontColors[] objectForKey:@"color"];
  }

  #pragma mark - pickerView的代理方法
  -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
  {
      return  ;
  }
  -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
  {
      NSInteger row = ;
      switch (component)
      {
          case :
              row = self.fontNames.count;
              break;
          case :
              row = self.fontSizes.count;
              break;
          case :
              row = self.fontColors.count;
              break;
      }
      return row;
  }
  -(NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
  {
      NSString *title;
      switch (component)
      {
          case :
              title = self.fontNames[row];
              break;
          case :
              title = self.fontSizes[row];
              break;
          case :
              title = [self.fontColors[row] objectForKey:@"name"];
              break;
      }
      return  title;
  }
  //设置每一列的宽度
  -(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component
  {
      CGFloat width = 0.0f;
      switch (component)
      {
          case :
              width = pickerView.frame.size.width/;
              break;
          case :
              width = pickerView.frame.size.width/;
              break;
          case :
              width = pickerView.frame.size.width/;
              break;
      }
      return width;
  }

  -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
 {
     //设置label的font
     self.label.font = [UIFont fontWithName:self.fontNames[[pickerView selectedRowInComponent:]] size:[self.fontSizes[[pickerView selectedRowInComponent:]] integerValue]];

     self.label.textColor = [self.fontColors[[pickerView selectedRowInComponent:]] objectForKey:@"color"];
 }
 @end

　　

演示三：制作简单的图库浏览器

源码如下：

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIPickerViewDelegate,UIPickerViewDataSource>
@end

#import "ViewController.h"

  @interface ViewController ()
  @property (weak, nonatomic) IBOutlet UIPickerView *pickerView;
  @property (strong,nonatomic)NSArray *imageNames;
  @end

  @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     //初始化数据
     NSMutableArray *mutImageNames = [NSMutableArray arrayWithCapacity:];
     for(int i=; i<; i++)
     {
         [mutImageNames addObject:[NSString stringWithFormat:@"%d.png",i]];
     }
     self.imageNames = mutImageNames;

     //设置pickerView的数据源和代理
     self.pickerView.dataSource = self;
     self.pickerView.delegate = self;

 }
 #pragma mark - pickerview代理方法
 -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
 {
     return ;
 }
 -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
 {
     return self.imageNames.count;
 }
 //设置行高
 -(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
 {
     UIImage *image = [UIImage imageNamed:self.imageNames[]];
     return image.size.height;
 }
 //设置每行显示的视图
 -(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
 {
     UIImage *image = [UIImage imageNamed:self.imageNames[row]];
     //UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
     //imageView.frame = CGRectMake(0, 0, image.size.width, image.size.height);
     //return imageView;

     UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(, ,image.size.width, image.size.height)];
     [button setBackgroundImage:image forState:UIControlStateNormal];
     [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
     return button;
 }
 -(void)buttonClicked:(UIButton *)sender
 {
     NSLog(@"button clicked");
 }
 @end