Ahora, lo bueno es que, por supuesto, no tiene que usar este ancho y
altura predeterminados, puede establecer los suyos propios. Entonces puede darle un estilo a esta imagen y yo
haré esto, aquí agregaré una propiedad de imagen en la hoja de estilo y le daré un ancho de digamos el 80% de la vista principal, entonces
el 80% de esta vista de pantalla, entonces Por lo tanto, el 80% del ancho de la pantalla y quizás una
altura de 300 píxeles
y ahora podemos asignar este estilo de imagen aquí a este componente de imagen usando el accesorio de estilo allí
y apuntando a la imagen de estilos como
esta y si lo hacemos ahora, vemos que es mucho mejor y ahora la imagen se ajusta en la pantalla y cambia de tamaño en consecuencia.
Ahora, por cierto, también puede controlar cómo se redimensiona la imagen
si define un ancho y alto que no cumple con la relación de aspecto de la imagen
original, por lo que si su relación de ancho y alto no es la misma que la imagen archivo
y es probable que tenga
una relación de aspecto diferente, bueno, entonces puede establecer un modo de cambio de tamaño aquí y esto simplemente es una cadena donde puede
elegir
entre diferentes opciones y, por ejemplo, la cubierta es una opción donde cambiará el tamaño de la imagen para mantener
su relación de aspecto y encajarlo en este cuadro aquí. Para contener, es similar pero para contener, no necesariamente tomará la caja completa
como puede ver aquí, aquí
contiene la imagen y simplemente la encoge para que no exceda el ancho y la altura de la caja
que le reservamos. . Para la cubierta,
también mantiene la relación de aspecto, pero no necesariamente reduce la imagen para que quepa en este
cuadro, sino que solo recorta la imagen más allá de los límites del acceso que de lo contrario excedería.
Por lo tanto, simplemente podemos jugar con estos diferentes ajustes para obtener la configuración que desee,
la cubierta es la predeterminada, pero en caso de que desee conservar toda la imagen y no desee recortarla en ningún eje,
puede configurar esto en contener y también puedes jugar con los otros valores.
Iré con la cubierta, que de nuevo es
la predeterminada, por lo que podría eliminar este accesorio aquí, pero para mostrar que puede configurarlo, lo dejaré aquí.
Ahora, esto le permite agregar una imagen aquí en la pantalla y, por supuesto, puede asignar más
estilos, por ejemplo, podríamos intentar darle a estas esquinas redondeadas
agregando también un radio de borde aquí y configurando esto para decir 200, muy grande radio de borde para
representar una imagen redondeada.
Sin embargo, ahora parece un poco extraño, una mejor manera de configurar esto es simplemente envolver
la imagen en una vista circundante como esta y luego asignar los estilos que deberían agregar esquinas redondeadas o soltar sombras o
algo así a esa vista circundante.
Entonces, puede referirse al accesorio del contenedor de imágenes o algo así y agregar esto aquí abajo en su
hoja de estilo y ahora en ese contenedor de imágenes, puede configurar un radio de borde de digamos 200, tal vez
también un ancho de borde de 3 y un borde color
negro para que
también tengamos un borde visual y
si hacemos eso y guardamos esto, obtenemos este aspecto extraño. La razón de esto es que no hemos establecido un ancho y
alto en el contenedor y, por lo tanto, debemos hacer esto y usar el ancho y alto
que estábamos configurando en la imagen, establecerlo en el contenedor y en la imagen, podemos ahora
simplemente use un ancho de 100% y una altura de 100% porque la imagen está dentro de este contenedor, por lo que
un 100% aquí y aquí significa que toma el ancho y la
altura que estamos configurando
en el contenedor, pero ahora el contenedor también tiene estos valores para que el contenedor tenga el tamaño adecuado.
Ahora, lo que puedes ver es algo extraño, sin embargo, la imagen se superpone al contenedor.
Vemos las esquinas redondeadas, vemos
el círculo aquí en el fondo, aquí con estas esquinas o bordes negros aquí, pero la imagen no
se recorta en ese círculo, por así decirlo, y eso se
puede lograr agregando
otra propiedad en el contenedor que contiene la imagen y esa es
la propiedad de desbordamiento con el valor de oculto.
Eso significa que cualquier niño dentro del contenedor que se saldría del contenedor, que
iría más allá de los límites de ese contenedor en realidad está recortado, se
corta de modo que ahora realmente exprimimos bien la imagen en ese contenedor con el redondeado rincones que
tenemos aquí.
Ahora, lo que también podemos agregar además es un poco de margen en el eje vertical, tal
vez de 30 para tener algo de espacio alrededor de la parte superior e inferior de
la imagen y, con eso, no parece tan malo, diría yo.
Ahora, una cosa que notará es que no se ve como un círculo perfecto aquí en Android.
La razón de esto es que nuestro radio de borde no se calcula perfectamente, el radio del borde debe
ser la mitad de su ancho y altura y el problema
es que el ancho y la altura no son
iguales, por lo que en realidad deberíamos representar un cuadrado aquí y luego agregar un radio de borde para obtener un círculo perfecto.
Entonces, la solución podría ser que establezcamos el ancho de 300 aquí en el contenedor de imágenes y, por lo tanto, tengamos el mismo ancho
que
la altura, y ahora usemos un radio de borde que sea la mitad del que es
150 y ahora obtendremos un círculo perfecto en ambos dispositivos.
Esto también significa que en dispositivos muy pequeños, nuestra imagen aquí, nuestro círculo podría no caber en la pantalla si los
dispositivos tienen una pantalla que es más pequeña que 300 píxeles con respecto a su ancho, pero aprenderemos sobre herramientas, cómo averiguar
qué ancho de dispositivo nuestro dispositivo tiene y cómo podemos ajustar los estilos a eso en el próximo módulo.
Por ahora vamos con el valor codificado aquí que se ve bien en estas pantallas aquí y cubriremos nuevamente las
herramientas que nos ayudan con otras pantallas de dispositivos más adelante.
Así es como puede agregar una imagen y cómo puede peinarla, cómo puede redondearla como lo hace aquí, lo que por
supuesto no tiene que hacer, pero que se ve bien en este
caso aquí, creo, cómo puede hacerlo esto si tienes la imagen como un archivo aquí.
Ahora, ¿qué pasa si la imagen proviene de la web?