iphone - stepper - switch ios

Límites de control UISegmentado

Question

Quiero dar el siguiente aspecto a un UISegmentedControl:

Tenga en cuenta la vista de fondo gris y el fondo blanco del elemento no seleccionado de control segmentado.

Pero, si le doy un fondo blanco a mi UISegmentedControl, obtengo lo siguiente:

Tenga en cuenta las esquinas cuadradas blancas alrededor del control UISegmented. ¿Qué debo hacer para evitar que las esquinas cuadradas?

Gracias de antemano,

EDITAR: Si cambio el radio de la esquina de la capa UISegmentedControl, como lo sugiere onegray, el resultado es mejor, pero no perfecto (observe la línea blanca a la derecha):

Answer 1

Configurando el _segmentedControl.layer.cornerRadius = 5; podría ayudar.

Actualización: un clip más complejo para deshacerse del espacio correcto de 1px:

    CAShapeLayer* mask = [[CAShapeLayer alloc] init];
    mask.frame = CGRectMake(0, 0, _segmentedControl.bounds.size.width-1, _segmentedControl.bounds.size.height);
    mask.path = [[UIBezierPath bezierPathWithRoundedRect:mask.frame cornerRadius:4] CGPath];
    _segmentedControl.layer.mask = mask;

Actualización: Matthias Bauch proporcionó una buena explicación de por qué este espacio en blanco aparece en el lado derecho de UISegmentedControl . Así que la forma más sencilla de eliminarlo es haciendo segmentos de tamaño fijo y ajustándolos para lograr el ancho adecuado.

Answer 2

Sé que esto es una especie de pirateo, pero podría usar una vista UIV redondeada con fondo blanco justo debajo y alineado con el control segmentado, excepto por el ancho que debe ser igual al ancho del control original menos 1.

Resultado:

Answer 3

Si eso debería funcionar para todos los controles UISegmented es un poco complicado. El problema está en iOS7 el 1 pt. El borde entre dos segmentos no cuenta para el tamaño del segmento. Por ejemplo, si el marco de su UISegmentedControl es 320 pt. De ancho tienes que quitar 1 pt. y luego dividir por 2. Y (320-1) / 2 es 159.5. iOS reduce este valor a 159 pt. Y terminas con un 1 pt. Borde y dos 159 pt. segmentos Que es 319, y no 320. Por lo tanto, el 1pt. línea a la derecha de su control segmentado.

Hay una manera de calcular el tamaño "real" (el tamaño de la representación en pantalla) del control de segmentos. Con ese ancho, puede agregar una UIView con esquinas redondeadas debajo del UISegmentedControl. Este código debería funcionar para todas las configuraciones, incluso si tiene segmentos de tamaño manual en su control de segmentos:

- (UIView *)addBackgroundViewBelowSegmentedControl:(UISegmentedControl *)segmentedControl {
    CGFloat autosizedWidth = CGRectGetWidth(segmentedControl.bounds);
    autosizedWidth -= (segmentedControl.numberOfSegments - 1); // ignore the 1pt. borders between segments

    NSInteger numberOfAutosizedSegmentes = 0;
    NSMutableArray *segmentWidths = [NSMutableArray arrayWithCapacity:segmentedControl.numberOfSegments];
    for (NSInteger i = 0; i < segmentedControl.numberOfSegments; i++) {
        CGFloat width = [segmentedControl widthForSegmentAtIndex:i];
        if (width == 0.0f) {
            // auto sized
            numberOfAutosizedSegmentes++;
            [segmentWidths addObject:[NSNull null]];
        }
        else {
            // manually sized
            autosizedWidth -= width;
            [segmentWidths addObject:@(width)];
        }
    }

    CGFloat autoWidth = floorf(autosizedWidth/(float)numberOfAutosizedSegmentes);
    CGFloat realWidth = (segmentedControl.numberOfSegments-1);      // add all the 1pt. borders between the segments
    for (NSInteger i = 0; i < [segmentWidths count]; i++) {
        id width = segmentWidths[i];
        if (width == [NSNull null]) {
            realWidth += autoWidth;
        }
        else {
            realWidth += [width floatValue];
        }
    }

    CGRect whiteViewFrame = segmentedControl.frame;
    whiteViewFrame.size.width = realWidth;

    UIView *whiteView = [[UIView alloc] initWithFrame:whiteViewFrame];
    whiteView.backgroundColor = [UIColor whiteColor];
    whiteView.layer.cornerRadius = 5.0f;
    [self.view insertSubview:whiteView belowSubview:segmentedControl];
    return whiteView;
}

Por favor, cuida de los cambios de marco tú mismo.

Vea esta captura de pantalla para ver la diferencia entre los dos controles. Todos los cuadros son 280 pt. amplio.

Debido a que la fórmula UISegmentedControl utiliza el primer control, el tamaño real es 278 pt. Y el tamaño real del segundo es de 279 pt.

El problema es que esto de alguna manera se basa en la implementación de UISegmentedControl. Apple podría, por ejemplo, cambiar la implementación para que se muestre segmentWidth que finalice en .5 puntos. Podrían hacer esto fácilmente en las pantallas de la retina.

Si usa este código, debe verificar su aplicación en las nuevas versiones de iOS lo antes posible. Estamos confiando en los detalles de la implementación, y esos podrían cambiar todos los días. Afortunadamente, nada malo sucede si cambian la implementación. Simplemente no se verá bien.

Answer 4

Solo para aclarar la excelente respuesta de Mattias Bauch . yourMainView establecer la vista devuelta como una subvista a la vista (que llamamos yourMainView ) donde tiene su control segmentado:

UIView *segmControlBackground = [self addBackgroundViewBelowSegmentedControl:yourSegmentedControl];
[yourMainView addSubview:segmControlBackground];

Y, por supuesto, debe declarar el nuevo método en su archivo de encabezado (.h):

- (UIView *)addBackgroundViewBelowSegmentedControl:(UISegmentedControl *)segmentedControl;