En esta clase vamos a personalizar un poco las tarjetas que no hemos hecho mucho con ellas realmente
sólo colocamos este match pero no hemos cambiado mucho de las tarjetas.
De hecho también teníamos el problema de los bordes redondeados de esta tarjeta.
Entonces abramos nuevamente nuestra carpeta y buscamos una tarjeta tipo 1 lo que quiero hacer a continuación
es hacer un par de cambios en esta tarjeta.
Principalmente hay una propiedad que ya hemos visto anteriormente que se llama Elevation Elevation si
yo dejo el mouse encima nos dice que es de tipo tobo.
Este Elevation es supuestamente qué tan alta la tarjeta bastarnos pero mentalizamos qué tan alta en
relación a la sombra que va a proyectar podemos ponerla aquí el valor de 1.0 que es el valor por defecto
y no miraríamos nada si tenemos una elevación de 0.0 es sin sombra y por consecuencia debería desaparecer
el borde.
Noten que la tarjeta siempre es sutilmente se ve que la tarjeta es blanca y el color gris del fondo
es muy claro pareciera que del mismo color pero ustedes en su dispositivo sí lo están viendo ahí podrían
notar la diferencia si nosotros colocamos una elevación de 10 noten que la sombra se proyecta de diferente
manera.
Pueden jugar con eso para crear este tipo de sombra.
Nosotros vamos a hacer una sombra diferente en la tarjeta tipo 2 pero ya llegaremos a ella ahora qué
pasa si ustedes quieren hacer más pronunciado los bordes de esta tarjeta.
Bueno puedo aquí colocar lo que es la forma SOIB y noten que lo que les voy a enseñar se aplica a cualquier
objeto o widget que tenga este Yaap.
Voy a presentar Tapp y dejar el mouse encima del SAP.
El SAP dice que recibe algo llamado bueno una clase llamada soy borde pero no me queda muy claro aquí
Fernando qué tipo de sabor.
Ah y bueno para eso les voy a pedir que vayamos a la documentación busque mosquear Car class.
Ya habíamos entrado aquí anteriormente se acuerdan los constructores por aquí tenemos nuestros seis
border.
Pueden hacer clic en borde o pudimos haber buscado allá y desde ahí directamente es que ustedes van
a poder saber más al respecto.
Lo que yo quiero que prestemos mayor atención son estas implementaciones.
Tenemos varios tipos de soportes hay unos que son cuadrados circulares y otras maneras vamos a utilizar
entonces nosotros ese Roundtable tango bord para que nosotros podamos hacer un rectángulo con bordes
redondeados y cambiar esa pronunciación de los bordes.
Para eso regresamos a nuestra aplicación en el SAP vamos a colocar un Rong de tango Border tap y debe
ocultar la barra lateral.
Si yo dejo el mouse encima ok aquí está el constructor tenemos el Border SAdD border.
Bueno aquí teníamos el Borox por defecto que por defecto no tiene ningún valor entre otras propiedades.
Si dejábamos presionado contra la espaciadora y subimos aquí arriba tenemos el borde Radius y el stick
vamos a trabajar con el borde rayos porque por ahí me suena que era lo que yo necesito.
Por de Radius tap y si yo dejo el mouse encima podríamos ver más información del mismo me dice que es
de de radios geometric que ya lo habíamos utilizado antes si no mal recuerdo pero en todo caso aquí
sería borde RADIUS.
Vamos a ver vamos a seleccionar este que dice circula subir un poco más para que podamos ver y se aplica
muy parecido a lo que era el eje y ZET tenemos horizontal tenemos online y tenemos simétrico entre otras
maneras pero vamos a trabajar con el circular que se va aplicar en todos y voy a poner que va a ser
de unos 0.0.
Si ahora o los cambios notarán que nuestra tarjeta se pone como puntas muy puntiagudas valga la redundancia
pero muy afiladas.
Quiere decir que no tiene borde.
Si yo pongo aquí un vamos a aprobar un 50 grados los cambios deberíamos de tener un porte más pronunciado.
Si ponemos ahora un 20 grados los cambios se mira bastante bien y lo voy a dejar de esa manera.
Esa es nuestra primera personalización en esta tarjeta.
Vimos el Elevation y el borde bajemos y ahora trabajemos con la tarjeta tipo 2.
Ahora con esta segunda tarjeta es un poquito más difícil porque no se está respetando los bordes de
la tarjeta no tenemos los bordes redondeados entonces vamos a hacer lo siguiente veamos en la tarjeta
hay una propiedad que se llama clip ok.
Este clip supuestamente nos debería de ayudar a en antialias nos debería ayudar a que nada a que nada
lo que esté en la tarjeta se salga del contenido de la misma pero ahorita no me está funcionando.
O sea que en este momento no está funcionando y según la documentación eso es lo que hace pero no está
funcionando así que lo voy a quitar a Fernando.
Cómo podemos hacer para que la imagen siempre respete los bordes de la tarjeta.
Bueno varias cosas me voy a hacer un pequeño cambio voy a meter toda esa tarjeta en un contenedor.
Voy a cambiar este botón por una final.
Así lo voy a llamar que va a ser igual a todo ese objeto.
Cuál es el objetivo.
Bueno el objetivo es que toda esta tarjeta en esta variable y yo voy a poder venir aquí al final de
la tarjeta hacer un ratón de un container parentesis punto y coma.
Y aquí voy a colocar el chip.
Qué pasó aquí que el chip de la tarjeta que seguramente tenía algún equipo y me hizo ese desastre pero
lo único que hice fue esto container y puse la tarjeta SIM grabó los cambios va a observar que nada
pasó.
Por qué.
Porque acuérdense que un container es como si fuera un Tiva HTML no va a cambiar sus propiedades por
defecto es igual al ancho y alto que tenga su contenido que en este caso sería esa tarjeta y por eso
no sucedió absolutamente nada.
Pero el container tiene varias cosas interesantes.
Una de ellas es el decreto que recibe un box Declaration podemos dejar el mouse encima está Declaration
voy a ponerlo aquí Box Declaration y aquí tiene varias propiedades tenemos el borde de radio usado color
gradiente imágenes y también varias cosas.
Aquí lo que voy a hacer es primero que nada colocar el borde radios bordes radios de tipo porder radios
circulares lo voy a poner de unos 20 puntos cero.
Voy a grabar los cambios y apareciera pareciera que nada cambió.
Pareciera que nada fue diferente vamos a hacer una pequeña.
Un pequeño detalle para que nos ayude a nosotros observar lo que estamos haciendo.
Y es aquí en el color voy a poner de aquí en colores puntos red.
Vamos a ponerle el color rojo pero aquí me falta una coma.
Grabo los cambios y ahora sí tenemos la imagen de lo que nosotros estábamos buscando.
Como ustedes pueden observar efectivamente el contenedor está con los bordes redondeados pero se está
saliendo de los márgenes.
De hecho estamos peor porque ahora tanto la imagen como la tarjeta no están respetando los bordes.
Esto parece muy difícil pero ya vamos a resolverlo.
Ok sigamos viendo sigamos viendo qué más podemos hacer.
La ventaja del contenedor es que vamos a poder aplicar las sombras y otras cosas.
Déjenme mover este Chile aquí abajo sólo para que quede un poco más claro.
Estas son las propiedades del contenedor y aquí viene el contenedor mismo.
Voy a cortar esta tarjeta y existe un widget llamado Clip AR R RET que es clip art brut y esto nos va
a permitir a nosotros cortar cualquier cosa que se encuentre fuera de ese contenedor.
Este clip art recibe también el Rayo es un chal Clipper entre otras cosas y en el chat voy a poner la
tarjeta voy a grabar los cambios y vamos a ver qué sucede.
Reventó y reventó.
Si nosotros vemos lo que dice Vamos a ver.
Dice que falló porque el borde radios no puede ser diferente de uno.
Aquí pareciera como que el chip a RedQ no tiene la propiedad de radio o sea por defecto y por eso no
nos está marcando un error a la hora de describirlo pero vamos a colocar aquí el border radius igual
a border radius circular y lo van a poner nuevamente de 20.00.
Ya vamos a quitar todo ese montón de cosas que tenemos de más.
Si nosotros observamos ya está respetando los bordes ven aquí tememos que ya la imagen no se extiende
a eso igual que aquí abajo.
Podríamos poner los bordes un poco más pronunciados como por ejemplo de unos 30 puede agravar los cambios
ya son más pronunciados los bordes.
La tarjeta da la impresión de que es como medio puntiaguda.
Ya vamos a resolver eso.
Aquí voy a ponerle también de30 para que se mire más parejo porque hoy estamos bien y vamos agarrando
forma y agarrando forma.
Voy a subir un poco.
No teníamos ni Border de Radius perfecto así estamos bien.
Ahora voy a quitarle el color rojo porque ya no me interesa verlo.
Ok vamos a ver.
Ahí va agarrando forma pareciera que la tarjeta pareciera como que las puntas no son muy redondeadas
y eso es correcto porque si ustedes lo ven nuevamente con color rojo tenemos que la imagen.
El contenedor tiene como una pequeña separación entre el contenedor y la tarjeta.
Eso nos está dando un pequeño problema.
Vamos a hacer este pequeño cambio sólo para lograr el objetivo que nosotros queremos.
Voy a cambiar esta tarjeta por un container también que es lo único que hice cambié el placard por un
container grabo los cambios y pareciera que mágicamente se adaptó todo.
Acuérdense que la imagen la tenemos que se adapte al todo el ancho posible mediante el FIT Box cover.
Entonces ya lo tenemos así voy a bajar un poco voy a bajar un poco y el color rojo ya no me sirve lo
puedo quitar y en teoría acá va tomando forma.
Creo que lo que hace falta acá es colocarle un usado un book usado para que parezca como la tarjeta
que tenemos aquí arriba que no tiene un borde pero la sombra da la ilusión óptica de que la tenemos
hoy.
Establezcamos ese Book usado aquí en el box Declaration del container.
Tenemos nuestro pochado y si nos fijamos dice que es una lista de boxeadores.
Dios mío eso suena cada vez más entonces creamos nuestra lista y la lista es de tipo Vox sado.
De esa manera estamos seguros de que lo que escribamos debería ser aceptado.
Ok empezamos.
El boxeador tiene esta clase entero y tiene su constructor.
Es más sencillo de lo que suena.
Tiene su color su offset el spread regios y el blur Radius todo esto yo sé que a más de un diseñador
gráfico o a alguna persona que ya conozco un poco de estas propiedades le va a sonar bastante familiar.
Ok entonces vamos a comenzar con el color que color del boxeador va a ser.
Qué les parece si empezamos con un rojo solo para que quede súper claro Colors apuntó.
Read grabó los cambios.
Deberíamos de poder observar boxeador y ahí está bueno qué raro que apareció adentro pero ya lo vamos
a ver realmente la sombra pero esta interna ya vamos a ver cómo ahora vamos con el blur RADIUS.
El burro deDios es un doble dejaramos encima ven un doble y por defecto es cero cero.
Qué les parece si le ponemos que sea de unos 10.0 graba los cambios y ahí va agarrando un poquito de
forma está agarrando forma con la gente luego del Blurred.
Voy a colocar el spread Beyos que es qué tanto quieren ustedes que se extienda esto por defecto podemos
dejar el mouse encima para ver su valor su valor es de 0.0.
Entonces qué les parece si lo ponemos de 2.0 sólo para probar a ver si se ven.
Ni se mira un poquito mejor.
Venga que se expandió aquí arriba coma.
Sigamos.
Tenemos ahora observe y creo que sólo hace falta si el ófset el es la posición mentalizamos que tuviéramos
un plano cartesiano acá en yé y X ok.
Entonces dependiendo de los valores de x Yeh ustedes pueden mover esto un poco al mover la sombra para
cualquier dirección que ustedes quieran.
Si dejamos el más encima dice que nos espera o que le está esperando un obsequio de tipo obstat.
Nada raro.
Pero vamos a definirlo ófset.
Y aquí está la coordenada en X y la coordenada en ambos valores son de tipo doble y pueden ser números
positivos y números negativos y eso determina la posición de Lasombra.
Digamos que la sombra la quiero en 2.0 y la quiero en 10.0 gravó los cambios y la mobi un poquito hacia
abajo.
Si yo la quisiera hacia arriba voy a poner un menos 10 grados los cambios y ahí subió un poco.
Es como un plano cartesiano invertido porque los números positivos son aquí arriba y los negativos aquí
abajo.
Pero igual ustedes es la ventaja del otro y que lo puede hacer bastante rápido.
En teoría está la sombra y el efecto que yo quiero lograr sólo que no hacer con ese colored lo voy a
poder con el black con un índice de opacidad de 26.
Yo sé que estas cosas la primera vez que vemos pero de paso con la explicación que le estoy dando debería
ser suficiente para entender qué significan esos números.
Los cambios y deberíamos de tener ya nuestras sombras.
Ok está bien Fernando pero qué pasa por qué sigue como transparente el contenedor o el contenido de
este container.
Porque realmente no tiene ningún color.
Si yo pongo aquí el color Red ok aquí grabo los cambios.
Vamos a ver que sucede todo el contenido ahora del contenedor si está rojo valga la redundancia contenido
del contenedor pero en rojo ustedes me acaban de ver.
Si yo quiero que sea blanco entonces ponemos Wart grabó los cambios y hemos logrado nuestra tarjeta
pero no es exactamente una tarjeta es un contenedor que pareciera tarjeta pero esto nos ayuda mucho
a tener un mayor control de estos elementos.
Ya sabemos cómo cambiar de Radio Ya sabemos cómo poner sombras cambiar colores muchas cosas.
Espero que esta clase les haya gustado y si quieren para terminar para probar el este libio voy a copiarme
este 6 Box una coma y voy a copiar varias veces esto ok varias tarjetas iguales.
Ahora puedo hacer un scroll y ahí está bueno esto ha sido todo elejercicio por los momentos los veo
en la siguiente clase.