UIPickerView, das aussieht wie UIDatePicker aber mit Sekunden

Question

Ich mache eine Timer-App und musste Stunden, Minuten und Sekunden für den Benutzer anzeigen. Ich habe versucht, UIDatePicker, aber es zeigt nur Stunden und Minuten als Auswahl. Keine Sekunden. Nachdem ich ein wenig online recherchiert habe, habe ich festgestellt, dass es keine Möglichkeit gibt, Sekunden in UIDatePicker zu bekommen und ich musste meine eigene UIPickerView von Grund auf schreiben.

Also meine Frage ist, gibt es Beispielcode für solche, d. H. Jemand schrieb eine CustomUIPickerView für Stunden, Minuten und Sekunden, die ich in meinem Projekt einbinden kann? UIDatePicker hat eine nette Überlagerung von Stunden & Mins Text, der gesetzt bleibt, während der Benutzer die Vorwahlknüppel dreht. Es wäre schön, wenn jemand das in seinem benutzerdefinierten Picker hinzufügen würde. Ich bevorzuge es, eine benutzerdefinierte UIPickerView von Grund auf neu zu schreiben, wenn ich nicht muss. Vielen Dank.

Answer 1

Alrighty Leute, hier ist der Code zu Stunden/Minuten/Sekunden in Ihrem UIPickerView bekommen. Sie können 3 Etiketten hinzufügen und diese strategisch auf dem Picker platzieren. Ich habe auch ein Bild beigefügt.

Wenn Sie die Antwort mögen, bewerten Sie es! Gute Entwickler teilen ihr Wissen nicht so, wie manche Leute es vorgeschlagen haben. Viel Spaß beim Programmieren!

In Ihrem Header .h diese Datei

@interface v1AddTableViewController : UITableViewController 
{ 

    IBOutlet UIPickerView *pickerView;  
    NSMutableArray *hoursArray; 
    NSMutableArray *minsArray; 
    NSMutableArray *secsArray; 

    NSTimeInterval interval; 

} 

@property(retain, nonatomic) UIPickerView *pickerView; 
@property(retain, nonatomic) NSMutableArray *hoursArray; 
@property(retain, nonatomic) NSMutableArray *minsArray; 
@property(retain, nonatomic) NSMutableArray *secsArray; 

in .m Datei dieses

@synthesize pickerView; 
@synthesize hoursArray; 
@synthesize minsArray; 
@synthesize secsArray; 
@synthesize interval; 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 


    //initialize arrays 
    hoursArray = [[NSMutableArray alloc] init]; 
    minsArray = [[NSMutableArray alloc] init]; 
    secsArray = [[NSMutableArray alloc] init]; 
    NSString *strVal = [[NSString alloc] init]; 

    for(int i=0; i<61; i++) 
    { 
     strVal = [NSString stringWithFormat:@"%d", i]; 

     //NSLog(@"strVal: %@", strVal); 

     //Create array with 0-12 hours 
     if (i < 13) 
     { 
      [hoursArray addObject:strVal]; 
     } 

     //create arrays with 0-60 secs/mins 
     [minsArray addObject:strVal]; 
     [secsArray addObject:strVal]; 
    } 


    NSLog(@"[hoursArray count]: %d", [hoursArray count]); 
    NSLog(@"[minsArray count]: %d", [minsArray count]); 
    NSLog(@"[secsArray count]: %d", [secsArray count]); 

} 


//Method to define how many columns/dials to show 
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView 
{ 
    return 3; 
} 


// Method to define the numberOfRows in a component using the array. 
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent :(NSInteger)component 
{ 
    if (component==0) 
    { 
     return [hoursArray count]; 
    } 
    else if (component==1) 
    { 
     return [minsArray count]; 
    } 
    else 
    { 
     return [secsArray count]; 
    } 

} 


// Method to show the title of row for a component. 
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component 
{ 

    switch (component) 
    { 
     case 0: 
      return [hoursArray objectAtIndex:row]; 
      break; 
     case 1: 
      return [minsArray objectAtIndex:row]; 
      break; 
     case 2: 
      return [secsArray objectAtIndex:row]; 
      break;  
    } 
    return nil; 
} 


-(IBAction)calculateTimeFromPicker 
{ 

    NSString *hoursStr = [NSString stringWithFormat:@"%@",[hoursArray objectAtIndex:[pickerView selectedRowInComponent:0]]]; 

    NSString *minsStr = [NSString stringWithFormat:@"%@",[minsArray objectAtIndex:[pickerView selectedRowInComponent:1]]]; 

    NSString *secsStr = [NSString stringWithFormat:@"%@",[secsArray objectAtIndex:[pickerView selectedRowInComponent:2]]]; 

    int hoursInt = [hoursStr intValue]; 
    int minsInt = [minsStr intValue]; 
    int secsInt = [secsStr intValue]; 


    interval = secsInt + (minsInt*60) + (hoursInt*3600); 

    NSLog(@"hours: %d ... mins: %d .... sec: %d .... interval: %f", hoursInt, minsInt, secsInt, interval); 

    NSString *totalTimeStr = [NSString stringWithFormat:@"%f",interval]; 

} 

Answer 2

ich auch konfrontiert gleiche Problem gestellt setzen. Aus diesem Grund habe ich eine benutzerdefinierte Zeitauswahl mit Sekunden, Tagen und vielen anderen Optionen erstellt und sie auf GitHub veröffentlicht:
iOSSecondsTimerPicker
Probieren Sie es aus.

Answer 3

Im Gegensatz zu der oben genannten Lösung, kam ich etwas weniger schrecklich. Definitiv nicht perfekt, aber es hat den gewünschten Effekt (Ich habe nur in iOS 7 auf dem iPhone getestet, funktioniert nur im Portrait wie beschrieben). Bearbeitungen zur Verbesserung sind willkommen. Relevante Anzeigecode unter:

// assumes you conform to UIPickerViewDelegate and UIPickerViewDataSource in your .h 
- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    // assumes global UIPickerView declared. Move the frame to wherever you want it 
    picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 200)]; 
    picker.dataSource = self; 
    picker.delegate = self; 

    UILabel *hourLabel = [[UILabel alloc] initWithFrame:CGRectMake(42, picker.frame.size.height/2 - 15, 75, 30)]; 
    hourLabel.text = @"hour"; 
    [picker addSubview:hourLabel]; 

    UILabel *minsLabel = [[UILabel alloc] initWithFrame:CGRectMake(42 + (picker.frame.size.width/3), picker.frame.size.height/2 - 15, 75, 30)]; 
    minsLabel.text = @"min"; 
    [picker addSubview:minsLabel]; 

    UILabel *secsLabel = [[UILabel alloc] initWithFrame:CGRectMake(42 + ((picker.frame.size.width/3) * 2), picker.frame.size.height/2 - 15, 75, 30)]; 
    secsLabel.text = @"sec"; 
    [picker addSubview:secsLabel]; 

    [self.view addSubview:picker]; 
} 

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView 
{ 
    return 3; 
} 

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component 
{ 
    if(component == 0) 
     return 24; 

    return 60; 
} 

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component 
{ 
    return 30; 
} 

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view 
{ 
    UILabel *columnView = [[UILabel alloc] initWithFrame:CGRectMake(35, 0, self.view.frame.size.width/3 - 35, 30)]; 
    columnView.text = [NSString stringWithFormat:@"%lu", (long) row]; 
    columnView.textAlignment = NSTextAlignmentLeft; 

    return columnView; 
} 

Und das Ergebnis:

Answer 4

Ich habe einige leichte Verbesserungen @ Stonz2-Version. Es gab auch einen Fehler bei der Berechnung der y-Position der Etiketten.

Hier ist die H-Datei

@interface CustomUIDatePicker : UIPickerView <UIPickerViewDataSource, UIPickerViewDelegate> 

@property NSInteger hours; 
@property NSInteger mins; 
@property NSInteger secs; 

-(NSInteger) getPickerTimeInMS; 
-(void) initialize; 

@end 

Und hier die .m-Datei mit den Verbesserungen

@implementation CustomUIDatePicker 
-(instancetype)init { 
self = [super init]; 
[self initialize]; 
return self; 
} 

-(id)initWithCoder:(NSCoder *)aDecoder { 
self = [super initWithCoder:aDecoder]; 
[self initialize]; 
return self; 
} 

-(instancetype)initWithFrame:(CGRect)frame { 
self = [super initWithFrame:frame]; 
[self initialize]; 
return self; 
} 

-(void) initialize { 
self.delegate = self; 
self.dataSource = self; 

int height = 20; 
int offsetX = self.frame.size.width/3; 
int offsetY = self.frame.size.height/2 - height/2; 
int marginX = 42; 
int width = offsetX - marginX; 

UILabel *hourLabel = [[UILabel alloc] initWithFrame:CGRectMake(marginX, offsetY, width, height)]; 
hourLabel.text = @"hour"; 
[self addSubview:hourLabel]; 

UILabel *minsLabel = [[UILabel alloc] initWithFrame:CGRectMake(marginX + offsetX, offsetY, width, height)]; 
minsLabel.text = @"min"; 
[self addSubview:minsLabel]; 

UILabel *secsLabel = [[UILabel alloc] initWithFrame:CGRectMake(marginX + offsetX * 2, offsetY, width, height)]; 
secsLabel.text = @"sec"; 
[self addSubview:secsLabel]; 
} 

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { 
if (component == 0) { 
    self.hours = row; 
} else if (component == 1) { 
    self.mins = row; 
} else if (component == 2) { 
    self.secs = row; 
} 
} 

-(NSInteger)getPickerTimeInMS { 
return (self.hours * 60 * 60 + self.mins * 60 + self.secs) * 1000; 
} 

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { 
return 3; 
} 
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component 
{ 
if(component == 0) 
    return 24; 

return 60; 
} 

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component 
{ 
return 30; 
} 

-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view 
{ 
if (view != nil) { 
    ((UILabel*)view).text = [NSString stringWithFormat:@"%lu", row]; 
    return view; 
} 
UILabel *columnView = [[UILabel alloc] initWithFrame:CGRectMake(35, 0, self.frame.size.width/3 - 35, 30)]; 
columnView.text = [NSString stringWithFormat:@"%lu", row]; 
columnView.textAlignment = NSTextAlignmentLeft; 

return columnView; 
} 

@end 

Answer 5

rasche Umsetzung

class TimePickerView: UIPickerView, UIPickerViewDataSource, UIPickerViewDelegate { 
    var hour:Int = 0 
    var minute:Int = 0 


    override init() { 
     super.init() 
     self.setup() 
    } 

    required internal init(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     self.setup() 
    } 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     self.setup() 
    } 

    func setup(){ 
     self.delegate = self 
     self.dataSource = self 

     /*let height = CGFloat(20) 
     let offsetX = self.frame.size.width/3 
     let offsetY = self.frame.size.height/2 - height/2 
     let marginX = CGFloat(42) 
     let width = offsetX - marginX 

     let hourLabel = UILabel(frame: CGRectMake(marginX, offsetY, width, height)) 
     hourLabel.text = "hour" 
     self.addSubview(hourLabel) 

     let minsLabel = UILabel(frame: CGRectMake(marginX + offsetX, offsetY, width, height)) 
     minsLabel.text = "min" 
     self.addSubview(minsLabel)*/ 
    } 

    func getDate() -> NSDate{ 
     let dateFormatter = NSDateFormatter() 
     dateFormatter.dateFormat = "HH:mm" 
     let date = dateFormatter.dateFromString(String(format: "%02d", self.hour) + ":" + String(format: "%02d", self.minute)) 
     return date! 
    } 

    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int { 
     return 2 
    } 

    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) { 
     switch component { 
     case 0: 
      self.hour = row 
     case 1: 
      self.minute = row 
     default: 
      println("No component with number \(component)") 
     } 
    } 

    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { 
     if component == 0 { 
      return 24 
     } 

     return 60 
    } 

    func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat { 
     return 30 
    } 

    func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView!) -> UIView { 
     if (view != nil) { 
      (view as UILabel).text = String(format:"%02lu", row) 
      return view 
     } 
     let columnView = UILabel(frame: CGRectMake(35, 0, self.frame.size.width/3 - 35, 30)) 
     columnView.text = String(format:"%02lu", row) 
     columnView.textAlignment = NSTextAlignment.Center 

     return columnView 
    } 

} 

Answer 6

ich die Antworten nicht gefallen hat, die ‚didn t verlassen sich auf das Hinzufügen UILabel als Subviews zu UIPickerView, weil Hardcoding der fr Ames wird brechen, wenn iOS beschließt, das Aussehen eines Tages zu ändern.

Ein einfacher Trick besteht darin, die Stunden/Minute/Sek. Beschriftungen als Komponenten mit 1 Zeile zu haben.

Die Stunden/Min/Sek-Etiketten sind weiter von ihren Werten entfernt, aber das ist in Ordnung. Die meisten Benutzer werden das nicht einmal bemerken. Überzeugen Sie sich selbst:

Answer 7

Hier ist eine andere Lösung für die "Stunde/min/sec" Overlay. Es verwendet die pickerView(UIPickerView, didSelectRow: Int, inComponent: Int)-Methode aus dem Delegat der Auswahlansicht, um das Label der Ansicht zu aktualisieren.

Auf diese Weise wird es unabhängig von der Bildschirmausrichtung funktionieren. Es ist immer noch nicht optimal aber es ist ziemlich einfach.

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView { 
    let label = UILabel() 
    label.text = String(row) 
    label.textAlignment = .center 
    return label 
} 

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) { 

    if let label = pickerView.view(forRow: row, forComponent: component) as? UILabel { 

     if component == 0, row > 1 { 
      label.text = String(row) + " hours" 
     } 
     else if component == 0 { 
      label.text = String(row) + " hour" 
     } 
     else if component == 1 { 
      label.text = String(row) + " min" 
     } 
     else if component == 2 { 
      label.text = String(row) + " sec" 
     } 
    } 
} 

das Overlay angezeigt haben, wenn die Picker-Ansicht angezeigt wird, Reihen ...

func selectPickerViewRows() { 

    pickerView.selectRow(0, inComponent: 0, animated: false) 
    pickerView.selectRow(0, inComponent: 1, animated: false) 
    pickerView.selectRow(30, inComponent: 2, animated: false) 

    pickerView(pickerView, didSelectRow: 0, inComponent: 0) 
    pickerView(pickerView, didSelectRow: 0, inComponent: 1) 
    pickerView(pickerView, didSelectRow: 30, inComponent: 2) 
} 

Answer 8

Eine Option programmatisch ausgewählt werden muss, ist ActionSheetPicker

https://github.com/skywinder/ActionSheetPicker-3.0 zu verwenden

und Verwenden Sie den ActionSheetMultipleStringPicker. Sie können dem Beispielcode in den ActionSheetPicker-Dokumenten folgen.