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

Question

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

Quiero cambiar el siguiente segmentedControl:

a algo similar, como a continuación:

La razón por la que quiero usar una imagen personalizada es para que pueda cambia 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:

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

Es necesario hacer una imagen de fondo que es para todos los segmentos, y también una imagen que es sólo el borde izquierdo de un botón, una imagen que es la unión entre dos botones, y una imagen que es el borde derecho. Algunos de ellos deben hacerse para varios estados. Así que aquí está la lista de la imagen:

• la tapa izquierda, seleccionado
• tapa de izquierda, no seleccionada
• segmento de fondo, seleccionado
• fondo segmento, sin seleccionar
• tapa de la derecha, seleccionado
• tapa de la derecha , no seleccionado
• casquillo medio, izquierda seleccionada derecha no seleccionada
• casquillo medio, la izquierda no seleccionada, justo seleccionado
• casquillo medio, ambos seleccionados
• casquillo medio, tanto no seleccionada

Para las tapas de medias puede ponerlos en la siguiente manera: (texto de documentos de Apple).

// 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 debes enviar esos mensajes al proxy apariencia.

Answer 2

es necesario proporcionar las siguientes imágenes:

• fondo segmento seleccionado (esto tiene dos tapas izquierda y derecha)
  
• fondo segmento seleccionado (esto tiene dos tapas izquierda y derecha)
  
• segmento medio, izquierda seleccionada, derecha no seleccionada
  
• medio segmento, la izquierda no seleccionada, a la derecha selecciona
  
• medio segmento, tanto a la izquierda & derecho seleccionada
  
• medio segmento, tanto a la izquierda & derecho no seleccionada
  

Y a continuación, utilizar el siguiente código para establecer:

/* 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 estirable para que coincida con sus imágenes.

Answer 3

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

Así que hice la mía. Aquí están todas las imágenes que se necesita para Xcode y también puse en los archivos de Photoshop para la creación de las imágenes de control segmentados para que pueda cambiar el estilo:

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

Ponga esto en su AppDelegate tenerlo cambio la apariencia, el uso de 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]; 
}