2010-12-30 14 views
28

He visto preguntas similares, pero no he encontrado respuestas viables.Cómo enmascarar UIViews en iOS

Quiero enmascarar una UIView usando una imagen gris (necesito convertirla a una escala alfa para enmascararla). La UIView tiene antecedentes. Debería ser fácil enmascarar una imagen, pero quiero enmascarar cualquier UIView.

Cualquier pista será apreciada.

Respuesta

67

He estado trabajando en este problema durante un par de horas y tengo una solución que creo que hará lo que quiera. Primero, crea tu imagen de enmascaramiento usando cualquier medio que consideres adecuado. Tenga en cuenta que solo necesitamos los valores alfa aquí, todos los demás colores serán ignorados, así que asegúrese de que el método que utiliza sea compatible con los valores alfa. En este ejemplo, estoy cargando desde un archivo .png, pero no lo intente con archivos .jpg ya que no tienen valores alfa.

A continuación, crear una nueva capa, asignar su máscara a su contenido y establecer esta nueva capa a su propia capa de UIView, así: usted debe encontrar que esto enmascara el UIView y todos sus subvistas adjuntos:

UIImage *_maskingImage = [UIImage imageNamed:@"mask"]; 
CALayer *_maskingLayer = [CALayer layer]; 
_maskingLayer.frame = theView.bounds; 
[_maskingLayer setContents:(id)[_maskingImage CGImage]]; 
[theView.layer setMask:_maskingLayer]; 

Con esto hecho, puede establecer el color de fondo de UIView a su gusto y la máscara se usará para crear un filtro de color.

EDIT: A partir de iOS8 ahora puede enmascarar una vista simplemente asignando otra vista a su propiedad maskView. Las reglas generales siguen siendo las mismas ya que la capa alfa de maskView se utiliza para determinar la opacidad de la vista a la que se aplica.

+0

Gracias por su respuesta. El problema es que solo tengo imágenes con escala de grises (alfa == 1 para todos los puntos). Quiero convertir la imagen de escala de grises en una imagen alfa. ¿Tiene alguna idea? – subchap

+2

Bueno, la mejor manera de hacerlo es llevarlo a un conjunto de edición de imágenes como Photoshop y realizar la conversión allí. La alternativa sería hacerlo programáticamente creando un nuevo contexto de imagen, luego pasando pixel por pixel en la imagen anterior leyendo el componente gris, y convirtiéndolo en el componente alfa para su nuevo color antes de trazarlo en su nueva imagen .Sin embargo, esto es laborioso y una pérdida de tiempo, ya que usaría menos tiempo de procesamiento al hacerlo en un paquete de pintura. – Ash

+1

En photoshop esto se hace fácilmente: (1) crear una nueva capa (2) llenar una parte con negro (3) darle una máscara de capa (4) más allá de la imagen en escala de grises en la máscara. Negro = transparente, blanco = opaco, los grises tienen distintos grados de transparencia. (5) Aplique la máscara de capa (haga clic con el botón derecho en la máscara en el panel de capas y haga clic en "aplicar máscara de capa") (6) recorte la parte de la capa que necesita. –

1

No conozco el código exacto pero la idea básica es tener dos UIViews. Una UIView tendría su propiedad de imagen configurada para ser la imagen de escala de grises y la otra UIView se establecería como de costumbre; la única diferencia es que colocaría la UIView inicial directamente encima de la UIView que contiene la imagen "normal".

Espero que sea suficiente para llevar su idea un paso más allá.

+0

Gracias por su respuesta. No lo dejé en claro, pero lo que quiero es convertir la imagen de escala de grises en una imagen alfa (como lo hace la máscara normal) y aplicarla a UIView. – subchap

6

Para aplicaciones dirigidas a iOS 8.0+ esto funcionó bien (en este caso, utilizando un degradado como máscara). Evita la necesidad de cambiar el tamaño o posicionar la máscara.

// Add gradient mask to view 
func AddGradientMask(targetView: UIView) 
{ 
    let gradientMask = CAGradientLayer() 

    gradientMask.frame = targetView.bounds 
    gradientMask.colors = [UIColor.blackColor().CGColor, UIColor.clearColor().CGColor] 
    gradientMask.locations = [0.8, 1.0] 

    let maskView: UIView = UIView() 
    maskView.layer.addSublayer(gradientMask) 

    targetView.maskView = maskView 
} 

En mi caso, quiero quitar la máscara una vez que el usuario comienza a desplazarse. Esto se hace con:

func scrollViewWillBeginDragging(scrollView: UIScrollView) { 

    exerDetailsTableView.maskView = nil   
} 

donde la vista se define como un @IBOutlet:

@IBOutlet weak var exerDetailsTableView: UITableView! 

Resultado:

example screenshot

Cuestiones relacionadas