iphone - que - no puedo desactivar control por boton

Personalización de los botones de control UISegmented izquierdo y derecho

Question

Estoy tratando de personalizar el siguiente control segmentado, usando una imagen izquierda para el primer botón y una imagen derecha para el segundo botón. ¿Cómo haría esto usando UIApearance?

Quiero cambiar el siguiente control segmentado:

a algo similar como abajo:

La razón por la que quiero usar una imagen personalizada es para poder cambiar las esquinas de los botones. Si miras el control segmentado azul, es más cuadrado (mi imagen tiene sus propias esquinas).

Estaba pensando en algo como esto pero no sirve de nada:

UIImage *leftImage = [[UIImage imageNamed:@"leftControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
UIImage *rightImage = [[UIImage imageNamed:@"rightControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];

[[UISegmentedControl appearance] setBackgroundImage:leftImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault ];
[[UISegmentedControl appearance] setBackgroundImage:rightImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Answer 1

Debe crear una imagen de fondo para todos sus segmentos, y también una imagen que sea el borde izquierdo de un botón, una imagen que sea la combinación entre dos botones y una imagen que sea el borde derecho. Algunos de estos deben hacerse para múltiples estados. Así que aquí está su lista de imágenes:

• tapa izquierda, seleccionado
• tapa izquierda, sin seleccionar
• fondo del segmento, seleccionado
• fondo del segmento, no seleccionado
• tapa derecha, seleccionado
• tapa derecha, sin seleccionar
• tapa central, izquierda seleccionada derecha no seleccionada
• tapa central, izquierda no seleccionada, derecha seleccionada
• casquillo medio, ambos seleccionados
• casquillo medio, ambos sin seleccionar

Para las mayúsculas intermedias, puede ponerlas así: (texto de Apple docs).

// Image between two unselected segments.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal
              rightSegmentState:UIControlStateNormal barMetrics:barMetrics];
// Image between segment selected on the left and unselected on the right.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateSelected
              rightSegmentState:UIControlStateNormal barMetrics:barMetrics];
// Image between segment selected on the right and unselected on the right.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal
              rightSegmentState:UIControlStateSelected barMetrics:barMetrics];

Si está utilizando UIAppearance , obviamente enviaría esos mensajes al proxy de apariencia.

Answer 2

La respuesta de Maurizio no funcionó para mí con un control segmentado dentro de una barra de herramientas; siguió mostrando estas líneas fantasmas en los controles ya que las imágenes divisorias no eran lo suficientemente amplias.

Así que hice mi propio. Aquí están todas las imágenes que necesitará para Xcode y también puse los archivos de Photoshop para crear las imágenes de control segmentadas para que pueda cambiar el estilo:

https://s3.amazonaws.com/iwasrobbed//Custom+Segmented+Control.zip

Ponga esto en su AppDelegate para que cambie la apariencia, usando las imágenes adjuntas, de todos los controles segmentados dentro de una barra de herramientas:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [self customizeAppAppearance];
}

- (void)customizeAppAppearance
{
    // Toolbar
    [[UIToolbar appearance] setBackgroundImage:[[UIImage imageNamed:@"toolbar.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(22, 5, 22, 5)] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

    // Segmented Controls within Toolbars

    // Unselected background
    UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segmentInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)];
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:unselectedBackgroundImage
                                                                                     forState:UIControlStateNormal
                                                                                   barMetrics:UIBarMetricsDefault];

    // Selected background
    UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segmentActive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)];
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:selectedBackgroundImage
                                                                                     forState:UIControlStateSelected
                                                                                   barMetrics:UIBarMetricsDefault];

    // Image between two unselected segments
    UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segmentBothInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 10, 15, 10)];
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:bothUnselectedImage
                                                                       forLeftSegmentState:UIControlStateNormal
                                                                         rightSegmentState:UIControlStateNormal
                                                                                barMetrics:UIBarMetricsDefault];

    // Image between segment selected on the left and unselected on the right
    UIImage *leftSelectedImage = [[UIImage imageNamed:@"segmentLeftActiveRightInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:leftSelectedImage
                                                                       forLeftSegmentState:UIControlStateSelected
                                                                         rightSegmentState:UIControlStateNormal
                                                                                barMetrics:UIBarMetricsDefault];

    // Image between segment selected on the right and unselected on the left
    UIImage *rightSelectedImage = [[UIImage imageNamed:@"segmentRightActiveLeftInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:rightSelectedImage
                                                                       forLeftSegmentState:UIControlStateNormal
                                                                         rightSegmentState:UIControlStateSelected
                                                                                barMetrics:UIBarMetricsDefault];
}

Answer 3

Necesitas proporcionar las siguientes imágenes:

• Fondo del segmento seleccionado (esto tiene mayúsculas izquierda y derecha)
  
• Fondo del segmento no seleccionado (esto tiene mayúsculas a la izquierda y derecha)
  
• Segmento medio, izquierdo seleccionado, derecho no seleccionado
  
• segmento medio, izquierdo no seleccionado, derecho seleccionado
  
• segmento medio, tanto a la izquierda como a la derecha seleccionados
  
• segmento medio, izquierda y derecha no seleccionados
  

Y luego usa el siguiente código para configurar:

/* Unselected background */
UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segment_background_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
[[UISegmentedControl appearance] setBackgroundImage:unselectedBackgroundImage
                                           forState:UIControlStateNormal
                                         barMetrics:UIBarMetricsDefault];

/* Selected background */
UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segment_background_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
[[UISegmentedControl appearance] setBackgroundImage:selectedBackgroundImage
                                           forState:UIControlStateSelected
                                         barMetrics:UIBarMetricsDefault];

/* Image between two unselected segments */
UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segment_middle_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearance] setDividerImage:bothUnselectedImage
                             forLeftSegmentState:UIControlStateNormal
                               rightSegmentState:UIControlStateNormal
                                      barMetrics:UIBarMetricsDefault];

/* Image between segment selected on the left and unselected on the right */
UIImage *leftSelectedImage = [[UIImage imageNamed:@"segment_middle_left_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearance] setDividerImage:leftSelectedImage
                             forLeftSegmentState:UIControlStateSelected
                               rightSegmentState:UIControlStateNormal
                                      barMetrics:UIBarMetricsDefault];

/* Image between segment selected on the right and unselected on the left */
UIImage *rightSelectedImage = [[UIImage imageNamed:@"segment_middle_right_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)];
[[UISegmentedControl appearance] setDividerImage:rightSelectedImage
                             forLeftSegmentState:UIControlStateNormal
                               rightSegmentState:UIControlStateSelected
                                      barMetrics:UIBarMetricsDefault];

Tenga en cuenta que deberá ajustar el tamaño de la tapa en las imágenes extensibles para que coincidan con sus imágenes.