UIProgressView e Imágenes de Seguimiento y Progreso personalizadas (propiedades de iOS 5)


Estoy experimentando con algunas propiedades nuevas en iOS 5 con respecto a UIProgressView. Son:

@property(nonatomic, retain) UIImage *progressImage;
@property(nonatomic, retain) UIImage *trackImage;

Estas nuevas propiedades permiten la personalización de la imagen "progress" y "track", para que pueda hacer barras de progreso elegantes sin tener que rodar sus propias.

Sin embargo, no puedo entender cómo Apple " estira" las imágenes de progreso, porque la documentación es un poco escamosa / O hay algún estándar que no conozco. De todos modos, estoy preguntando si alguien puede ayudarme a entender cómo hacer el progreso adecuado y el seguimiento de las imágenes.

Obtengo resultados como este cuando cargo mis imágenes personalizadas, sin importar los tamaños que intente:

Ejemplo de Progreso

Mis medidas son las siguientes:

  • UIProgressView longitud: 226 unidades
  • trackingImage.png: 10px
  • progressImage.png: 7px

Por último, aquí están mis costumbres imágenes:

La Imagen del ProgresoprogressImage.png

La Imagen de SeguimientotrackImage.png

Author: Sean, 2011-11-02

1 answers

Esto es lo que está pasando:

Las imágenes que le proporcionas a UIProgressView están básicamente siendo empujadas hacia UIImageViews, y el UIImageView está estirando la imagen para llenar el espacio.

Si simplemente lo haces:

[progressView setTrackImage:[UIImage imageNamed:@"track.png"]];

Entonces vas a obtener resultados extraños, porque está tratando de estirar una imagen de ancho 10px para llenar (por ejemplo) una vista de imagen de ancho 100px. Esto significa (aproximadamente) que cada píxel de la imagen se repetirá 10 veces. Así que si los píxeles en nuestra imagen fueron:

0123456789

Luego poner esa imagen directamente en una vista de imagen ancha de 100px la estiraría algo como esto:

000000000011111111112222222222333333333344444444445555555555...

Esto es lo que te está pasando.

Lo que tú realmente quieres que suceda es esto: {[11]]}

01234567812345678123456781234567812345678...123456789

En otras palabras, desea que la imagen tenga un borde izquierdo de 1 punto que nunca se estire, que el centro esté en mosaico y que tenga un borde derecho de 1 punto que tampoco se estire. Para hacer esto, necesitarás hacer la imagen redimensionable :

UIImage *track = [[UIImage imageNamed:@"track"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)];
[progressView setTrackImage:track];

Si desea que este mosaico también sea verticalmente apropiado, entonces las inserciones de borde deben ser {1, 1, 1, 1} (suponiendo que desee un borde de 1 punto).

Haz lo mismo con progressImage, y terminarás con algo que parece correcto:

Correct progressView

Tl; dr: {[38]]}

Sus imágenes deben ser redimensionables.

 108
Author: Dave DeLong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-02 14:19:41