1 00:00:02,240 --> 00:00:07,730 Maintenant, la bonne chose est bien sûr que vous n'avez pas à utiliser cette largeur et 2 00:00:07,730 --> 00:00:14,310 hauteur par défaut, vous pouvez définir les vôtres. Vous pouvez donc donner un style à cette image et 3 00:00:14,350 --> 00:00:22,490 je vais le faire, ici je vais ajouter une propriété d'image dans la feuille de style et lui donner une largeur de disons 80% de la 4 00:00:22,550 --> 00:00:28,850 vue parent, donc 80% de cette vue d'écran, donc 80% de la largeur de l'écran par conséquent et peut-être une 5 00:00:28,880 --> 00:00:30,260 hauteur de 300 6 00:00:30,260 --> 00:00:36,380 pixels et maintenant nous pouvons attribuer ce style d'image ici à ce composant d'image en utilisant l'accessoire de style 7 00:00:36,380 --> 00:00:38,990 là-bas et en pointant l'image de styles comme 8 00:00:39,000 --> 00:00:46,850 ceci et si nous le faisons maintenant, nous voyons que c'est bien mieux et maintenant l'image s'adapte à l'écran et est redimensionnée en conséquence. 9 00:00:46,850 --> 00:00:50,560 À présent, vous pouvez également contrôler la façon dont l'image 10 00:00:50,570 --> 00:00:56,420 est redimensionnée si vous définissez une largeur et une hauteur qui ne correspondent pas au rapport 11 00:00:56,420 --> 00:01:02,750 d'aspect de l'image d'origine, donc si votre rapport largeur / hauteur n'est pas le même que l'image fichier 12 00:01:02,750 --> 00:01:04,470 et les chances sont que 13 00:01:04,610 --> 00:01:12,670 vous avez un rapport d'aspect différent, eh bien, vous pouvez définir un mode de redimensionnement ici et c'est simplement une chaîne où vous 14 00:01:12,730 --> 00:01:13,550 pouvez 15 00:01:13,630 --> 00:01:20,260 choisir parmi différentes options et par exemple la couverture est une option où vous redimensionnerez l'image pour conserver 16 00:01:20,260 --> 00:01:26,980 son rapport d'aspect et placez-le dans cette case ici. Pour contenir, c'est similaire mais pour contenir, il ne prendra pas nécessairement la totalité de 17 00:01:26,980 --> 00:01:28,330 la boîte comme vous pouvez le 18 00:01:28,360 --> 00:01:33,430 voir ici, ici il contient l'image et la rétrécit simplement afin qu'elle ne dépasse pas la largeur et la hauteur de la boîte 19 00:01:33,430 --> 00:01:35,950 que nous lui réservons . Pour la couverture, 20 00:01:35,950 --> 00:01:41,740 il conserve également le rapport d'aspect mais ne réduit pas nécessairement l'image pour tenir 21 00:01:41,740 --> 00:01:48,430 dans cette boîte, au lieu de cela, il recadre l'image au-delà des limites de l'accès qu'elle dépasserait autrement. 22 00:01:48,490 --> 00:01:53,880 Nous pouvons donc simplement jouer avec ces différents paramètres pour obtenir la configuration que vous souhaitez, la couverture 23 00:01:53,920 --> 00:02:01,480 est la valeur par défaut, mais si vous souhaitez conserver l'image entière et que vous ne souhaitez pas la recadrer sur aucun axe, vous pouvez 24 00:02:02,050 --> 00:02:06,770 définir cette valeur sur contenir et vous pouvez jouer avec les autres valeurs aussi. 25 00:02:06,790 --> 00:02:09,110 J'irai avec la couverture qui est encore la valeur 26 00:02:09,140 --> 00:02:13,960 par défaut, vous pouvez donc supprimer cet accessoire ici, mais pour montrer que vous pouvez le définir, je le laisse ici. 27 00:02:13,960 --> 00:02:20,390 Maintenant, cela vous permet d'ajouter une image ici à l'écran et bien sûr, vous pouvez attribuer plus de styles, par 28 00:02:20,410 --> 00:02:24,010 exemple, nous pourrions essayer de donner à ces coins arrondis en 29 00:02:24,010 --> 00:02:30,940 ajoutant maintenant un rayon de bordure ici et en définissant cela comme disons 200, donc vraiment grand rayon de la bordure 30 00:02:30,940 --> 00:02:32,800 pour rendre une image arrondie. 31 00:02:32,800 --> 00:02:39,580 Maintenant, cela semble un peu étrange, une meilleure façon de régler cela est simplement d'envelopper l'image dans 32 00:02:39,580 --> 00:02:48,740 une vue environnante comme celle-ci, puis d'attribuer les styles qui devraient ajouter des coins arrondis ou des ombres portées ou quelque chose 33 00:02:48,740 --> 00:02:51,670 comme ça à cette vue environnante. 34 00:02:51,680 --> 00:02:58,130 Donc là, vous pouvez vous référer à l'accessoire de conteneur d'image ou quelque chose comme ça et l'ajouter ici 35 00:02:58,130 --> 00:03:05,560 dans votre feuille de style et maintenant sur ce conteneur d'image, vous pouvez configurer un rayon de bordure de disons 200, peut-être aussi 36 00:03:06,240 --> 00:03:10,050 une largeur de bordure de 3 et une bordure couleur de noir 37 00:03:10,080 --> 00:03:11,480 afin que nous 38 00:03:11,490 --> 00:03:13,660 ayons également une bordure visuelle et 39 00:03:13,800 --> 00:03:21,000 si nous le faisons et l'enregistrons, nous obtenons ce look étrange. La raison en est que nous n'avons pas défini de largeur et de 40 00:03:21,000 --> 00:03:25,770 hauteur sur le conteneur et que nous devons donc le faire et utiliser la largeur et la hauteur 41 00:03:25,770 --> 00:03:30,480 que nous définissions sur l'image, la définir sur le conteneur à la place et sur l'image, nous 42 00:03:30,480 --> 00:03:36,630 pouvons maintenant utilisez simplement une largeur de 100% et une hauteur de 100% parce que l'image est à l'intérieur de ce conteneur, donc 43 00:03:36,630 --> 00:03:40,230 un 100% ici et ici signifie qu'il faut la largeur et la hauteur 44 00:03:40,230 --> 00:03:41,610 que nous mettons en 45 00:03:41,730 --> 00:03:47,280 place sur le conteneur mais maintenant le conteneur aussi a ces valeurs pour que le conteneur soit dimensionné de manière appropriée. 46 00:03:47,280 --> 00:03:51,660 Maintenant, ce que vous pouvez voir est quelque chose d'étrange, l'image chevauche le conteneur. 47 00:03:51,660 --> 00:03:53,510 Nous voyons les coins arrondis, 48 00:03:53,520 --> 00:03:59,700 nous voyons le cercle ici en arrière-plan, ici avec ces coins ou bords noirs ici, mais l'image 49 00:03:59,700 --> 00:04:03,670 n'est pas rognée pour ainsi dire et cela peut être réalisé 50 00:04:03,750 --> 00:04:04,900 en ajoutant 51 00:04:04,900 --> 00:04:09,120 une autre propriété sur le conteneur qui contient l'image et c'est la 52 00:04:09,410 --> 00:04:12,650 propriété de débordement avec la valeur de caché. 53 00:04:12,660 --> 00:04:18,030 Cela signifie que tout enfant à l'intérieur du conteneur qui sortirait du conteneur, 54 00:04:18,030 --> 00:04:23,510 qui dépasserait les limites de ce conteneur est en fait coupé, est coupé 55 00:04:23,760 --> 00:04:30,420 de sorte que maintenant nous comprenons bien l'image dans ce conteneur avec l'arrondi coins que nous sommes 56 00:04:30,420 --> 00:04:31,440 arrivés ici. 57 00:04:31,470 --> 00:04:36,490 Maintenant, ce que nous pouvons également ajouter, c'est un peu de marge sur l'axe vertical, peut-être de 58 00:04:36,660 --> 00:04:41,350 30 pour avoir un certain espacement autour de l'image en haut et en bas et 59 00:04:41,520 --> 00:04:44,910 avec cela, cela ne semble pas trop mal, je dirais. 60 00:04:44,910 --> 00:04:51,420 Maintenant, vous remarquerez que cela ne ressemble pas à un cercle parfait ici sur Android. 61 00:04:51,430 --> 00:04:55,990 La raison en est que notre rayon de bordure n'est pas calculé parfaitement, le rayon de bordure doit 62 00:04:55,990 --> 00:04:58,570 être la moitié de votre largeur et hauteur et le problème 63 00:04:58,570 --> 00:05:01,060 est que la largeur et la hauteur ne sont 64 00:05:01,060 --> 00:05:06,380 pas égales, nous devons donc réellement rendre un carré ici, puis ajouter un rayon de la frontière pour obtenir un cercle parfait. 65 00:05:06,490 --> 00:05:13,510 Donc, la solution pourrait être que nous définissions la largeur de 300 ici sur le conteneur d'image et que nous ayons donc la même largeur 66 00:05:13,510 --> 00:05:13,960 que 67 00:05:13,980 --> 00:05:18,640 la hauteur et utilisons maintenant un rayon de bordure moitié de celui qui est 150 et 68 00:05:18,640 --> 00:05:21,600 maintenant nous obtiendrons un cercle parfait sur les deux dispositifs. 69 00:05:21,600 --> 00:05:28,480 Cela signifie également que sur de très petits appareils, notre image ici, notre cercle pourrait ne pas tenir sur l'écran si 70 00:05:28,480 --> 00:05:35,590 les appareils ont un écran inférieur à 300 pixels en ce qui concerne sa largeur, mais nous découvrirons les outils, comment savoir 71 00:05:35,590 --> 00:05:41,830 quelle largeur d'appareil notre appareil a et comment nous pouvons ajuster les styles à cela dans le module suivant. 72 00:05:41,830 --> 00:05:47,380 Pour l'instant, allons-y avec la valeur codée en dur ici qui semble bonne sur ces écrans ici et nous couvrirons à 73 00:05:47,500 --> 00:05:50,950 nouveau les outils qui nous aideront avec d'autres écrans d'appareils plus tard. 74 00:05:50,950 --> 00:05:56,380 Donc, voici comment vous pouvez ajouter une image et comment vous pouvez la styliser, comment la faire arrondir comme vous le faites ici, ce qui 75 00:05:56,380 --> 00:05:59,680 bien sûr n'a pas à faire mais qui a l'air bien dans ce cas 76 00:05:59,680 --> 00:06:03,420 ici, je pense, comment vous pouvez faire ceci si vous avez l'image sous forme de fichier ici. 77 00:06:03,430 --> 00:06:05,530 Maintenant, que se passe-t-il si l'image provient du Web?