1 00:00:02,240 --> 00:00:07,730 Ahora, lo bueno es que, por supuesto, no tiene que usar este ancho y 2 00:00:07,730 --> 00:00:14,310 altura predeterminados, puede establecer los suyos propios. Entonces puede darle un estilo a esta imagen y yo 3 00:00:14,350 --> 00:00:22,490 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 4 00:00:22,550 --> 00:00:28,850 el 80% de esta vista de pantalla, entonces Por lo tanto, el 80% del ancho de la pantalla y quizás una 5 00:00:28,880 --> 00:00:30,260 altura de 300 píxeles 6 00:00:30,260 --> 00:00:36,380 y ahora podemos asignar este estilo de imagen aquí a este componente de imagen usando el accesorio de estilo allí 7 00:00:36,380 --> 00:00:38,990 y apuntando a la imagen de estilos como 8 00:00:39,000 --> 00:00:46,850 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. 9 00:00:46,850 --> 00:00:50,560 Ahora, por cierto, también puede controlar cómo se redimensiona la imagen 10 00:00:50,570 --> 00:00:56,420 si define un ancho y alto que no cumple con la relación de aspecto de la imagen 11 00:00:56,420 --> 00:01:02,750 original, por lo que si su relación de ancho y alto no es la misma que la imagen archivo 12 00:01:02,750 --> 00:01:04,470 y es probable que tenga 13 00:01:04,610 --> 00:01:12,670 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 14 00:01:12,730 --> 00:01:13,550 elegir 15 00:01:13,630 --> 00:01:20,260 entre diferentes opciones y, por ejemplo, la cubierta es una opción donde cambiará el tamaño de la imagen para mantener 16 00:01:20,260 --> 00:01:26,980 su relación de aspecto y encajarlo en este cuadro aquí. Para contener, es similar pero para contener, no necesariamente tomará la caja completa 17 00:01:26,980 --> 00:01:28,330 como puede ver aquí, aquí 18 00:01:28,360 --> 00:01:33,430 contiene la imagen y simplemente la encoge para que no exceda el ancho y la altura de la caja 19 00:01:33,430 --> 00:01:35,950 que le reservamos. . Para la cubierta, 20 00:01:35,950 --> 00:01:41,740 también mantiene la relación de aspecto, pero no necesariamente reduce la imagen para que quepa en este 21 00:01:41,740 --> 00:01:48,430 cuadro, sino que solo recorta la imagen más allá de los límites del acceso que de lo contrario excedería. 22 00:01:48,490 --> 00:01:53,880 Por lo tanto, simplemente podemos jugar con estos diferentes ajustes para obtener la configuración que desee, 23 00:01:53,920 --> 00:02:01,480 la cubierta es la predeterminada, pero en caso de que desee conservar toda la imagen y no desee recortarla en ningún eje, 24 00:02:02,050 --> 00:02:06,770 puede configurar esto en contener y también puedes jugar con los otros valores. 25 00:02:06,790 --> 00:02:09,110 Iré con la cubierta, que de nuevo es 26 00:02:09,140 --> 00:02:13,960 la predeterminada, por lo que podría eliminar este accesorio aquí, pero para mostrar que puede configurarlo, lo dejaré aquí. 27 00:02:13,960 --> 00:02:20,390 Ahora, esto le permite agregar una imagen aquí en la pantalla y, por supuesto, puede asignar más 28 00:02:20,410 --> 00:02:24,010 estilos, por ejemplo, podríamos intentar darle a estas esquinas redondeadas 29 00:02:24,010 --> 00:02:30,940 agregando también un radio de borde aquí y configurando esto para decir 200, muy grande radio de borde para 30 00:02:30,940 --> 00:02:32,800 representar una imagen redondeada. 31 00:02:32,800 --> 00:02:39,580 Sin embargo, ahora parece un poco extraño, una mejor manera de configurar esto es simplemente envolver 32 00:02:39,580 --> 00:02:48,740 la imagen en una vista circundante como esta y luego asignar los estilos que deberían agregar esquinas redondeadas o soltar sombras o 33 00:02:48,740 --> 00:02:51,670 algo así a esa vista circundante. 34 00:02:51,680 --> 00:02:58,130 Entonces, puede referirse al accesorio del contenedor de imágenes o algo así y agregar esto aquí abajo en su 35 00:02:58,130 --> 00:03:05,560 hoja de estilo y ahora en ese contenedor de imágenes, puede configurar un radio de borde de digamos 200, tal vez 36 00:03:06,240 --> 00:03:10,050 también un ancho de borde de 3 y un borde color 37 00:03:10,080 --> 00:03:11,480 negro para que 38 00:03:11,490 --> 00:03:13,660 también tengamos un borde visual y 39 00:03:13,800 --> 00:03:21,000 si hacemos eso y guardamos esto, obtenemos este aspecto extraño. La razón de esto es que no hemos establecido un ancho y 40 00:03:21,000 --> 00:03:25,770 alto en el contenedor y, por lo tanto, debemos hacer esto y usar el ancho y alto 41 00:03:25,770 --> 00:03:30,480 que estábamos configurando en la imagen, establecerlo en el contenedor y en la imagen, podemos ahora 42 00:03:30,480 --> 00:03:36,630 simplemente use un ancho de 100% y una altura de 100% porque la imagen está dentro de este contenedor, por lo que 43 00:03:36,630 --> 00:03:40,230 un 100% aquí y aquí significa que toma el ancho y la 44 00:03:40,230 --> 00:03:41,610 altura que estamos configurando 45 00:03:41,730 --> 00:03:47,280 en el contenedor, pero ahora el contenedor también tiene estos valores para que el contenedor tenga el tamaño adecuado. 46 00:03:47,280 --> 00:03:51,660 Ahora, lo que puedes ver es algo extraño, sin embargo, la imagen se superpone al contenedor. 47 00:03:51,660 --> 00:03:53,510 Vemos las esquinas redondeadas, vemos 48 00:03:53,520 --> 00:03:59,700 el círculo aquí en el fondo, aquí con estas esquinas o bordes negros aquí, pero la imagen no 49 00:03:59,700 --> 00:04:03,670 se recorta en ese círculo, por así decirlo, y eso se 50 00:04:03,750 --> 00:04:04,900 puede lograr agregando 51 00:04:04,900 --> 00:04:09,120 otra propiedad en el contenedor que contiene la imagen y esa es 52 00:04:09,410 --> 00:04:12,650 la propiedad de desbordamiento con el valor de oculto. 53 00:04:12,660 --> 00:04:18,030 Eso significa que cualquier niño dentro del contenedor que se saldría del contenedor, que 54 00:04:18,030 --> 00:04:23,510 iría más allá de los límites de ese contenedor en realidad está recortado, se 55 00:04:23,760 --> 00:04:30,420 corta de modo que ahora realmente exprimimos bien la imagen en ese contenedor con el redondeado rincones que 56 00:04:30,420 --> 00:04:31,440 tenemos aquí. 57 00:04:31,470 --> 00:04:36,490 Ahora, lo que también podemos agregar además es un poco de margen en el eje vertical, tal 58 00:04:36,660 --> 00:04:41,350 vez de 30 para tener algo de espacio alrededor de la parte superior e inferior de 59 00:04:41,520 --> 00:04:44,910 la imagen y, con eso, no parece tan malo, diría yo. 60 00:04:44,910 --> 00:04:51,420 Ahora, una cosa que notará es que no se ve como un círculo perfecto aquí en Android. 61 00:04:51,430 --> 00:04:55,990 La razón de esto es que nuestro radio de borde no se calcula perfectamente, el radio del borde debe 62 00:04:55,990 --> 00:04:58,570 ser la mitad de su ancho y altura y el problema 63 00:04:58,570 --> 00:05:01,060 es que el ancho y la altura no son 64 00:05:01,060 --> 00:05:06,380 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. 65 00:05:06,490 --> 00:05:13,510 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 66 00:05:13,510 --> 00:05:13,960 que 67 00:05:13,980 --> 00:05:18,640 la altura, y ahora usemos un radio de borde que sea la mitad del que es 68 00:05:18,640 --> 00:05:21,600 150 y ahora obtendremos un círculo perfecto en ambos dispositivos. 69 00:05:21,600 --> 00:05:28,480 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 70 00:05:28,480 --> 00:05:35,590 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 71 00:05:35,590 --> 00:05:41,830 qué ancho de dispositivo nuestro dispositivo tiene y cómo podemos ajustar los estilos a eso en el próximo módulo. 72 00:05:41,830 --> 00:05:47,380 Por ahora vamos con el valor codificado aquí que se ve bien en estas pantallas aquí y cubriremos nuevamente las 73 00:05:47,500 --> 00:05:50,950 herramientas que nos ayudan con otras pantallas de dispositivos más adelante. 74 00:05:50,950 --> 00:05:56,380 Así es como puede agregar una imagen y cómo puede peinarla, cómo puede redondearla como lo hace aquí, lo que por 75 00:05:56,380 --> 00:05:59,680 supuesto no tiene que hacer, pero que se ve bien en este 76 00:05:59,680 --> 00:06:03,420 caso aquí, creo, cómo puede hacerlo esto si tienes la imagen como un archivo aquí. 77 00:06:03,430 --> 00:06:05,530 Ahora, ¿qué pasa si la imagen proviene de la web?