Cómo lograr el efecto de vidrio esmerilado en iPhone
Haga clic en Siguiente, asígnele un nombre arbitrario y seleccione Objective-C como idioma, como se muestra en la siguiente figura:
Entrada completada Después de nombrar el proyecto, continúe haciendo clic en Siguiente y seleccione el directorio en su Mac para almacenar los archivos del proyecto para completar. Una vez establecido el proyecto, comenzamos nuestro viaje de código hoy.
Dado que necesita simular el efecto de vidrio esmerilado de la imagen, por supuesto, primero necesita una imagen. Utilicé la portada del primer álbum de Jay Chou como material gráfico para esta sección. La imagen es la siguiente:
A continuación, arrastre esta imagen a la carpeta Assets.xcassets del archivo de proyecto que acaba de crear, como se muestra a continuación:
Ahora haga clic a la izquierda, seleccione el Archivo ViewController.m de la lista de archivos. En este momento, el código relevante se mostrará en el área de códigos en el lado derecho de la lista de archivos. A continuación, escribiremos el código para lograr lo que queremos lograr hoy.
Cabe señalar que necesitamos escribir el siguiente código en viewDidLoad? En método, está bien, empieza.
En el primer paso, procesamos la imagen, la agregamos a la interfaz del iPhone y la mostramos en pantalla completa. El código relevante es el siguiente:
Cree un objeto UIImageView para almacenar la imagen, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; line height: 1.45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; desbordamiento: automático; color de fondo: rgb(247, 247, 247); 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: inline; color de fondo: transparente; , separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal" >UIImageView * imageView = ltspan style = " color: # 999988 estilo de fuente: cursiva " >[ lt; span style = " " gt[ ui imageview alloc]lt;/spangt. init]lt;/spangt.
lt/code gt; lt/pre gt;
Establezca el tamaño de la imagen para que ocupe toda la pantalla, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; altura de línea: 1,45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; relleno: 16px; color de fondo: rgb(247, 247, 247); (51, 51, 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: overflow: visible; Liberation Mono' Dao', Menlo, Courier, separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal" >imageView.frame = ltspan style="font-weight: 700" >self lt/spangt. view.bounds lt/code gt; lt/pre gt;
Especifique los recursos de imagen que se mostrarán, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; altura de línea: 1,45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; desbordamiento: color de fondo: rgb (247, 247, 247); : rgb (51, 51, 51); margen superior: 0px! Importante; margen inferior: 0px! Importante" > ltcode style = " display: overflow: visible; ,' Liberate Mono', Menlo, Courier, separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal" >imageview.image=[ui imagelt;span style="color: #DD 1144" > imagen nombrada : lt;/spangt. @ ltspan style = " color: #DD 1144 " >" Jay.jpg " lt/spangt.
]; lt/code gt; lt/pre gt;
Establezca el modo de visualización de la imagen, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; altura: 1,45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; desbordamiento: automático; color de fondo: rgb (247, 247, 247); 51, 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: inline; color de fondo: transparente; ', Menlo, Courier, separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal" >imageview . modo de contenido = UIViewContentModeScaleToFill lt; estilo de extensión = " color: # 999988 estilo de fuente: cursiva " > ;lt/spangt. lt/code > font-family: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; desbordamiento: automático; color de fondo: rgb (247, 247, 247); 51, 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: inline; color de fondo: transparente; ', Menlo, Courier, separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal" > ltspan style = " color: #9900; peso de fuente: 700 " > [self . view addSubview: imageView] lt ;/spangt. estilo ltspan = " color: # 999988; estilo de fuente: cursiva " > lt/spangt. lt/code gt; lt/pre gt;
Ahora veamos el efecto y ejecutemos el simulador. El efecto es el siguiente:
De esta manera, agregamos esta imagen al iPhone y la mostramos en pantalla completa. Debido a que la relación de imagen no es consistente con la del iPhone, aquí hay un ligero desequilibrio. Puedes encontrar una imagen de la misma escala para probar. A continuación, veamos cómo crear un efecto de vidrio esmerilado.
El segundo paso es crear un efecto de cristal esmerilado. Aquí usamos la barra de herramientas para cubrir la imagen y simular el efecto de vidrio esmerilado. El método de operación específico es crear primero un objeto de barra de herramientas, luego establecer su tamaño al mismo tamaño que la imagen, es decir, configurarlo al tamaño de la pantalla y luego superponerlo a la imagen. Los códigos de operación relevantes son los siguientes.
Cree un objeto ToolBar usando el siguiente código:
ltpre style = " font-size: 11.899999618530273 px; line-height: 1.45; font-family: Consolas, 'Liberate Mono' , Menlo, Courier, ajuste de línea automático monoespaciado: normal; desbordamiento: automático; color de fondo: rgb (247, 247, 247); ; margen inferior: 0px! importante" > estilo ltcode = " pantalla: en línea; desbordamiento: visible; color de fondo: transparente; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, separación de palabras monoespaciada: normal; 0px altura de línea: heredado; ajuste de palabras: normal" >UIToolbar * toolBar = ltspan style = " color: # 999988; estilo de fuente: cursiva " >[ lt; span style = " " gt[ui toolbar alloc] lt; /spangt. init]lt;/spangt. lt/code gt; lt/pre gt;
Establezca el tamaño de la barra de herramientas para que sea coherente con el tamaño de la imagen, el código es el siguiente:
ltpre style = " font-size : 11.899999618530273 px; altura de línea: 1,45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespacio: normal; desbordamiento: color de fondo: rgb (247, 247, 247); : rgb( 51, 51, 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: overflow: visible; , 'Liberation Mono', Menlo, Courier, separación de palabras en monoespacio: normal; bordes: 0px altura de línea: heredada; ajuste de palabras: normal :italic ">lt/spangt.
lt/code gt; lt/pre gt;
Establezca el efecto de vidrio esmerilado, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; altura de línea: 1.45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; desbordamiento: automático; color de fondo: rgb(247, 247, 247); 51); margen superior: 0px! importante; margen inferior: 0px! importante" > estilo ltcode = "pantalla: desbordamiento: visible; color de fondo: transparente; , separación de palabras en monoespacio: normal; bordes: 0px altura de línea: heredada; ajuste de palabras: normal" > barra de herramientas . estilo de barra = UIBarStyleBlack lt; estilo de extensión = " color: #999988 estilo de fuente: cursiva " >; . lt/code gt; lt/pre gt;
Agrega la barra de herramientas a la imagen para superponerla. El código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; line-height: 1.45; font-family: Consolas, 'Liberate Mono', Menlo, Courier, monospace wrap: normal; relleno: 16px; desbordamiento: auto; color de fondo: rgb (247, 247, 247); color: rgb (51, 51, 51); margen superior: 0px ¡Importante! = " pantalla: en línea; desbordamiento: visible; color de fondo: transparente; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, separación de palabras monoespaciada: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal " > ltspan style = " color: # 9900; font-weight: 700 " > [imageView agregar subvista: barra de herramientas] lt; /spangt. estilo ltspan = " color: # 999988; estilo de fuente: cursiva " > lt/spangt. lt/code gt; lt/pre gt;
Ejecutar el simulador tiene el siguiente efecto:
Este es el efecto de vidrio esmerilado negro y hay un efecto blanco predeterminado para el vidrio esmerilado. .
Simplemente modifique el código de configuración del efecto de vidrio esmerilado al siguiente código:
ltpre style = " font-size: 11.899999618530273 px; line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, ajuste monoespacial: normal; relleno: 16px; desbordamiento: automático; color de fondo: rgb(247, 247, 247); color: rgb(51, 51, 51); 0px! importante" > ltcode style = " display: inline; overflow: visible; color de fondo: transparente; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, separación de palabras monoespaciada: normal; heredado; ajuste de palabras: normal" > barra de herramientas. estilo de barra = UIBarStyleDefault lt; estilo de extensión = " color: #999988; estilo de fuente: cursiva " > lt/spangt. lt/code gt; lt/pre gt;
Ejecutar el simulador tiene el siguiente efecto:
Pero personalmente creo que el negro es más hermoso, así que uso negro aquí y lo configuraré. el código Restaurar al efecto negro.
La imagen ahora tiene un efecto de vidrio esmerilado y está relativamente borrosa. Si escribimos en el cristal esmerilado en este momento, las palabras serán muy claras. ¿Quieres probarlo? Bien, sigamos escribiendo algunas palabras en el vidrio esmerilado y veamos el efecto. Escribamos el nombre del álbum en la parte inferior de la imagen.
El tercer paso es agregar texto. El código relevante es el siguiente.
Crea un objeto Label usando el siguiente código:
ltpre style = " font-size: 11.899999618530273 px; line-height: 1.45; font-family: Consolas, 'Liberation Mono' , Menlo, Courier, ajuste de línea automático monoespaciado: normal; desbordamiento: automático; color de fondo: rgb (247, 247, 247); ; margen inferior: 0px! importante" > estilo ltcode = " pantalla: en línea; desbordamiento: visible; color de fondo: transparente; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, separación de palabras monoespaciada: normal; 0px altura de línea: heredado; ajuste de palabras: normal" >UILabel * etiqueta = ltspan style = " color: #999988; estilo de fuente: cursiva " >[ lt; span style = " " gt[UILabel alloc] lt;/ spangt. init]lt;/spangt.
lt/code gt; lt/pre gt;
Establece la posición de visualización del texto, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; line height : 1.45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, monospace Wrap: normal; relleno: 16px; color de fondo automático: rgb (247, 247, 247); , 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: inline; color de fondo: transparente; Courier, separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal" >label . frame = CGRectMake(self . view . frame . size . width/ lt; span style="color: verde azulado " >2 lt /spangt. - lt; estilo de extensión = " color: verde azulado " >50 lt/spangt., self.view.frame.size.height/lt; estilo de extensión = " color: verde azulado " gt; span style="color:teal">150lt;/spangt., ltspan style="color:teal">100lt;/spangt lt/code gt;
Establece el texto. muestra el color a blanco, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; line height: 1.45; font-family: Consolas, 'Liberate Mono', Menlo, Courier, monospace ajuste: normal; relleno: 16px; desbordamiento: automático; color de fondo: rgb(247, 247, 247); color: rgb(51, 51, 51); margen superior: 0px! importante" > estilo ltcode = " pantalla: en línea; desbordamiento: visible; color de fondo: transparente; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, separación de palabras monoespaciada: normal; Ajuste de línea: normal" >label.textColor = ltspan style = " color: # DD 1144 " >[ui color color blanco] lt;/spangt.
lt/code gt; lt/pre gt;
Configura el texto para que esté centrado y alineado, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px ; altura de línea: 1,45; fuente -familia: Consolas, 'Liberate Mono', Menlo, Courier, monospace Ajuste: normal; color de fondo: rgb (247, 247); 51, 51, 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: overflow: visible; , Menlo, Courier, separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal " > ltspan style="font-weight: 700 " > etiqueta lt/spangt. . alineación de texto = NSTextAlignmentCenter; lt/code gt; lt/pre gt;
Establezca el contenido de visualización del texto, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; altura de línea: 1,45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; desbordamiento: automático; rgb (247, 247, 247); ( 51, 51, 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: overflow: visible; Liberation Mono', Menlo, Courier, separación de palabras en monoespacio: normal; borde: 0px altura de línea: heredada; ajuste de palabras: normal "> etiquetas. ltspan style = " color: # 445588; peso de fuente: 700 " >text lt/spangt. = @ estilo ltspan = " color: # DD 1144 " > "Jaylen" lt/spangt.
; lt/code gt; lt/pre gt;
Agregue texto a la barra de herramientas para mostrarlo, el código es el siguiente:
ltpre style = " font-size: 11.899999618530273 px; altura de línea: 1,45; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, ajuste monoespaciado: normal; desbordamiento: automático; color de fondo: rgb(247, 247, 247); , 51, 51); margen superior: 0px! importante; margen inferior: 0px! importante" > ltcode style = " display: inline; color de fondo: transparente; ', Menlo, Courier, separación de palabras en monoespacio: normal; bordes: 0px altura de línea: heredada; ajuste de palabras: normal" > ltspan style = " color: #9900; peso de fuente: 700 " > [barra de herramientas agregar vista secundaria: etiqueta ]lt;/spangt. estilo ltspan = " color: # 999988; estilo de fuente: cursiva " > lt/spangt. lt/code gt; lt/pre gt;
Ejecutar el simulador tiene los siguientes efectos:
En este punto, se ha escrito todo el código y la demostración del efecto del frosted de hoy. Las representaciones de vidrio también lo son. Eso es todo. El código completo es el siguiente:
ltpre style=" font-size: 11.899999618530273 px; line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, ajuste automático de línea monospace : normal; relleno: 16px; desbordamiento: automático; color de fondo: rgb(247, 247, 247); color: rgb(51, 51, 51); margen superior: 0px! > ltcode style = " display: inline; overflow: visible; color de fondo: transparente; familia de fuentes: Consolas, 'Liberate Mono', Menlo, Courier, separación de palabras monoespaciada: normal; borde: 0px altura de línea: heredada; palabra- envoltura: normal" >-( lt; span style="font-weight: 700 " >void lt/spangt.) viewDidLoad { ampnbsp ampnbsp[ lt; span style="font-weight: 700 " >super lt/spangt. viewDidLoad]; ampnbsp ampnbsp ampnbsp ampnbsp ltspan style = " color: # 999988; font-style: italic " >//Paso 1: Procesar la imagen