Custom iOS UIDatepicker usando UIAppearance

La nueva aplicación de alarma de UNIQLO tiene un UIDatePicker personalizado:

personalizado

Y quiero crear mi propio UIDatePicker personalizado.

Intenté cambiar la apariencia del DatePicker, pero search UI_APPEARANCE_SELECTOR en el UIDatePicker no devuelve nada .

Lo que significa que no es posible cambiar ningún valor, según los documentos:

Para admitir la personalización de la apariencia, una class debe cumplir con el protocolo UIAppearanceContainer y los methods de acceso relevantes deben estar marcados con UI_APPEARANCE_SELECTOR.

¿Cómo puede cambiar la UIDatePicker mi UIDatePicker ?

La API no proporciona una forma de hacerlo. Puede hacer una réplica bastante convincente usando una UIPickerView en lugar de usar UIDatePicker.

Como UIDatePicker o UIPickerView no tienen el UI_APPEARANCE_SELECTOR e incluso usted no puede cambiar la apariencia de los contenidos de UIDatePicker como su UIControl y no tiene ningún delegado, por lo que tiene su apariencia nativa, mientras que en el caso de UIPickerView puede cambiar el aspecto de su contenido similar en UITableView.

 #pragma mark - #pragma mark UIPicker Delegate & DataSource - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 2; } // returns the # of rows in each component.. - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { return 100; } //- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent: (NSInteger)component { // return [NSString stringWithFormat:@"%d",row]; //} - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view { UILabel *label= [[[UILabel alloc] initWithFrame:CGRectMake(30.0, 0.0, 50.0, 50.0)] autorelease]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:[UIColor blueColor]]; [label setFont:[UIFont boldSystemFontOfSize:40.0]]; [label setText:[NSString stringWithFormat:@"%d",row]]; return label; } 

introduzca la descripción de la imagen aquí

Mira esto.

agregue este método en su file de implementación

 -(UIView *)pickerViews{ return ([datePicker.subviews objectAtIndex:0]); } -(void)viewDidLoad{ [super viewDidLoad]; [[self pickerViews].subviews enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) { NSLog(@"%@ --- > %i",obj, idx); }]; } 

cuando ejecute su aplicación, mostrará todas las subvenciones de datePicker en su console, simplemente elija cualquier índice y modifíquelas una por una

modifique la vistaDidLoad e inserte este código

 UIView *background = (UIView *)[[self pickerViews].subviews objectAtIndex:0]; background.backgroundColor = [UIColor clearColor]; UIView *wheel2 = (UIView *)[[self pickerViews].subviews objectAtIndex:4]; wheel2.backgroundColor = [UIColor networkingColor]; UIView *wheel3 = (UIView *)[[self pickerViews].subviews objectAtIndex:11]; wheel3.backgroundColor = [UIColor networkingColor]; 

En este caso, cambio el color de background del índice "0", "4", "11"

Con iOS 5 se presentó el protocolo UIAppearance , que le permite personalizar varios elementos de la interfaz de usuario. UIDatePicker cumple con este protocolo, así que probablemente sea la forma más fácil de hacerlo. Es decir, si está dispuesto a admitir solo usuarios de iOS 5. La opción de Matthew probablemente sea la siguiente mejor opción, que también debería funcionar con versiones antiguas de iOS.

Parece bastante difícil cambiar la forma en que aparece un UIDatePicker .

El ejemplo que brindó, en mi opinión, es una personalización sofisticada de un simple UIPickerView con dos columnas y probablemente un desplazamiento infinito simulado (como lo hace Apple en el datepicker, y es bastante simple de comprender).

Puede cambiar poco del UIDatePicker través del proxy UIAppearance , como se ve en este ejemplo:

 UIDatePicker *picker = [UIDatePicker appearance]; picker.backgroundColor = [[UIColor networkingColor] colorWithAlphaComponent:0.3]; UIView *view; view = [UIView appearanceWhenContainedIn:[UITableView class], [UIDatePicker class], nil]; view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5]; UILabel *label = [UILabel appearanceWhenContainedIn:[UITableView class], [UIDatePicker class], nil]; label.font = [UIFont systemFontOfSize:[UIFont systemFontSize]]; label.textColor = [UIColor blueColor]; 

Usando esta pieza de código al comienzo de la aplicación (solo intente), puede cambiar el aspecto de solo algunos de los componentes principales del datepicker.

Las tags son imposibles de personalizar (y este código de testing lo testing); aparentemente se cambian de aspecto cada vez que se gira una columna, ya que se colocan dentro de un controller UITableView personalizado.

Para cambiar completamente estas apariencias, probablemente deberías trabajar con API privadas de Apple, lo que eventualmente resultará en que tu aplicación sea rechazada .

Si solo necesita un selector de horas y horas personalizado (como se muestra en la captura de pantalla), la personalización completa de la apariencia solo se puede UIPickerView extendiendo la class UIPickerView o asignando un delegado apropiado a una instancia de UIPickerView .

A través de

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

método en el delegado, puede hacer que el elemento único de la vista del selector aparezca de la manera que desee. Entonces tendrá que manejar apropiadamente la fuente de datos para hacer que los dos componentes del selector sean prácticamente infinitos.

Puede implementar uno mismo usando dos UIScrollViews, uno durante horas y otro durante minutos. Solo necesitaría averiguar el contenido de la configuration de cada vista de desplazamiento cuando haya dejado de moverse, lo que en la parte superior de mi cabeza se vería así:

 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { if (!decelerate) { // get the offset here } } - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { // also get the offset here } 

Tome el valor de la compensación de contenido y tradúzcalo en el valor de la hora y el valor de los minutos, probablemente dividiendo la position y de la compensación de contenido por 24 o 60, respectivamente. Tendrá que crear la obra personalizada usted mismo.

Para cambiar el color del selector de date:

 [datePickerView setValue:self.pickerLabelColor forKey:@"textColor"]; 

Y para cambiar la fuente de la única manera que sé es:

Cree la categoría UIFont+System y coloque este código dentro

 #pragma clang diagnostic push #pragma clang diagnostic ignonetworking "-Wobjc-protocol-method-implementation" + (UIFont *)systemFontOfSize:(CGFloat)fontSize { return [UIFont fontWithName:fontName size:fontSize]; } #pragma clang diagnostic pop 

Esto establecerá también las fonts en otros lugares de su aplicación (reemplazando la fuente del sistema por su fuente).

Debe consultar el UICatalog de Apple. Tiene todos los methods en los que se puede usar un UIDatePicker, incluido el método de selector de date personalizado. Estudie este enlace developer.apple.com/library/ios/samplecode/UICatalog/. También han implementado un interruptor estándar y la barra de navigation que se proporciona en este último.

Una combinación de 2 UITableViews es el path a seguir.

UITableView es una subvista de UIScrollView , por lo que maneja el siguiente evento

 -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { } 

y al get la position, simplemente desplace la tabla hacia el centro usando el siguiente método

 [myTableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionMiddle animated:YES]; 

Espero que esto ayude.