Share
A veces solo se necesitan unas pocas líneas de código para hacer que su interfaz se abra. Este tutorial le enseñará cinco trucos simples para crear UIButtons con estilo para que su aplicación se destaque!
Ciertos aspectos de las aplicaciones o técnicas utilizadas en este tutorial han cambiado desde que se publicó originalmente. Esto podría hacer que sea un poco difícil de seguir. Recomendamos ver estos tutoriales más recientes sobre el mismo tema:
En la descarga que acompaña a este tutorial, encontrará carpetas tituladas "Compilación inicial" y "Compilación final". En lugar de mostrar todos los pasos necesarios para configurar el proyecto inicial, simplemente debe descargar el archivo adjunto y seguir el proyecto desde la carpeta "Construcción inicial"..
Con el proyecto inicial abierto, ve a la ViewController.m archiva y localiza el para bucle dentro del viewDidLoad método. Los fragmentos de código de los siguientes consejos deben colocarse dentro de este bucle..
El paso más fundamental hacia la personalización del UIButton clase es ajustar el color del fondo y el título para los estados predeterminado y resaltado. El siguiente fragmento de código establece el color de fondo de cada botón en negro, el color del título normal en blanco y el color del título resaltado en rojo:
// Establecer el botón Color del texto [btn setTitleColor: [UIColor whiteColor] para State: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Configurar el botón Color de fondo [btn setBackgroundColor: [UIColor blackColor]];
Los colores de fondo sólidos son excelentes, pero un gradiente sutil a menudo puede hacer la diferencia entre suave y pulido. Reemplace la setBackgroundColor: mensaje anterior con lo siguiente para crear un gradiente personalizado:
// Dibuje un gradiente personalizado CAGradientLayer * btnGradient = [CAGradientLayer layer]; btnGradient.frame = btn.bounds; btnGradient.colors = [NSArray arrayWithObjects: (id) [[UIColor colorWithRed: 102.0f / 255.0f green: 102.0f / 255.0f blue: 102.0f / 255.0f alpha: 1.0f] CGColor], (id) [[UIColor colorWithRed : 51.0f / 255.0f verde: 51.0f / 255.0f azul: 51.0f / 255.0f alfa: 1.0f] CGColor], nil]; [btn.layer insertSublayer: btnGradient atIndex: 0];
Comenzando en la línea 4 arriba, un NSArray Se crea con los colores de gradiente inicial y objetivo. Tenga en cuenta que los valores RGB correspondientes deben dividirse por 255 antes de suministrarse al colorWithRed: verde: azul: alfa: mensaje y que un valor alfa de 1.0 representa totalmente opaco mientras que un valor alfa de 0.0 Representa totalmente transparente. Desafortunadamente, una explicación completa de la "magia" anterior está fuera del alcance de este tutorial, pero lo importante a recordar es que simplemente debe reemplazar los valores RGB con los valores de inicio / finalización que desea utilizar en su propia costumbre. gradiente.
Si todo salió bien, su menú ahora debería verse como esto:
No está mal, ¿eh? Y acabamos de empezar ...
A continuación queremos añadir un radio de esquina personalizado a cada uno. UIButton con el fin de hacer que las cosas se vean un poco más elegante. Inserte las siguientes líneas de código para que esto suceda:
// Redondear las esquinas de los botones CALayer * btnLayer = [capa btn]; [btnLayer setMasksToBounds: YES]; [btnLayer setCornerRadius: 5.0f];
En la línea 4 por encima del radio de la esquina se establece en 5.0. Juega con este número para aumentar o disminuir la notoriedad de las esquinas..
Ahora debería tener un menú que se ve un poco más pulido:
A veces los pequeños retoques marcan la diferencia. Agregue un trazo negro de 1px alrededor de cada botón con las siguientes líneas de código:
// Aplicar un borde negro de 1 píxel [btnLayer setBorderWidth: 1.0f]; [btnLayer setBorderColor: [[UIColor blackColor] CGColor]];
¿Puedes decir la diferencia? Es muy sutil, pero sigue siendo valioso:
Ahora vamos a probar un pellizco más notable. La fuente del sistema por defecto simplemente no la está cortando. El menú del juego que estamos construyendo necesita una fuente que pueda coincidir con la estética visual del juego. Una búsqueda rápida en Google Fonts revela solo una fuente llamada Knewave por Tyler Finck que debería hacer el truco. Descargar Knewave ahora.
Después de descargar el Knewave-Regular.ttf Para ello, debe arrastrarlo al panel de Project Navigator en Xcode para agregarlo a su proyecto. A continuación, abre la Info.plist expediente. Agregue una nueva fila de la lista de propiedades y escriba "Fuentes proporcionadas por la aplicación". Una matriz debe crearse automáticamente. Establezca la cadena asociada con el elemento 0 en "Knewave-Regular.ttf". Verifique dos veces el nombre porque el valor distingue entre mayúsculas y minúsculas. Guarda el archivo.
Después de realizar la modificación anterior, su archivo Info.plist ahora debería tener este aspecto:
A continuación, deberás agregar el Knewave-Regular.ttf Archivo a los recursos empaquetados de su proyecto. Seleccione "SleekButtons" del Project Navigator y luego haga clic en la pestaña "Build Phases". Expanda el menú desplegable "Copiar los recursos del paquete" y luego haga clic en el signo más.
En este punto, ¡debería poder comenzar a utilizar la fuente Knewave en su proyecto! Vamos a probar eso saltando de nuevo a la ViewController.m archivar y modificar el viewDidLoad método para establecer una fuente personalizada:
// Establecer el botón Color del texto [btn setTitleColor: [UIColor whiteColor] para State: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Agregar fuente personalizada [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" tamaño: 18.0f]]; // Dibuje un gradiente personalizado CAGradientLayer * btnGradient = [CAGradientLayer layer]; btnGradient.frame = btn.bounds;
Tenga en cuenta que el fuenteCon nombre el valor se especifica como "Knewave", no "Knewave-Regular" como podría esperarse. Esto se debe a que existe una diferencia entre el nombre de archivo de la fuente y el nombre de la fuente. Deberá asegurarse de usar el nombre de pila cuando trabaje con sus propias fuentes..
Con el código anterior en su lugar, el menú del juego debería estar completo. Crea y ejecuta ahora y deberías ver algo como lo siguiente:
Si bien no se utiliza en el diseño principal demostrado por este tutorial, a menudo es útil aplicar una ligera rotación a los elementos UIKit, particularmente UIButton o UIImage objetos. Hacerlo es simple y se puede hacer con solo una línea de código.
Puedes probar esto con el código escrito hasta ahora haciendo lo siguiente:
self.startGameButton.transform = CGAffineTransformMakeRotation (M_PI / 180 * 5.0f); para (UIButton * btn en botones) // Configurar el botón Color del texto [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted];
En la línea 1 anterior, la constante. M_PI se divide por 180 para generar 1 radian, que luego se multiplica por 5.0f para dar como resultado una rotación de 5 radianes. Como se dará cuenta, si compila y ejecuta el proyecto, es probable que lo anterior provoque problemas de suavizado con los elementos UIKit que se dibujan de forma dinámica. En consecuencia, la aplicación de una rotación es más apropiada con un UIButton cuando se establece la propiedad de la imagen de fondo y se usan los gráficos de trama (es decir, esto funciona mejor con los archivos PNG).
Con los cinco consejos anteriores, ha visto lo fácil que puede ser hacer ajustes sutiles pero significativos a un UIButton objeto. Sin embargo, ¿qué pasaría si te dijera que hacerlo podría ser aún más fácil? Reunirse UIButton-Glossy, una categoría de código abierto de George McMullen que aplica automáticamente un degradado y un acabado brillante a UIButton objetos.
Implementar UIButton-Glossy En tu propio proyecto es simple. Después de que hayas descargado el UIButton-Glossy.h y UIButton-Glossy.m archivos y los agregó a su proyecto de Xcode, importe el archivo * .h en el controlador de la vista principal del proyecto, como esto:
#import "ViewController.h" #import "UIButton + Glossy.h"
Ahora puede aplicar instantáneamente un efecto brillante fresco en sus botones con solo una línea de código: [btn makeGlossy];.
Para ver esto en acción, reemplace el código del controlador de vista existente con lo siguiente:
para (UIButton * btn en botones) // Configurar el botón Color del texto [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Establecer el color de fondo predeterminado [btn setBackgroundColor: [UIColor blackColor]]; // Agregar fuente personalizada [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" tamaño: 18.0f]]; // Make glossy [btn makeGlossy];
Los botones ahora deben tener un acabado brillante y el resultado final debe tener un aspecto similar al siguiente:
Este tutorial ha demostrado múltiples técnicas para hacer personalizados. UIButton los objetos brillan. Descargue el proyecto adjunto para echar un vistazo al código fuente completo y final.
Preguntas? ¿Comentarios? Apaga el sonido o envíame un mensaje directamente a @markhammonds.
Accentsconagua